HTML學習10：表單格式化 · Web前端HTML+CSS+JS初級入門

表單格式化，其實我也不想起這個名字的，在前面學習的HTML中有文本格式化，這次的表單和表格的結合不妨叫做表單格式化。這篇博客用到的HTML主要標簽有：<table>標簽和<form>標簽以及兩個標簽中所包含的各個小標簽。這些標簽的使用和效果在前面已經展示過了，就不再啰嗦了。顧名思義，表單格式化就是將表單的內容以表格呈現。在寫好表單的情況下，用表格將其內容存放。可能我的表述還不明白，但是我現在理解的就是這樣的。以后可能會有不一樣的理解！直接上代碼： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>HTML表單格式化演示</title> </head> <body> <div align="center"> <form> <table border="1" bordercolor="#0000FF" cellpadding="10" cellspacing="0" width="600"> <tr> <th colspan="2">注冊表單</th> </tr> <tr> <td align="right">用戶名稱：</td> <td> <input type="text" name="user" /> </td> </tr> <tr> <td align="right">輸入密碼：</td> <td> <input type="password" name="psw" /> </td> </tr> <tr> <td align="right">確認密碼：</td> <td><input type="password" name="repsw" /> </td> </tr> <tr> <td align="right">選擇性別：</td> <td> <input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女 </td> </tr> <tr> <td align="right">選擇技術：</td> <td><input type="checkbox" name="technology" value="JAVA" />JAVA <input type="checkbox" name="technology" value="HTML" />HTML <input type="checkbox" name="technology" value="CSS" />CSS </td> </tr> <tr> <td align="right">選擇國家：</td> <td> <select name="country"> <option value="none">--選擇國家--</option> <option value="China">中國</option> <option value="USA">美國</option> <option value="UK">英國</option> </select> </td> </tr> <tr> <th colspan="2"> <div align="center"> <input type="reset" value="清除數據" /> <input type="submit" value="提交數據" /> </div></th> </tr> </table> </form> </div> </body> </html> ~~~ 瀏覽器運行結果為： ![](https://box.kancloud.cn/2016-04-28_5721558a65a9c.jpg) 表單格式化的制作是為了以后實現登錄頁面與服務器端交互所做的，也可以不用，在后面我們講述客戶端的 JavaScript驗證和服務器端的完全驗證。這里我們講述的主要還是靜態頁面，在后面的學習中學習了動態網站技術，我們再來實現交互。目前我所接觸的就是ASP.NET了，學習了C#編程語言，應該可以在VS中實現交互。 HTML學習表單格式化相關的知識：[HTML學習7：常用標簽之表格標簽](http://blog.csdn.net/erlian1992/article/details/49403685)? [HTML學習9：常用標簽之表單標簽](http://blog.csdn.net/erlian1992/article/details/49446695)