• 和我們平時填寫的紙質表單一樣，HTML 表單用于搜集不同類型的用戶輸入。

• 表單是一個包含表單元素的區域，表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復選框等等）輸入信息的元素。
• 用戶提交表單時向服務器傳輸數據，從而實現用戶與web服務器的交互。

常見用法

1.輸入框

<form action="xxx.php" method="post">
            <h3>輸入框</h3>
            <label for="input_username">用戶名：</label> <input id="input_username" name="username" type="text" placeholder="輸入用戶名" autofocus/>
            <br/>
            <label for="input_pass">密碼：</label> <input id="input_pass" name="password" type="password" placeholder="輸入密碼"/>
            <br/><br/>

2.單選框

 <h3>單選框</h3>
            <label for="ck1">ra1：</label><input type="radio" id="ra1" name="ra" value="1" />
            <br/>
            <label for="ra2">ra2：</label><input type="radio" id="ra2" name="ra" value="2" />
            <br/>
            <label for="ra3">ra3：</label><input type="radio" id="ra3" name="ra" value="3" />
            <br/>
            <label for="ra4">ra4：</label><input type="radio" id="ra4" name="ra" value="4" />
            <br/><br/>
            <label for="ck5">ra5：</label><input type="radio" id="ra5" name="radio" value="1" />
            <br/>
            <label for="ra6">ra6：</label><input type="radio" id="ra6" name="radio" value="2" />
            <br/>
            <label for="ra7">ra7：</label><input type="radio" id="ra7" name="radio" value="3" checked="checked" />
            <br/>
            <label for="ra8">ra8：</label><input type="radio" id="ra8" name="radio" value="4" />
            <br/><br/>

3.復選框

     <h3>復選框</h3>
            <label for="ck1">CK1：</label><input type="checkbox" id="ck1" name="ck" value="1" />
            <br/>
            <label for="ck2">CK2：</label><input type="checkbox" id="ck2" name="ck" value="2" checked />
            <br/>
            <label for="ck3">CK3：</label><input type="checkbox" id="ck3" name="ck" value="3" />
            <br/>
            <label for="ck4">CK4：</label><input type="checkbox" id="ck4" name="ck" value="4" />
            <br/><br/>

4.文件上傳

  <h3>File</h3>
            <input type="file" accept="image/gif, image/jpeg"/>
            <br/><br/>

5.圖片按鈕

    <h3>image 按鈕</h3>
            <input type="image" src="xxx.jpg" alt="Submit Form"/>
            <br/><br/>

6.隱藏域

            <h3>隱藏域</h3>
            <input type="hidden" value="xxx" />
            <br/><br/>

7.下拉菜單

      <h3>下拉菜單</h3>
            <select id="input_select">
                <option value="1">1</option>
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <br/><br/>

8.文本域

 <h3>多行文本</h3>
            <textarea cols="60" rows="5">123</textarea>
            <br/><br/>

9.按鈕

<input type="button" value="Buttom" /> 按鈕
            <input type="submit" value="Submit" />  提交
            <input type="reset" value="Reset" /> 重置

form

form標簽是表單的外殼，主要有四個屬性

1. action： 表單提交的地址
2. method：提交保單的方法
3. target：在何處打開action
4. enctype:
   application/x-www-form-urlencoded：在發送前編碼所有字符（默認）
   text/plain：空格轉換為 "+" 加號，但不對特殊字符編碼
   multipart/form-data：使用包含文件上傳控件的表單時，必須使用該值

password
輸入內容自動變成圓點

checkbox
靠name
屬性分組，提交到后端的時候被選中的value是以,
分割的一個字符串，通過name屬性獲得

file

accept：mime 類型，多個以,
分割
MIME

select
后端以select標簽的name獲取選中的option的value