[TOC] >[info]HTML 表單用于搜集不同類型的用戶輸入,是Web瀏覽器和Web服務器進行通信的最常用的手段，即通 過表單，瀏覽器不僅能從Web服務器中獲得信息，而且還能向Web 服務器反饋信息。HTML為此提供了表單(Form)元素來設計和實現這種交互界面。 ## 常用表單元素 >[info] 表單形成的交互界面上有許多元素，負責收集用戶輸入 的各種信息，這些元素一般稱為控件。 * 單行/多行文本框 * 復選框 * 單選按鈕 * 文件域 * 隱藏域 * 下拉菜單 * 提交按鈕 * 重置按鈕 ~~~ <form method="post" action=""> <!--單行文本--> <input type="text" /> <!--密碼--> <input type="password" /> <!--單選框--> <input type="radio" /> <!--多選框--> <input type="checkbox" /> <!--隱藏域--> <input type="hidden" /> <!--提交按鈕--> <input type="submit" /> <!--文件域--> <input type="file" /> <!--重置按鈕--> <input type="reset" /> <!--按鈕--> <input type="button"/> <!--文本區域--> <textarea></textarea> <!--下拉框--> <select> <option>下拉1</option> <option>下拉2</option> </select> </form> ~~~ **效果如下：** <form method="post" action=""> <!--單行文本--> <input type="text" /> <!--密碼--> <input type="password" /> <!--單選框--> <input type="radio" /> <!--多選框--> <input type="checkbox" /> <!--隱藏域--> <input type="hidden" /> <!--提交按鈕--> <input type="submit" /> <!--文件域--> <input type="file" /> <!--重置按鈕--> <input type="reset" /> <!--按鈕--> <input type="button" value="按鈕"> <!--文本區域--> <textarea></textarea> <!--下拉框--> <select> <option>下拉1</option> <option>下拉2</option> </select> </form> * * * * * ### `input`標簽共有的一些屬性 * type 控件的類型 * value 指定默認值 * name 用于服務器獲取數據 ### `radio`單選和`checkbox`多選 * checked 默認的選中項 * value 該選項被選中后提交到服務器的值 * name 用于服務器獲取數據 ### ` select`元素（下拉列表） >[info] HTML是通過`<select>`和`<option>`標記來定義輸入列表框的。列表框標記`<select>`是成對出現標記，首標記`<select>`和尾標記`</select>` 之間的內容就是一個列表框的內容。和`<option>`標記用于定義列表框中的各個選項 ~~~ <select name="" id="" size="" multiple=""> <option value="">下拉1</option> <option value="">下拉2</option> <option value="" selected="">...</option> <option value="">下拉n</option> </select> ~~~ **例子解析** * `name`用于服務器獲取數據 * `sizesize`屬性是可選的，用于定義列表框的長度。size屬性的 參數值是數字，表示顯示在列表框中的選項數目。當size屬性的參數 值小于列表框中的列表項數目時，瀏覽器會為該列表框添加滾動條， 用戶可以使用滾動條來查看所有的選項。size屬性的缺省值為1。 *` multiple`表示可以多選，如果不設置本屬性，那么只能單選；按 Ctrl可以多選. 用法：multiple="multiple" * `value`當該項被選中并提交后，web瀏覽器 傳送給服務器的數據。缺省時，瀏覽器將傳送選項的內容 * `selected`用來指定選項的初始狀態，表示該選項在初始時 是被選中的。 ## label標簽 >[info] 用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上 ~~~ <p>請點擊文本標記之一，就可以觸發相關控件：</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> ~~~ 效果如下： <p>請點擊文本標記之一，就可以觸發相關控件：</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> **例子解析** * `for`規定` label` 綁定到哪個表單元素。 * `id`需要綁定的元素加個標識。 >[danger]**作業：**把所有常用的表單都練習幾遍，理清不同類型表單的作用。