Web前端开发笔记——第二章 HTML语言 第八节 表单标签
目錄
- 一、表單的定義
- 二、輸入標簽
- （一）文本框和密碼框
- （二）提交按鈕和重置按鈕
- （三）數值選項菜單
- （四）滑動條
- （五）搜索框
- （六）input標簽的其它type屬性
- （七）單選框和復選框
- （八）帶邊框的表單
- 三、下拉菜單
- （一）默認選項的下拉菜單
- （二）自動填充選項的下拉菜單
- 四、文本域
- 結語
一、表單的定義
表單用于收集用戶的輸入信息，它是一個區域，在這個區域里添加表單元素即可收集用戶的信息，表單元素可以是文本、單選框、復選框、按鈕、下拉菜單等等。
比如下面的qq登錄頁面，它就是一個表單：
表單用<form></form>標簽表示，它有個重要的屬性為action屬性，action后跟數據處理網頁的URL，表示收集用戶的數據交由該頁面進行處理，它表示為<form action="">表單元素</form>，其它的屬性這里不做展開。
二、輸入標簽
在form標簽內加上<input>標簽，它用于用戶輸入信息，且input標簽是單獨出現的。
（一）文本框和密碼框
input標簽通過添加type屬性后的取值來表示文本框和密碼框，通過添加id屬性唯一定位到該元素，另外還有name屬性，該屬性規定 input 標簽的名稱，即該表單元素的名稱。
一個文本框或密碼框的默認寬度是20個輸入字符，也可以通過設置size屬性來限制輸入的字符。
文本框表示為：
例如，在HBuilder X中，下列html代碼，該表單由兩個輸入標簽的文本框組成：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><form><h2>登錄頁面</h2><p>賬號：<input type="text" name="User_id" /></p><p>密碼：<input type="text" name="User_password" /></p></form></body> </html>運行結果如下，輸入內容：
密碼框與文本框的區別是當在輸入內容時，其文本內容是由星號或者小圓點替代顯示輸入內容的，密碼框表示為：
例如，在HBuilder X中，下列html代碼，該表單由輸入標簽的一個文本框和一個密碼框組成的：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><form><h2>登錄頁面</h2><p>賬號：<input type="text" name="User_id" /></p><p>密碼：<input type="password" name="User_password" /></p></form></body> </html>運行結果如下，可見我們輸入的密碼是由暗文顯示的：
（二）提交按鈕和重置按鈕
按鈕分為提交按鈕和重置按鈕。input標簽通過添加type屬性、value屬性和name屬性來表示，即type="submit"時表示提交按鈕，而type="reset"時表示重置按鈕，vlaue=""表示按鈕上面的文字，name=""表示該按鈕的名稱。
例如，在HBuilder X中，下列html代碼，該表單由輸入標簽的一個文本框和一個密碼框組成的，輸入后由提交按鈕點擊登錄，或者點擊重置按鈕重新輸入內容：
運行結果如下：
點擊重置后，輸入內容會被全部清除：
（三）數值選項菜單
通過在input標簽中添加type="number"屬性，定義一個數值選項菜單。且通過name=""屬性定義名稱、min=""屬性和max=""屬性限制輸入的最小、最大值，另外還可以通過定義maxlength="“屬性限制輸入的最大字符長度、value=”"屬性表示輸入的默認值。
<input type="number" name="" min="" max="" value="" maxlength="">例如，在HBuilder X中，下列html代碼，選擇出生日期，我們將出生日期年月日默認值為2000/01/01，且設置了輸入年月日的最小最大值：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><form><h3>請輸入你的出生日期：</h3><form><p><input type="number" name="year" min="1900" max="2021" value="2000" />年<input type="number" name="month" min="01" max="12" value="01" />月<input type="number" name="day" min="01" max="31" value="01" />日</p></form></body></html>運行結果如下：
可以通過點擊上下箭頭或者直接輸入來改變日期：
（四）滑動條
通過在input標簽中添加type=range屬性，定義一個滑動條，一般用于模糊選擇，即可以拖到滑動條進行選擇。且通過name=""屬性定義名稱、min=""屬性和max=""屬性限制滑動的最小、最大值，還可以通過step=""屬性設置數字間隔。
例如，在HBuilder X中，下列html代碼中：
運行結果如下，因為設置了step=“1”，即數字間隔為1，每拖動滑塊就增加1：
（五）搜索框
通過在input標簽中添加type="search"屬性，定義一個搜索框。
例如，在HBuilder X中，下列html代碼：
運行結果如下：
（六）input標簽的其它type屬性
另外，還可以通過設置input標簽中的type=“color”、type=“date”、type="email"來選取顏色、選擇日期、輸入email地址。
（七）單選框和復選框
單選框只能選擇一項，而復選框可以選擇多項，例如下圖就是個復選框，不過也進行了限制，只能最多選擇三項：
input標簽通過添加type屬性、vlaue屬性、name屬性以及checked屬性來設置單選框和復選框。type="radio" 表示單選框，而type="checkbox"表示多選框，vlaue=""表示提交給后端的數據，name=""表示單個項的名稱， checked="checked"表示該項被默認選中。
例如，在HBuilder X中，下列html代碼的選課頁面，物理或歷史是必須選擇的，所以它默認選中，另外在剩下四項中選擇兩項：
運行結果如下，我們可以發現我們定義的兩個單選框，其兩個input標簽的name屬性是一樣的，這樣才能保證只能選擇一個選項，且若不做選擇，會默認選擇“物理”科目：
而若想控制復選框中選擇的限制數量，就要用到javascript，這里不做進一步，只是了解。
（八）帶邊框的表單
通過<fieldset></fieldset>標簽，設置一個帶邊框的表單，其中在fieldset標簽內輸入<legend></legend>標簽，可添加該表單的名稱。另外在legend標簽內定義輸入標簽input的屬性。
如下，在HBuilder X中，下列html代碼，創建一個帶邊框的表單，其名稱為信息欄：
運行結果如下：
三、下拉菜單
（一）默認選項的下拉菜單
使用<select></select>選項標簽，通過下拉菜單選擇內容，使用name屬性，select name=""表示定義下拉菜單的名稱。
其中每一項都用<option>選項</option>標簽表示其中的選項，設置value屬性，表示送往目標服務器的值。
當設置option標簽的屬性selected="selected"，即<option selected="selected">選項</option>時表示默認選擇的選項，它會在下拉菜單上的文本框中顯示。
例如，在HBuilder X中，下列html代碼的選課頁面中，設置下拉菜單，選擇物理或者歷史，默認選項為物理：
運行結果如下：
（二）自動填充選項的下拉菜單
通過在表單中輸入標簽內加入<datalist></datalist>標簽，并定義一個下拉菜單，從而實現在輸入選項時，會匹配相應的選項。 在輸入標簽的list屬性引用 datalist標簽的id屬性，并通過<option></option> 標簽在 datalist標簽內配置下拉菜單的選項。
例如，在HBuilder X中，下列html代碼中，當輸入選項中一個字母時，它會自動匹配相應的選項：
運行結果如下：
當輸入Chinese的首字母"C"或者"c"時，它會自動匹配菜單欄中帶有相應匹配的選項，并在下拉菜單欄顯示：
四、文本域
通過<textarea></textarea>文本域標簽，可以定義一大塊的文本區域，它有以下的屬性，rows屬性定義該文本域的行數，cols屬性定義該文本域的列數，name屬性表示該文本域的名稱，id屬性代表定義該文本域的唯一 id 值。
<textarea name="" id="" cols="" rows=""></textarea>例如，在HBuilder X中，下列html代碼中，設置一個行數為30，列數為10的文本域：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title> </head><body><form><h2>反饋</h2><p>在下面輸入您要反饋的內容：</p><textarea name="page" id="page" cols="30" rows="10"></textarea><input type="submit" name="loge_submit" value="提交" /><input type="reset" name="reset_submit" value="清除" /></form> </body></html>運行結果如下：
另外可以通過添加屬性maxlength=""來限制該文本區域允許輸入的最大字符數，還可以通過添加readonly>屬性，在readonly>其后輸入內容，使用戶無法更改已經寫入的文本。
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第二章 HTML语言 第八节 表单标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第二章 HTML语
- 下一篇： Web前端开发笔记——第二章 HTML语