1 表單是如何工作的？

用戶在網頁上填寫表單并提交所填信息，瀏覽器將用戶提交的數據發送至 Web 服務器， Web 服務器將數據傳給適當的服務器腳本進行處理，處理結果會是一個全新的 HTML 頁面，并經由 Web 服務器發回給瀏覽器，瀏覽器收到頁面后即顯示。

2 form 元素是如何工作的？

2.1 form 元素的屬性

form 元素用于申明表單，定義采集數據的范圍，也就是 <form> 和 </form> 里面包含的數據將被提交到服務器或者電子郵件里。主要有四個屬性：

• action：規定提交表單數據的地址，它包含了 Web 服務器的 URL，腳本所在的文件夾，處理表單數據的腳本文件名。
• method：規定提交表單數據的方法（可能的值：get、post）。
• target：規定在何處打開 action URL（可能的值：_blank、_self、_parent、_top）。
• enctype：規定在發送表單數據之前如何對其進行編碼，可能的值：
  • application/x-www-form-urlencoded：在發送前編碼所有字符（默認）
  • text/plain：空格轉換為 "+" 加號，但不對特殊字符編碼
  • multipart/form-data：使用包含文件上傳控件的表單時，必須使用該值

舉個例子：

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
</form>

2.2 提交表單數據的方法—— get 和 post 的區別

GET 和 POST 是兩種最常用的 HTTP 方法，GET 是向服務器發索取數據的一種請求，一般用于獲取、查詢資源信息而非修改信息，是冪等^[1]的。POST 是向服務器提交數據的一種請求，一般用于更新資源信息。
更多區別請參閱：http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

3 表單里可以有什么？

常見的 input 屬性：

• type 屬性

• name 屬性
  規定 input 元素的名稱，對提交到服務器后的表單數據進行標識。
  只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

• value 屬性
  規定 input 元素的值。對于不同的輸入類型，value 屬性的用法也不同：

  • type="button", "reset", "submit" - 定義按鈕上的顯示的文本
  • type="text", "password", "hidden" - 定義輸入字段的初始值
  • type="checkbox", "radio", "image" - 定義與輸入相關聯的值

<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。
value 屬性無法與 <input type="file"> 一同使用。

• checked 屬性
  規定此 input 元素首次加載時應當被選中，布爾屬性，不需要值。
  與 <input type="checkbox"> 或 <input type="radio"> 配合使用。

• maxlength 屬性
  規定輸入字段的最大長度，以字符個數計。
  與 <input type="text"> 或 <input type="password"> 配合使用。

• placeholder 屬性
  placeholder 屬性的屬性值會顯示在表單控件中，為填寫表單的人提供輸入提示。一旦用戶輸入文本，占位文本即消失。
  如果文本輸入域為空，用戶提交表單時，placeholder 屬性值不會提交至 Web 服務器。
  舉個例子：<input type="text" name="password" placeholder="請輸入密碼">
  

• multiple 屬性
  如果使用該屬性，則允許用戶選擇一個以上的值。

• Required 屬性
  是一個布爾屬性，可用于任何表單控件，它指示一個域是必填的。
  舉個例子：<input type="text" placeholder="Buckaroo Banzai" required>

3.1 文本輸入

type 屬性為 text 的 <input> 元素，瀏覽器將創建一個單行控件。

<input type="text" name="fullname" value="請輸入您的姓名" maxlength="20">

3.2 密碼輸入

type 屬性為 password 的 <input> 元素，輸入的文本會加掩碼。但是表單數據并不會采用一種安全的方式從瀏覽器發送至 Web 服務器（除非你采取了安全措施），要想提高安全性，請聯系你的托管公司。

<input type="password" name="secret">

3.3 提交、點擊按鈕和重置

type 屬性為 submitt 的<input>元素，定義了提交按鈕，用于向服務器發送表單數據。數據會發送到表單的 action 屬性中指定的頁面。

<input type="submit" value="Order Now">

type 屬性為 button 的<input>元素，定義了可點擊的按鈕，但沒有任何行為。button 類型常用于在用戶點擊按鈕時啟動 JavaScript 程序。

<input type="button" value="Click me" onclick="msg()" >

type 屬性為 reset 的<input>元素，定義了重置按鈕，點擊重置按鈕會清除表單中的所有數據。

<input type="reset">

也可以選擇用 <button> 標簽來創建一個按鈕。

<button>submit</button>

3.4 單選鈕輸入

單選鈕只允許從一組選項中選擇其一，每個選項使用一個 type 屬性為 radio 的<input>元素。
單選鈕一般是成組出現的，同組的單選鈕 name 屬性值一致。

<input type="radio" name="fruit" value="apple" id="apple" checked>
<label for="apple">apple</label>
  
<input type="radio" name="fruit" value="peach" id="peach">
<label for="peach">peach</label>
  
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>

3.5 復選框輸入

type 屬性為checkbox的 <input> 元素，瀏覽器將創建一個復選框控件，可以選中，也可以不選中。
復選框一般是成組出現的，同組的復選框 name 屬性值一致。

<input type="checkbox" name="fruit" value="apple" id="apple" checked>
<label for="apple">apple</label>

<input type="checkbox" name="fruit" value="peach" id="peach">
<label for="peach">peach</label>

<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>

3.6 文件輸入

type 屬性為 file 的 <input> 元素會創建一個文件輸入控件，允許你上傳文件至 Web 服務器。使用這個元素的前提是，表單數據的上傳方法必須為POST。
accpet 屬性只能與 <input type="file"> 配合使用。它規定能夠通過文件上傳進行提交的文件類型。

<input type="file" accept="image/gif, image/png" multiple="multiple">

提示：
1. 如果不限制圖像的格式，可以寫為：accept="image/*"。
2. 請避免使用該屬性。應該在服務器端驗證文件上傳。

3.7 創建一個菜單

• <select> 和 <option> 元素結合使用可以創建菜單，option 元素用來表示各個菜單項。
• <option> 元素不需要 name 屬性，因為 <select> 元素已經為整個菜單指定了名字。
• 瀏覽器將用戶填寫的表單信息發送至Web服務器時，會選用 <select> 元素的 name 屬性名和 <option> 元素的 value 屬性名，例如：characters ="Buckaroo"。
• <option> 元素的 selected 屬性規定在頁面加載時預先選定該選項。

<select name="characters">
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny" selected>Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>

如果為 <select> 元素增加布爾屬性 multiple，單選菜單即變成一個多選菜單。選擇菜單項目時同時按下 Ctrl（Windows） 或 Command（Mac） 鍵，可以選擇多個選項。

<select name="characters" multiple="multiple">
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny" selected>Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>

3.8 文本區

<textarea> 元素會創建一個多行的文本區，如輸入的文本在文本框中放不下，右邊還會出現一個滾動條。
<textarea> 元素不是一個 void 元素，開始和結束標記之間的所有文本會成為瀏覽器文本區控件中的初始文本。
<textarea> 元素可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。

<textarea name="comments" rows="8" cols="8" autofocus>請輸入文本</textarea>

3.9 被隱藏的段落

type 屬性為 hidden 的 <input> 元素，定義了隱藏的字段。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改。

<input type="hidden" name="country" value="Norway" >

3.10 插入圖片

type 屬性為 image 的 <input> 元素，定義了圖像形式的提交按鈕。

<input type="image" src="submit.gif" alt="Submit" />

以下為 HTML 5 的元素新屬性

3.11 數字輸入

type 屬性為 number 的 <input> 元素，瀏覽器將會限制只能輸入數字。

<input type="number" min="0" max="10" step="2" value="6">

3.12 范圍輸入

type 屬性為 range 的 <input> 元素類似于 number，只是它會顯示一個滑動條，而不是一個輸入框。

<input type="range" min="0" max="10" step="2">

3.13 顏色輸入

type 屬性為 color 的 <input> 元素用于從拾色器中選取顏色。

<input type="color" name="user_color">

3.14 日期輸入（Date Pickers）

type 屬性為 date 的 <input> 元素可以指定一個日期。

<input type="date" name="user_date">                      選取日、月、年
<input type="month" name="user_month">                    選取月、年
<input type="week" name="user_week">                      選取周、年
<input type="time" name="user_time">                      選取時間（小時和分鐘）
<input type="datetime" name="user_datetime">              選取時間、日、月、年（UTC 時間）
<input type="datetime-local" name="user_datetime-local">  選取時間、日、月、年（本地時間）

3.15 Email 輸入和 URL 輸入

type 屬性為 email 和 url 的 <input> 元素其實就是一個文本輸入元素，只不過在一些瀏覽器上會顯示一個方便輸入 email 或 url 的定制鍵盤。

<input type="email" name="user_email">
<input type="url" name="user_url">

3.16 search 搜索域

type 屬性為 search 的 <input> 元素用于搜索域，比如站點搜索或 Google 搜索。
search 域顯示為常規的文本域，在搜索框中輸入內容時，文本后會自動出現一個小 ×，用于清除輸入的內容。

<input type="search" placeholder="搜索">

3.17 組合表單

<fieldset>
    <legend>Personal Information</legend>
    姓名：<input type="text" name="fullname">
    性別：<input type="radio" name="sex" value="male"> 男
         <input type="radio" name="sex" value="female"> 女
    生日：<input type="date" name="birthday">
    愛好：<textarea></textarea>
</fieldset>

4 表單的元素名（name）如何工作？

每個表單控件都有一個 name 屬性，它相當于表單和處理表單的服務器腳本之間的一個粘合劑。提交表單時，name 屬性值將作為數據的標簽一起被瀏覽器發送至 Web 服務器。只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

5 關于可訪問性——為表單元素添加標簽

可以用 label 元素為表單元素添加標簽。每個表單元素的id屬性值必須是唯一的。
點擊 <label> 標簽內的文本，瀏覽器會自動選中與 <label> 標簽相關的表單控件。
<label> 標簽的 for 屬性應當與相關表單控件的 id 屬性相同。

<input type="radio" name="hotornot" value="hot" id="hot">
<label for="hot">hot</label>

<input type="radio" name="hotornot" value="not" id="not">
<label for="not">not</label>

1. 對同一URL的多個請求應該返回同樣的結果。 ?