本文介紹關于form表單的一些使用方法
網站是如何與用戶進行交互的？使用HTML表單。表單用于搜集不同類型的用戶輸入。
表單元素
<form> 元素定義HTML表單：
<form>
--form elements--
</form>
HTML表單包含表單元素
<form>元素中可以包含：<button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <menus>, <optgroup>, <output>, <progress>, <select>, <textarea>等表單元素。
<input>元素
<input>元素是最重要的表單元素。
<input>元素需要定義type，name，value或者checked，其中，每個輸入字段必須設置一個name屬性，checked屬性用于設置按鈕的預選項。
type屬性：規定input元素的類型，可設置值如下：
輸入類型：text
<input type="text"> 定義用于文本輸入的單行輸入字段。
<form>
姓名：<input type="text" name="name"><br>
班級：<input type="text" name="class">
</form>
注：文本字段的默認寬度是 20 個字符。
輸入類型：password
<input type="password"> 定義密碼字段。
<form>
用戶名：<input type="text" name="username"><br>
密碼：<input type="password" name"pw">
</form>
輸入類型：radio
<input type="radio"> 定義單選按鈕。
單選按鈕允許用戶在有限數量的選項中選擇其中之一：
<form>
<input type="radio" name="sex" value="male" checked>男<br>
<input type="radio" name="sex" value="female">女
</form>
輸入類型：submit
<input type="submit"> 定義用于向表單處理程序（form-handler）提交表單的按鈕。
表單處理程序通常是包含用來處理輸入數據的腳本的服務器頁面。
表單處理程序是在表單的 action 屬性中指定：
<form action=" ">
姓名：<input type="text" name="name"><br>
班級：<input type="text" name="class">
<input type="submit" value="提交">
</form>
輸入類型：checkbox
<input type="checkbox"> 定義復選框。
復選框允許用戶在有限數量的選項中選擇零個或多個選項。
<form>
<p>我喜歡的運動</p>
<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" name="hobby" value="run" checked>跑步 //默認選中
</form>
輸入類型：button
<input type="button"> 定義按鈕。
<input type="button" onclick="alert(' 我是左冬!')" value="我是誰">
輸入類型：number
<input type="number"> 用于應該包含數字值的輸入字段。
<form>
<input type="number" name="quantity" min="1" max="5"> //數量（1 到 5 之間）
<input type="submit" value="提交">
</form>
注釋：IE9 及早期版本不支持 type="number"。
輸入類型：date
<input type="date"> 用于應該包含日期的輸入字段。
根據瀏覽器支持，日期選擇器會出現輸入字段中。
<form>
生日：<input type="date" name="birthday">
<input type="submit" value="提交">
</form>
注釋：IE11及更早期版本不支持 type="date".
添加輸入限制的代碼
<form>
1980-01-01以前
<input type="date" name="bday" max="1979-12-31"><br>
2000-01-01以后
<input type="date" name="bday" min="2000-01-02"><br>
</form>
輸入類型：color
<input type="color"> 用于包含顏色的輸入字段。
根據瀏覽器支持，顏色選擇器會出現輸入字段中。
<form action=" ">
選擇你最喜歡的顏色:
<input type="color" name="favcolor" value="#ff0000">
<input type="提交">
</form>
輸入類型：range
<input type="range"> 用于包含一定范圍內的值的輸入字段。
根據瀏覽器支持，輸入字段能夠顯示為滑塊的控件。
<form action=" " method="get">
音量:
<input type="range" name="spearker" min="0" max="10">
<input type="確定">
</form>
注釋：IE9 及早期版本不支持 type="range"。
輸入類型：email
<input type="email"> 用于應該包含電子郵件地址的輸入字段。
根據瀏覽器支持，能夠在被提交時自動對電子郵件地址進行驗證。
某些只能手機會識別 email 類型，并在鍵盤增加 ".com" 以匹配電子郵件輸入。
<form>
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
注釋：IE9 及早期版本不支持 type="email"。
輸入類型：search
<input type="search"> 用于搜索字段。
<form action=" ">
搜索谷歌：
<input type="search" name="googlesearch">
<input type="submit">
</form>
輸入類型：tel
<input type="tel"> 用于應該包含電話號碼的輸入字段。
目前只有 Safari 8支持 tel 類型。
<form action=" ">
Telephone:
<input type="tel" name="usrtel">
<input type="submit">
</form>
注釋：Safari 8 及更新版本支持 type="tel"
輸入類型：url
<input type="url"> 用于應該包含URL地址的輸入字段。
根據瀏覽器支持，在提交時能夠自動驗證URL字段。
某些智能手機識別URL類型，并向鍵盤添加 ".com" 以匹配URL輸入。
<form action=" ">
請添加您的首頁：
<input type="url" name="homepage">
<input type="submit">
</form>
注釋：IE9 及其更早版本不支持 type="url"。
其他<input>屬性：
name：定義input元素的名稱。
value：規定字段的初始值。
readonly：規定輸入字段只讀。
disabled：規定輸入字段是禁用的，被禁用的元素是不可用不可點擊不可提交。
size：規定輸入字段的尺寸，如果size="5"，那么一行中可輸入無數個字符但一行中只有5個可見字符。
maxlength：規定輸入字段允許的最大長度，如果maxlength="5"，那么一行中最多可輸入5個字符。
placeholder：規定幫助用戶填寫輸入字段的提示（樣本值或有關格式的簡短描述），該提示會在用戶輸入值之前顯示在輸入字段中。
list：引用包含輸入字段的與定義選項的datalist。
src：定義以提交按鈕形式顯示的圖像的URL。
step：規定input元素的合法數字間隔，如果step="3"，則合法數字應該是-3、0、3、6等。只能是3的整倍數?？膳cmax以及min屬性一同使用，來創建合法值的范圍。
<select> 元素（下拉列表）
<select>元素定義下拉列表，<option>元素定義下拉列表的選項，列表通常會把首個選項顯示為被選選項，但可以通過selected定義預定義選項。
<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange" selected>Orange</option> //默認選中
</select>
<option> 元素定義待選擇的選項。
列表通常會把首個選項顯示為被選選項，通過添加 selected 屬性來定義預定義選項。
<textarea> 元素定義多行輸入字段（文本域）
【rows="10" cols="30"】的意思是定義一個30個字符寬，10行高的文本區。
<textarea name="message" rows="10" cols="30">
The car was playing in the garden.
</textarea>
<button> 元素
<button>元素定義可點擊的按鈕，請示中為按鈕規定type屬性。如果在HTML表單中使用button元素，不同的瀏覽器會提交不同的值。IE將提交<button>與<button/>之間的文本，而其他瀏覽器將提交value屬性的內容。應用<input>元素創建按鈕。
<button type="button" onclick="alert("Hello World!")">點我</button>
HTML5 表單元素
HTML5 增加了如下表單元素：
- <datalist>
- <keygen>
- <output>
HTML5 <datalist> 元素
<datalist>元素為<input>元素規定預定義選項列表。
<datalist>為<input>預定義選項列表，起到提示作用。用戶會在他們輸入數據時看到預定義選項的下拉列表。
<input>元素的list屬性必須引用<datalist>元素的id屬性。
<form action=" ">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
常用屬性
-
action屬性制訂了某個服務器腳本來處理被提交的表單，如果省略action屬性，則action會被設置為當前頁面。 -
method屬性規定了提交表單的http方法，默認GET，GET最適合少量數據且不需要保密的提交，使用GET時表單數據在頁面地址欄中是可見的。設置為POST，安全性更加，因為在頁面地址欄中被提交的數據不可見。 -
target屬性值是一個名字或關鍵字，規定在哪里打開新頁面，默認_self，一般設置為_blank。- _self：在當前HTML4或HTML5文檔頁面重新加載返回值（默認值）。注：如果這個文檔在一個frame中，self是在當前frame(document)中重新加載的，而不是整個頁面(window)。
- _blank：以新的HTML4或HTML5文檔窗口加載返回值。
- _parent：在父級的frame中以HTML4或HTML5文檔形式加載返回值，如果沒有父級的frame，行為和_self一致。
- _top：如果是HTML4文檔，清空當前文檔，加載返回內容；如果是HTML5文檔，在當前文檔的最高級內加載返回值，如果沒有父級，和_self行為一致。
- iframename：返回值在指定frame中加載。
表單的作用
HTML<form>元素表示了文檔中的一個區域，這個區域包含有交互控制元件，用來像web服務器提交信息。
輸入限制
| 屬性 | 描述 |
|---|---|
| disabled | 規定輸入字段應該被禁用 |
| max | 規定輸入字段的最大值 |
| maxlength | 規定輸入字段的最大字符 |
| min | 規定輸入字段的最小值 |
| pattern | 規定通過其檢查輸入值的正則表達式 |
| readonly | 規定輸入字段為只讀（無法修改） |
| required | 規定輸入字段是必須的（必須填寫） |
| size | 規定輸入字段的寬度（以字符計） |
| step | 規定輸入字段的合法數字間隔 |
| value | 規定輸入字段的默認值 |
注：屬性制訂了某個服務器腳本來處理被提交的表單，如果省略action屬性，則action會被設置為當前頁面。
