HTML 表單

1、使用表單標簽

　　網站使用 HTML 表單可與用戶進行交互，表單元素是允許用戶在表單中輸入內容，比如：文本框、文本域、單選框、覆選框、下拉列表、按鈕等等，表單可以把瀏覽者輸入的數據傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的數據。表單使用表單標簽 <form> 來定義：

<form method="傳送方式" action="表單提交地址" name="表單名稱"></form>

　　註意：<from> 是一對閉合標簽，成對出現。method 屬性規定數據傳送的方式（get/post）。action 屬性規定當提交表單時用戶輸入的數據被傳送向何處，比如一個 PHP 頁面(demo.php)。name 屬性可設置表單的名稱。所有的表單控制項都必須放在<from></from>標簽之間，否則用戶輸入的信息提交不到伺服器上。

　　accept-charset 屬性規定伺服器可處理的表單數據字元集。預設值是保留字元串 "UNKNOWN"，表示編碼為包含 <form> 元素的文檔的編碼。

　　enctype 屬性規定在將表單數據發送到伺服器之前如何對其進行編碼。註意：只有 method="post" 時才使用 enctype 屬性。

　　下麵是2個新屬性：

　　autocomplete 屬性規定表單是否應該啟用自動完成功能。自動完成允許瀏覽器預測對欄位的輸入。當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項。註意：autocomplete 屬性 "on" 適用於表單，"off" 適用於特定的輸入欄位，反之亦然。預設值為 on 規定啟用自動完成功能。瀏覽器會基於用戶之前鍵入的值自動完成值。off 則規定禁用自動完成功能。用戶必須在每次使用時輸入值到每個欄位中，瀏覽器不會自動完成輸入。

　　novalidate 屬性規定當提交表單時不對錶單數據進行驗證。

　　From 中的 Get 和 Post 方法：

　　(1)、Get 方式將表單中數據的按照 var=value 的形式，添加到 action 所指向的 URL 後面，並且兩者使用“?”連接，而各個變數之間使用“&”連接；而 Post 方式是將表單中的數據放在 form 的數據體中，按照變數和值相對應的方式，傳遞到 action 所指向的 URL。如下 Get 方式傳送：

http://www.abc.com/demo.php?name=小白&password=12345678

 　　(2)、Get 方式是不安全的，因為在傳輸過程，數據被存放在請求的 URL 地址中，這樣容易造成信息泄漏。

　　(3)、Get 方式傳輸的數據量非常小，一般限制在 2KB 左右，但是執行效率卻比 Post 方法好；而 Post 方式傳遞的數據量相對較大，它是等待伺服器來讀取數據，不過也有位元組限制，這是為了避免對伺服器用大量數據進行惡意攻擊，因此建議儘量使用 Post 方法傳送數據，比如用戶註冊，使用 Get 方法請求數據，比如瀏覽貼子。

2、文本框

　　當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框，文本框也可以轉化為密碼輸入框。輸入域通過 <input> 標簽完成，該標簽規定了用戶可以在其中輸入數據的輸入欄位。輸入欄位可通過多種方式改變，取決於 type 屬性。如下：

1 <form method="post" action="demo.php">
2     <label for="name">用戶名:</label>
3     <input type="text" name="username" id="name" value="小白"><br/>
4     <label for="pass">密　碼:</label>
5     <input type="password" name="password" id="pass" placeholder="請輸入密碼">
6 </form>

　　<input> 標簽用於定義輸入域，而 type 屬性規定了要顯示的輸入域的內容，type="text" 為預設值，定義一個單行的文本欄位輸入，預設顯示寬度為 20 個字元。 name 屬性為文本框命名，以備後臺程式調用。type="password" 定義密碼欄位，密碼欄位字元不會明文顯示，而是以星號或圓點替代。

　　value 屬性可為文本框設置預設值，一般起到提示的作用，value 屬性對於不同 input 類型，用法也不同：

　　(1)、對於 "text"、"password"、"hidden" 類型，定義輸入欄位的初始（預設）值。

　　(2)、對於 "button"、"submit"、"reset"、類型，定義按鈕上的文本。

　　(3)、對於 "checkbox"、"radio"、"image" 類型，則定義與 input 元素相關的值，當提交表單時該值會發送到表單的 action URL。

　　註意：value 屬性對於 <input type="checkbox"> 和 <input type="radio"> 是必需的，不適用於 <input type="file">。

　　而 placeholder 屬性則可規定輸入欄位預期值的簡短的提示信息，比如一個樣本值或者預期格式的短描述，該提示會在用戶輸入值之前顯示在輸入欄位中，該值顯示為虛體，顏色淺，當用戶輸入時自動清除，而用於 <input type="text" value="小白"> 的 value 屬性的預設值顯示為實體，而且顏色深，在用戶輸入時需要自行清除。placeholder 屬性適用於下麵的 input 類型：text、search、url、tel、email 和 password。

　　<label> 標簽則為 input 元素定義標記，一般為輸入標題。<label> 標簽不會向用戶呈現任何特殊效果，它的作用是為滑鼠用戶改進了可用性。如果你在該標簽內點擊文本，就會觸發此控制項。就是說，當用戶單擊選中該 <label> 標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控制項上（就自動選中和該 <label> 標簽相關連的表單控制項上）。for 屬性規定 label 與哪個表單元素綁定，該屬性的值應當與綁定元素的 id 屬性值相同。如下：

1 <form method="post" action="demo.php">
2     <label for="male">男</label>
3     <input type="radio" id="male" name="gender"><br/>
4     <label for="female">女</label>
5     <input type="radio" id="female" name="gender"><br/>
6     <label for="email">郵箱</label>
7     <input type="email" id="email" placeholder="請輸入郵箱地址">
8 </form>

3、文本域

　　文本域是一個多行的文本輸入控制項，當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。文本域通過 <textarea> 標簽完成，如下：

1 <form method="post" action="demo.php">
2     <label for="txt">發表意見：</label><br/>
3     <textarea cols="50" rows="10" id="txt">在這裡輸入內容...</textarea>
4 </form>

　　註意：<textarea> 標簽是一對閉合標簽，成對出現，在開始標簽和結束標簽之間可以輸入預設值，cols 和 rows 屬性則定義文本域的行數和列數，更好的辦法是使用 CSS 的 width 和 height 屬性來定義文本與的大小，width 代替 cols，height 代替 rows。

4、選擇框

　　選擇框可以讓用戶做出選擇，在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，HTML 中有兩種選擇框，即單選框和覆選框，兩者的區別是單選框中的選項用戶只能選擇一項，而覆選框中用戶可以任意選擇多項，甚至全選。定義選擇框通過 <input> 標簽完成，不同的是輸入類型。

　　(1)、單選框

　　type="radio" 定義了單選框，也叫單選按鈕，允許用戶在一定數量的選擇中選取一個選項。如下：

1 <form method="post" action="demo.php">
2     <label for="love">喜　歡</label>
3     <input type="radio" id="love" name="like" value="喜歡" checked><br/>
4     <label for="noLove">不喜歡</label>
5     <input type="radio" id="noLove" name="like" value="不喜歡"><br/>
6     <label for="casual">無所謂</label>
7     <input type="radio" id="casual" name="like" value="無所謂"><br/>
8 </form>

　　(2)、覆選框

　　type="checkbox" 定義了覆選框，允許用戶可以選擇多個選項。如下：

 1 <form method="post" action="demo.php">
 2     <label for="tool1">自行車</label>
 3     <input type="checkbox" id="tool1" name="bike" value="自行車"><br/>
 4     <label for="tool2">汽　車</label>
 5     <input type="checkbox" id="tool2" name="car" value="汽車"><br/>
 6     <label for="tool3">飛　機</label>
 7     <input type="checkbox" id="tool3" name="plane" value="飛機" checked><br/>
 8     <label for="tool4">火　箭</label>
 9     <input type="checkbox" id="tool4" name="rocket" value="火箭" checked><br/>
10     <label for="tool5">毛　線</label>
11     <input type="checkbox" id="tool5" name="wool" value="毛線">
12 </form>

　　value 屬性值是必需的，為提交數據到伺服器的值，供後臺程式使用。name 屬性為輸入控制項命名，供後臺程式使用，checked 屬性規定在頁面載入時應該被預先選定的 <input> 元素。該屬性只適用於 <input type="radio"> 和 <input type="checkbox">。checked 屬性用於設置預設選項，即該選項會被預設選中。該屬性也可以在頁面載入後，通過 JavaScript 代碼進行設置。

　　註意：同一組的單選按鈕，name 屬性取值一定要一致，比如上面例子為同一個名稱“like”，這樣同一組的單選按鈕才可以起到單選的作用。同一組的覆選框，name 屬性取值可以一致，這樣方便為其定義樣式，或者通過 JS 獲取元素。

5、下拉列表框

　　下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、也可以多選。下拉列表框通過 <select> 標簽 和 <option> 標簽完成。

　　(1)、下拉列表單選框

 1 <form method="post" action="demo.php">
 2     <label for="like">喜歡：</label>
 3     <select id="like" name="cars">
 4         <option value="奧迪">奧迪</option>
 5         <option value="寶馬">寶馬</option>
 6         <option value="賓士">賓士</option>
 7         <option value="賓利">賓利</option>
 8         <option value="路虎">路虎</option>
 9     </select>
10 </form>

　　(2)、下拉列表覆選框

 1 <form method="post" action="demo.php">
 2     <label for="like">喜歡：</label>
 3     <select id="like" name="cars" multiple>
 4         <option value="奧迪">奧迪</option>
 5         <option value="寶馬">寶馬</option>
 6         <option value="賓士">賓士</option>
 7         <option value="賓利">賓利</option>
 8         <option value="路虎" selected>路虎</option>
 9     </select>
10 </form>

　　<select> 標簽定義下拉列表選項，而 <option> 標簽定義下拉列表中的選項。

　　下拉列表單選框和下拉列表覆選框，唯一的不同就是覆選框使用了 multiple 屬性實現了多選功能，下拉列表可以進行多選操作就是在 <select> 標簽中設置了 multiple 屬性，該屬性用於規定可同時選擇多個選項，需要註意：下拉列表框根據選項的個數(單選/覆選)，會在網頁上呈現不同的顯示效果。在不同的操作系統，選擇多個選項的方法也不同，在 windows 操作系統下，需要按住 Ctrl 鍵來選擇多個選項，而在 Mac 系統下，需要按住 Command 鍵來選擇多個選項。

　　<option> 標簽的 value 屬性值為向伺服器提交的值，selected 屬性則表示該選項被預設選中，即首次在列表中時表現為選中狀態。該標簽需要與 <select> 標簽配合使用，否則這個標簽是沒有任何意義的。

　　<select> 元素是一種表單控制項，可用於在表單中接受用戶輸入。還元素有幾個重要屬性，required 屬性規定用戶在提交表單前必須選擇一個下拉列表中的選項。autofocus 屬性規定在頁面載入時下拉列表自動獲得焦點。size 屬性規定下拉列表中可見選項的數目。由於各屬性之間的差異，需要告訴用戶是否可以多項選擇，對用戶更友好的方式是使用覆選框。

　　如果有很多的選項組合，就可以使用 <optgroup> 標簽能夠很簡單的將相關選項組合在一起。該標簽經常用於把相關的選項組合在一起。如下：

 1 <form method="post" action="demo.php">
 2     <label for="like">喜歡：</label>
 3     <select>
 4         <optgroup label="國產">
 5             <option value="奇瑞">奇瑞</option>
 6             <option value="大眾">大眾</option>
 7             <option value="現代">現代</option>
 8             <option value="哈弗">哈弗</option>
 9             <option value="比亞迪">比亞迪</option>
10         </optgroup>
11         <optgroup label="進口">
12             <option value="蘭博基尼">蘭博基尼</option>
13             <option value="雷克薩斯">雷克薩斯</option>
14             <option value="凱迪拉克">凱迪拉克</option>
15             <option value="瑪莎拉蒂">瑪莎拉蒂</option>
16             <option value="英菲尼迪">英菲尼迪</option>
17         </optgroup>
18     </select>
19 </form>

　　<optgroup> 標簽一個重要屬性 label 用於為選項組規定描述。

6、按鈕

　　在表單中有兩種按鈕可以使用，分別為：提交按鈕和重置按鈕。還有一種按鈕叫做點擊按鈕。

　　(1)、點擊按鈕

　　type="button" 定義一個可點擊的按鈕，在用戶點擊按鈕時啟動一段 JavaScript。

1 <input type="button" value="按鈕" onclick="show()">
2 <script>
3 function show(){
4     alert("Hello world!");
5 }
6 </script>

　　(2)、提交按鈕

　　當用戶需要提交表單信息到伺服器時，需要用到提交按鈕。type="submit" 用於定義提交按鈕。

1 <form method="post" action="demo.php">
2     <label for="urse">用戶名：</label>
3     <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/>
4     <label for="password">密　碼：</label>
5     <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
6     <input type="submit" value="提交信息">
7 </form>

　　button 和 submit 都是定義一個按鈕，不同的是 button 只是一個普通的按鈕，主要用於綁定事件，如果不給其綁定事件，那麼點擊按鈕不會有任何反應。而 submit 則是提交按鈕，主要用於提交表單，傳送數據，如果給 submit 綁定事件，那麼點擊按鈕觸發事件的同時，也會提交表單。

　　(3)、重置按鈕

　　當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入信息後，發現輸入錯誤，那麼可以使用重置按鈕使輸入框恢復到初始狀態。只需要把 type 設置為 "reset" 就可以。

1 <form method="post" action="demo.php">
2     <label for="urse">用戶名：</label>
3     <input type="text" id="urse" name="ursename" placeholder="郵箱/手機號/用戶名"/><br/>
4     <label for="password">密　碼：</label>
5     <input type="password" id="password" name="pass" placeholder="請輸入密碼" /><br/>
6     <input type="submit" value="提交信息">
7     <input type="reset" value="重置信息">
8 </form>

　　type="reset" 用於定義一個重置按鈕，需要謹慎使用該按鈕，當用戶點擊重置按鈕後，所有表單值都會恢復到預設值，這對於用戶來說，如果不慎點擊了重置按鈕將是一件十分令人惱火的事。

　　在 HTML 中還有一種創建按鈕的方法就是使用 <button> 標簽。該元素與使用 <input> 元素創建的按鈕之間的不同之處就在於：使用 button 元素創建的按鈕，在該元素內部可以放入內容，比如文本或圖像，也就是該元素可以使用多媒體內容，<button> 與 </button> 標簽之間的所有內容都是按鈕的內容。該元素也可以定義點擊按鈕、提交按鈕和重置按鈕。但是他的缺點就是：不同的瀏覽器對 <button> 元素的 type 屬性使用不同的預設值，因此要始終為 <button> 元素規定 type 屬性，不同瀏覽器可能會提交不同的按鈕值，也就是瀏覽器得到的 value 值不同，存在相容性問題。所以要使用 <input> 元素在 HTML 表單中創建按鈕。

7、input 元素屬性和其他輸入類型

　　除了前邊提到的一些屬性外，input 元素還有一些重要屬性，以及 HTML5 新增加的屬性。

　　readonly 屬性規定輸入欄位是只讀的。該屬性是一個布爾值。只讀欄位是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該欄位，還可以選中或拷貝其文本。readonly 屬性可以防止用戶對值進行修改，直到滿足某些條件為止，比如選中了一個覆選框。然後，需要使用 JavaScript 消除 readonly 值，將輸入欄位切換到可編輯狀態。

　　size 屬性規定以字元數計的 <input> 元素的可見寬度。size 屬性適用於下麵的 input 類型：text、search、tel、url、email 和 password。如需規定 <input> 元素中允許的最大字元數，需要使用 maxlength 屬性。

　　以下是 HTML5 中的新屬性：

　　autocomplete="on|off" 屬性規定輸入欄位是否應該啟用自動完成功能。預設值為 on，規定用戶啟用自動完成功能，off 則表示禁用。註意：autocomplete 屬性適用於下麵的 <input> 類型：text、search、url、tel、email、password、date pickers(日期選擇器)、range 和 color。

　　multiple 屬性規定允許用戶輸入到 <input> 元素的多個值。該值是一個布爾值，註意：multiple 屬性適用於以下 input 類型：email 和 file。

　　pattern 屬性規定用於驗證 <input> 元素的值的正則表達式。可以使用使用全局的 title 屬性來描述模式以幫助用戶。pattern 屬性適用於下麵的 input 類型：text、search、url、tel、email 和 password。

　　required 屬性規定必需在提交表單之前填寫輸入欄位。該屬性是一個布爾值，required 屬性適用於下麵的 input 類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

　　下麵是 input 元素的其他輸入類型：

　　(1)、圖像作為按鈕

　　type="image" 用於定義圖像作為提交按鈕，如下：

<input type="image" src="imges/submit.gif" alt="Submit" width="48" height="48">

　　上面代碼中的 3 個屬性都只針對 type="image"，src 屬性規定顯示為提交按鈕的圖像的 URL。alt 屬性定義圖像輸入的替代文本。width 和 height 規定 <input>元素的寬度/高度。

　　(2)、隱藏欄位

　　type="hidden" 用於定義隱藏欄位，隱藏欄位對於用戶是不可見的。隱藏欄位常常存儲預設值，或者由 JavaScript 改變它們的值。

1 <form method="post" action="demo.php">
2     姓名: <input type="text" name="user"><br/>
3     <input type="hidden" name="country" value="China">
4     <input type="submit" value="提交">
5 </form>

　　(3)、選擇文件

　　type="file" 用於定義文件選擇欄位和 "瀏覽..." 按鈕，供文件上傳。

1 <form method="post" action="demo.php">
2     選擇一個文件: <input type="file" name="img" accept="image/*,audio/*,video/*"><br/>
3