1、表單的構成
一個完整的表單由表單控件(表單元素)、提示信息和表單域3個部分構成。
- 表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、搜索框等。
- 提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
- 表單域：相當於一個容器，用來容納所有的表單控件和提示信息，可以通過它定義、處理表單數據所用程序的url地址及數據提交到服務器的方法。
注：如果不定義表單域，表單中的數據就無法傳送到后台服務器。
2、創建表單
<form></form>標記被用於定義表單域，即創建一個表單。
基本格式：
<html> <head> <title>創建表單</title> <meta charset="utf-8"/> </head> <body> <form action="http://www.mysite.cn/index.asp" method="post"> <!--表單域--> 賬號: <!--提示信息--> <input type="text" name="zhanghao" /> <!--表單控件--> 密碼: <!--提示信息--> <input type="password" name="mima" /> <!--表單控件--> <input type="submit" value="提交" /> <!--表單控件--> </form> </body> </html>
注：<form></form>中的所有內容都會被提交給服務器。
3、表單屬性
①.action屬性：用於指定接收並處理表單數據的服務器程序的url地址。
例如：
<form action="form_action.asp"> <!--提交訂單時，表單數據會傳送到名為"form_action.asp"的頁面去處理-->
注：action的屬性值可以是相對路徑和絕對路徑，還可以為接收數據的E-mail郵箱地址。
<form action=mailto:thmlcss@163.com> <!--提交表單時，表單數據會以電子郵件的形式傳遞出去-->
②.method屬性：用於設置表單數據的提交方式。(取值為get或post)
例如:
<form action="form_action.asp" method="get">
- get方法：瀏覽器將會按照下面兩步來發送數據。首先：瀏覽器與action屬性中指定的表單處理服務器建立聯系，然后直接在一個傳輸步驟中發送所有的表單數據。
- post方法：分兩步來發送數據。首先：瀏覽器將於action屬性中指定的表單處理服務器建立聯系，然后，瀏覽器按分段傳輸的方法將數據發送給服務器。
注：get方法保密性差，不能大量傳輸數據。post方法保密性強，能大量傳輸數據。一般使用post方法。
③.name屬性：name屬性用於指定表單的名稱。
用於指定表單的名稱。
④.autocomplete屬性
用於指定表單是否有自動完成功能。autocomplete屬性有2個值，對他們的解釋如下。
- on：表單有自動完成功能。
- off：表單無自動完成功能。
例如:
<html> <head> <title>autocomplete屬性的使用</title> <meta charset="utf-8"/> </head> <body> <form id="formBox" autocomplete="on"> 用戶名: <input type="text" id="autofirst" name="autofirst" /><br/><br/> 昵 稱: <input type="text" id="autosecond" name="autosecond"/><br/><br/> <input type="submit" value="提交"/> </form> </body> </html>
⑤.novalidate屬性：指定在提交表單時取消對表單進行有效的檢查。
例如：
<html> <head> <title>novalidate屬性取消表單驗證</title> <meta charset="utf-8"/> </head> <body> <form action="form_action.asp" method="get" novalidate="true"> 請輸入電子郵件地址:<input type="email" name="user_email"/> <input type="submit" value="提交"/> </form> </body> </html>
4、input元素及屬性
用途：<input />元素是表單中最常見的元素，網頁中常見的有單行文本框、單選按鈕、復選框等都是通過它定義的。
input元素的相關屬性：
（1）、input元素的type屬性：用於定義不同的控件類型。
①.單行文本輸入框<input type="text" />
單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有name、value、maxlength。
②.密碼輸入框<input type="password" /> 密碼輸入框用來輸入密碼，其內容將以圓點的形式顯示。
③.單選按鈕<input type="radio" /> 注： 定義單選按鈕時，必須為同一組中的選項指定相同的name值，這樣"單選"才會生效。 可以對單選按鈕應用checked屬性，指定默認選中項。
④.復選框<input type="checkbox" /> 可對其應用checked屬性，指定默認選中項。
⑤.普通按鈕<input type="button" /> 通常配合javascript腳本語言使用。
⑥.提交按鈕<input type="submit" /> 是表單的核心控件，用來在頁面中使用戶單擊提交表單數據。 可以對其應用value屬性，改變提交按鈕上的默認文本。
⑦.重置按鈕<input type="reset" /> 當用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息。 可以對其應用vale屬性，改變重置按鈕上的默認文本。
⑧.圖像形式的提交按鈕<input type="image"> 定義圖像形式的提交按鈕，必須為其定義src屬性指定圖像的url地址。
⑨.隱藏域<input type="hidden" /> 隱藏域對於用戶是不可見的，通常用於后台的程序。
⑩.文件域<input type="file" /> 當定義文件域時，頁面中將出現一個文本框和一個“瀏覽...”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后台服務器。
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>input控件</title> </head> <body> <form action="#" method="post"> 用戶名： <!--text單行文本輸入框--> <input type="text" value="張三" maxlength="6" /><br/><br/> 密碼： <!--passord密碼輸入框--> <input type="password" size="40" /><br/><br/> 性別： <!--radio單選按鈕--> <input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女<br/><br/> 興趣： <!--checkbox復選框--> <input type="checkbox" />唱歌 <input type="checkbox" />跳舞 <input type="checkbox" />游泳<br/><br/> 上傳頭像： <input type="file" /><br/><br/> <!--file文件域--> <input type="submit" /> <!--submit提交按鈕--> <input type="reset" /> <!--reset按鈕重置--> <input type="button" value="普通按鈕" /> <!--button提交按鈕--> <input type="image" src="images/login.gif" /> <!--image圖像域--> <input type="hidden" /> <!--hidden隱藏域--> </form> </body> </html>
⑪email類型<input type="email" /> 專門用來輸入E-mail地址的文本輸入框。會自動驗證輸入內容是否符合E-mail郵件地址格式。
⑫url類型<input type="url" /> 專門用來輸入URL地址的輸入框。有自動檢查功能。
⑬tel類型<input type="tel" /> 用於提供輸入電話號碼的輸入框。通常會和pattern屬性配合使用。
⑭search類型<input type="search" /> 專門用於輸入搜索關鍵字的文本框。
⑮color類型<input type="color" /> 專門用於提供設置顏色的文本框，用於實現一個RGB顏色輸入。
代碼示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>input類型</title> </head> <body> <form action="#" method="get"> 請輸入您的郵箱: <input type="email" name="formmail" /><br/> 請輸入個人網址: <input type="url" name="user_url" /><br/> 請輸入電話號碼: <input type="tel" name="telphone" pattern="^\d{11}$" /><br/> 輸入搜索關鍵詞: <input type="search" name="searchinfo" /><br/> 請選取一種顏色: <input type="color" name="color1" /> <input type="color" name="color2" value="#FF3E96" /> <input type="submit" value="提交" /> </form> </body> </html>
⑯number類型<input type="number" /> 用於提供輸入數值的文本框。有自動檢查功能。 可以對輸入的數字進行限制，規定允許最大值和最小值，合法的數字間隔或默認值等。 ◆value：指定輸入框的默認值 ◆max：指定輸入框可以接受的最大的輸入值 ◆min：指定輸入框可以接受的最小的輸入值 ◆step：輸入與合法的間隔，如果不設置，默認值為1
代碼示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>number類型的使用</title> </head> <body> <form action="#" method="get"> 請輸入數值: <input type="number" name="number1" value="1" min="1" max="20" step="4"/><br/> <input type="submit" value="提交"/> </form> </body> </html>
⑰range類型<input type="range" /> 用於提供一定范圍內數值的輸入范圍，在頁面中顯示為滑動條。常用屬性與number相同。通過step屬性指定每次滑動的步幅。
⑱Date pickers類型<input type="data,nonth,week..." /> 時間日期類型：用於驗證輸入的日期； date 選取日、月、年 month 選取月、日 week 選取周和年 time 選取時間(小時和分鍾) datetime 選取時間、日、月、年(UTC時間) detetime-local 選取時間、日、月、年(本地時間)
代碼示例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>時間日期類型的使用</title> </head> <body> <form action="#" method="get"> <input type="date" /> <input type="month" /> <input type="week" /> <input type="time" /> <input type="datetime" /> <input type="datetime-local" /> <input type="submit" value="提交" /> </form> </body> </html>
（2）、input元素的其他屬性
①autofocus屬性：
用於指定頁面加載后是否自動獲取鼠標焦點。
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>autofocus屬性的使用</title> </head> <body> <form action="#" method="get"> 請輸入搜索關鍵詞: <input type="text" name="user_name" autocomplete="off" autofocus="autofocus" /><br/> <input type="submit" value="提交" /> </form> </body> </html>
②form屬性：
可以把表單內的子元素寫在頁面中的任意位置，只需為這個元素指定form屬性並設值屬性值為該表單的id即可。
此外，form屬性還允許規定一個表單控件從屬於多個表單。
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>autocomplete屬性的使用</title> </head> <body> <form id="formBox" autocomplete="on"> 用戶名： <input type="text" id="autofirst" name="autofirst"/><br/><br/> 昵 稱: <input type="text" id="autosecond" name="autosecond"/><br/><br/> <input type="submit" value="提交"/> </form> </body> </html>
③list屬性：
用於指定輸入框所綁定的datalist元素，其值是個datalist元素的id。
datalist元素用於試下年數據列表的下拉效果。
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>list屬性的使用</title> </head> <body> <form action="#" method="get"> 請輸入網址: <input type="url" list="url_list" name="weburl"/> <datalist id="url_list"> <option label="新浪" value="http://www.sina.com.cn"></option> <option label="搜狐" value="http://www.sohu.com"></option> <option label="傳智" value="http://www.itcast.cn"></option> </datalist> <input type="submit" value="提交" /> </form> </body> </html>
④multiple屬性： 用於指定輸入框可以選擇多個值，該屬性適用於email和file類型的input元素。 注： multiple屬性用於email類型的input元素時，表示可以向文本框中輸入多個E-mail地址，用逗號隔開。 multiple屬性用於file類型的input元素時，表示可以選擇多個文件。
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>multiple屬性的使用</title> </head> <body> <form action="#" method="get"> 電子郵箱: <input type="email" name="myemail" multiple="multiple"/> (如果電子郵箱有多個,請使用逗號分隔)<br/><br/> 上傳照片: <input type="file" name="selfile" multiple="multiple" /><br/><br/> <input type="submit" value="提交"/> </form> </body> </html>
⑤min、max、step屬性： 用於為包含數字或日期的input輸入類型規定限制。適用於date、pickers、number和range標簽。 ●max：規定輸入框所允許的最大輸入值。 ●min：規定輸入框所允許的最小輸入值。 ●step：為輸入框規定合法的數字間隔，如果不設置，默認值是1。 ⑥pattern屬性： 用於驗證input類型輸入框中，用戶輸入的內容是否與所定義的正則表達式相匹配。 pattern屬性適用於的類型是：text、search、url、tel、email和password的<input/>標記。
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>pattern屬性</title> </head> <body> <form action="#" method="get"> 賬 號：<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />(以字母開頭,允許5~16字節,允許字母數學下划線)<br/> 密 碼：<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />(以字母開頭，長度在6~18，只能包括字母、數字和下划線)<br/> 身 份 證：<input type="text" name="mycard" pattern="^\d{15}|\d{15}|\d{18}$" />(15位、18位數字)<br/> E-mail地址:<input type="email" name="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\ w+)*\.\w+([-.]\w+)*$" /> <input type="submit" value="提交" /> </form> </body> </html>
⑦placeholder屬性
用於為input類型的輸入框提供相關提示信息，以描述輸入框期待用戶輸入何種內容。
在輸入框為空時顯式出現，而當輸入框獲得焦點時則會消失。
注：該屬性適用於type屬性值為text、search、url、tel、email及password的<input/>標記
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>placeholder屬性</title> </head> <body> <form action="#" method="get"> 請輸入郵政編碼:<input type="text" name="code" pattern="[0-9]{6}" placeholder="請輸入6位數的郵政編碼" /> <input type="submit" value="提交" /> </form> </body> </html>
⑧required屬性
用於規定輸入框填寫的內容不能為空，否則不允許用戶提交表單。
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>required屬性</title> </head> <body> <form action="#" method="get"> 請輸入姓名：<input type="text" name="user_name" required="required"/> <input type="submit" value="提交"/> </form> </body> </html>
（3）、其他表單元素
①、textarea元素
通過textarea控件可以輕松的創建多行文本輸入框。 格式：
<textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea>
cols和rows為<textarea>標記的必須屬性。 其中cols用來定義多行文本輸入框每行中的字符數，rows用來定義多行文本輸入框顯示的行數。 他們的取值均為正整數。 textarea的可選屬性 name 由用戶自定義 控件的名稱 readonly readonly 該空間內容為只讀(不能編譯修改) disabled disabled 第一次加載頁面時禁用該標簽(顯示為灰色)
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>textarea控件</title> </head> <body> <form action="#" method="post"> 評論:<br/> <textarea cols="60" rows="8"> 評論的時候，請遵紀守法並注意語言文明，多給文檔分享人一些支持。 </textarea> <input type="submit" value="提交"/> </form> </body> </html>
②、select元素
用來定義頁面的下拉菜單。 基本格式： <select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>
注： <option></option>標記嵌套在<select></select>標記中，用於定義下拉菜單中的具體選項。 每對<select></select>中至少應包含一對<option></option>。
| 標記名 | 常用屬性 | 描述 |
| <select> | size | 指定下拉菜單的可見選項數(取值為正整數) |
| multiple | 定義multiple="multiple"時，下拉菜單將具有多項選擇的功能，方法為按住Ctril鍵的同時選擇多項 | |
| <option> | selected | 定義selecet="selecet"時,當前項即為默認選中項 |
代碼示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>select控件</title> </head> <body> <form action="#" method="post"> 所在校區：<br /> <select> <option>-請選擇-</option> <option>北京</option> <option>上海</option> <option>廣州</option> <option>武漢</option> <option>成都</option> </select><br /><br /> 特長:(單選):<br /> <select> <option>唱歌</option> <option selected="selected">畫畫</option> <!--設置默認選中項--> <option>跳舞</option> </select><br /><br /> 愛好(多選):<br /> <select multiple="multiple" size="4"> <!--設置多選和可見選項數--> <option>讀書</option> <option selected="selected">寫代碼</option> <!--設置默認選中項--> <option>旅行</option> <option selected="selected">聽音樂</option> <!--設置默認選中項--> <option>踢球</option> </select><br /><br /> <input type="submit" value="提交"/> </form> </body> </html>