一.什么是< form>表單
- 格式：
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
-
作用：
form表單一般用來收集用戶的信息，并把信息傳送到后臺。 -
注意點：
1.在瀏覽器中所有表單標簽都有特殊的外觀和默認功能格式。
2.表單能夠包含input標簽,比如文本字段、復選框、單選框、提交按鈕等等。表單還可以包含非input標簽menustextareafieldsetlegendlabel等。
二.< form>標簽
- 格式：
<form name="myForm" action="form_action.asp" method="get"></form>
-
作用：
<form>標簽用于為用戶輸入創建 HTML 表單。 -
常用屬性：
name: 表單提交時的名稱
action: 提交到的地址
method: 規定用于發送 form-data 的 HTTP 方法，提交方式：get和post
enctype:規定在發送表單數據之前如何對其進行編碼 - application/x-www-form-urlencoded：在發送前編碼所有字符（默認）
- text/plain：空格轉換為 "+" 加號，但不對特殊字符編碼
- multipart/form-data：使用包含文件上傳控件的表單時，必須使用該值
三.表單提交方式method取值post 和 get 的區別
1.get提交可以在url中看到提交信息，post則是提交到后臺。
2.get通常用于提交少量數據得到大量數據，一般用于獲取查詢信息，比如搜索。post則相反，一般用于更新資源信息，上傳數據然后得到回饋信息，如提交博客。
3.get提交的數據一般受瀏覽器的限制，大小在1kb字節以內。post理論上大小無限制，只受服務器的性能限制。
4.get請求的數據會保留在瀏覽器歷史記錄中，安全性不好，所以信息提交一般使用post。
四.表單中的< input>標簽
- 格式：
<input name="username" type="text" placeholder="用戶名" maxlength=10 value=123/>
-
作用：
<input>標簽用于搜集用戶信息。根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。 - < input>常用屬性:
| 屬性 | 取值 | 作用 |
|---|---|---|
| name | --- | 定義 input 元素的名稱 |
| type | button/checkbox/file hidden/image/password radio/reset/submit/text |
規定 input 元素的類型 |
| checked | checked | 加checked屬性會默認選上 |
| placeholder | --- | 用于在輸入框中顯示提示信息。輸入文字時消失，不會被提交 |
| maxlength | number | 規定輸入字段中的字符的最大長度 |
| value | --- | 規定 input 元素的值 |
| disabled | disabled | 當 input 元素加載時禁用此元素,就是禁止輸入 |
| autofocus | autofocus | 規定輸入字段在頁面加載時是否獲得焦點。（不適用于 type="hidden"） |
-
注意點：
1.<input>都要有name屬性,用于向提交到后臺的信息進行命名，若無name則后臺會自動忽略該條信息。
2.action提交地址若不填寫則會直接提交到當前頁面。
3.所有的<input>可以添加屬性 disabled來禁用輸入。
4.<input>中除了提交按鈕和重置按鈕所有標簽都可以添加value屬性。用來指定將來提交到服務器的值。
更多屬性請查閱w3c
五.< input>常用type類型：
- 給
< input>標簽添加不同的type屬性取值可以讓< input>有多種類型，結合起來可以組成一個<form>表單。
-
type="text"：文本輸入框，用于文本輸入。
格式：
<input name="username" type="text" placeholder="用戶名" maxlength=10 />
注意點：
標簽中添加value屬性可以用來給輸入框設置默認文本。
-
type="password"：密碼輸入框，輸入時顯示星號。
格式：
<input name="password" type="password" placeholder="密碼" />
注意點：
標簽中添加value屬性可以用來給輸入框設置默認密碼。
-
type="radio" : 單選圓圈按鈕，name要相同才能實現單選，value要有值
格式：
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
注意點：
若想默認單選其中一個，可以在標簽中添加checked屬性。
-
type="checkbox" ：多選框，加checked屬性會默認選上。提交時，如果選中（如bike），則bike=on
格式：
<input type="checkbox" name="bike" checked/>自行車
<input type="checkbox" name="car" />汽車
注意點：
多選框中一般必須填寫每一個選項的name可以把name設置為同一個名字，然后分別設置不同的value值時
-
type="submit"： 提交按鈕 用于提交填好的信息
格式：
<input type="submit" value="提交" />
注意點：
form表單有另一種設置提交按鈕的方式，即在form中使用button標簽，這個按鈕放在 form 中也會點擊自動提交，提交的內容不光可以有文字，還可以有圖片等多媒體內容，缺點是不同的瀏覽器得到的value值不一樣，可能還會有其他的兼容問題。
格式：
<button type="submit">提交</button>
-
type="reset"： 重置按鈕 用于清空表單中的數據。
格式：
<input type="reset" value="重置" />
注意點：
重置按鈕上的文字默認為"重置" ，若想改變文字可以通過value修改。
-
type="button"：按鈕
格式：
<input type="button" value="按鈕上的文字" />
注意點：
可以通過value給按鈕制定標題，通常配合JS使用。
- type="hidden"： 隱藏域 用戶看不到，用于暫存數據?；蛘甙踩孕ｒ?br> 格式：
<input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="a23dafd23444" />
六.type="hidden"：隱藏域的作用
- 1.隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器。
- 2.有些時候我們要給用戶一信息，讓他在提交表單時提交上來以確定用戶身份，．而且不會有瀏覽器不支持，用戶禁用cookie的煩惱。
- 3.有些時候一個form里有多個提交按鈕，如需使程序能夠分清楚到底用戶是按那一個按鈕提交上來的，我們就可以寫一個隱藏域，然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數據后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
- 4.有時候一個網頁中有多個form，但多個form是不能同時提交的，但有時這些form確實相互作用，我們就可以在form中添加隱藏域來使它們聯系起來。
- 5.javascript不支持全局變量，但有時我們必須用全局變量，我們就可以把值先存在隱藏域里，它的值就不會丟失了。
-
例子:
比如按一個按鈕彈出四個小窗口，當點擊其中的一個小窗口時其他三個自動關閉．可是IE不支持小窗口相互調用，所以只有在父窗口寫個隱藏域，當小窗口看到那個隱藏域的值是close時就自己關掉。
七.表單中的其它標簽
-
< textarea>標簽 文本域
格式：
<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>
作用：
文本域 用于輸入多行文本。
注意點：
1.默認情況下輸入框可以無限換行，輸入框有自己的寬度和高度。
2.默認情況下輸入框可以手動拉伸。
3.可以給< textarea>標簽添加cols和rows屬性來定義寬度和高度。
例< textarea cols="2" rows="3">
-
< select>標簽 下拉列表
格式：
<select name="mycar">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi" selected>Audi</option>
</select>
作用：
用于定義下拉列表。
注意點：
1.下拉列表不能輸入，但是可以選擇，也可以設置默認選項。
2.可以使用< optgroup>標簽把下拉列表進行分組，類似建立一個列表。格式如下：
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
-
<lable>標簽 聚焦
格式：
<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>
<form>
<label for="acc123">賬號:</label>
<input type="text" name="account" id="acc123" />
</form>
作用：
<label> 標簽為input 元素定義標注（標記）。在 label元素內點擊文本，就會觸發此控件。就是說，當用戶選擇label 元素內包裹的文本，瀏覽器就會自動將焦點轉到和該文本相關的表單控件（輸入框等）上。
注意點：
1.使用步驟：將文本用<label> 標簽包裹起來，給文本相關的表單控件綁定的（輸入框等）設置一個id名。最后在<label> 標簽中設置for屬性的值為id。
2.另一種聚焦格式，不過此種格式只能設置文本與表單控件單獨在一行的時候，有很大的局限性。格式如下：
<label>
賬號:<input type="text" name="account" id="acc123" />
</label>
-
<datalist>標簽 待選項
格式：
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
作用：
<datalist> 標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。就是說給輸入框綁定待選項。
注意點：
一般直接在<input>標簽中用list屬性綁定。
- type中的一些參數設定可檢驗輸入框中輸入的內容是否符合格式，不過部分瀏覽器不支持，特別是ie全部不支持。例如：
郵箱 <input type="email">
域名 <input type="url">
電話 <input type="number">
日歷 <input type="date pickers">
搜索 <input type="search">
范圍 <input type="range">
顏色 <input type="color">
