HTML 表單用于搜集不同類型的用戶輸入寓调。用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)豆混，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互媚媒。
HTML 表單包含表單元素嗜逻。
表單元素指的是不同類型的 input 元素、復(fù)選框缭召、單選按鈕栈顷、提交按鈕等等。
下面介紹表單常見元素的簡(jiǎn)單用法嵌巷。

1.form元素

HTML 表單用于收集用戶輸入萄凤。
<form> 元素定義 HTML 表單，是表單的外殼

常用屬性：

action:表單提交的地址
method:提交表單的方法搪哪，一般有g(shù)et和post兩種方式靡努，

區(qū)別:

1.表象不同，get把提交的數(shù)據(jù)url可以看到晓折，post看不到
2.原理不同惑朦，get 是拼接 url， post 是放入http 請(qǐng)求體中
3.提交數(shù)據(jù)量不同漓概，get最多提交1k數(shù)據(jù)漾月，瀏覽器的限制。post理論上無限制胃珍，受服務(wù)器限制
4.get提交的數(shù)據(jù)在瀏覽器歷史記錄中梁肿，安全性不好
5.場(chǎng)景不同蜓陌，get 重在 "要", post 重在"給"

target:在何處打開action
enctype:

• application/x-www-form-urlencoded：在發(fā)送前編碼所有字符（默認(rèn)）
• text/plain：空格轉(zhuǎn)換為"+"加號(hào)，但不對(duì)特殊字符編碼
• multipart/form-data：使用包含文件上傳控件的表單時(shí)栈雳，必須使用該值

2.input元素

input 元素通過 type 屬性來設(shè)置不同的input 類型护奈。<input> 元素是最重要的表單元素。

2.1文本輸入

<input type="text"> 定義用于文本輸入的單行輸入字段：

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用戶名">
</div>

效果：

placeholder的參數(shù)可以作為輸入的提示（提示用戶輸入內(nèi)容和格式）哥纫，與value不同霉旗，placeholder并不是input中真的內(nèi)容，在輸入時(shí)placeholder會(huì)消失而不是代替蛀骇。

2.2 密碼域

<div class="password">
    <label for="password">密碼</label>
    <input id="password" type="password" name="password" placeholder="請(qǐng)輸入密碼">
</div>

效果：

密碼域的輸入框會(huì)對(duì)輸入信息做掩碼處理厌秒。

2.3 復(fù)選框

<div class="hobby">
    <label for="hobby">愛好</label>
    <input type="checkbox" name="hobby" value="dota">dota
    <input type="checkbox" name="hobby" value="travel">旅游
    <input type="checkbox" name="hobby" value="pet">寵物
</div>

效果：

name 屬性為相同的復(fù)選框元素會(huì)被分到同一個(gè)分組。復(fù)選框的 value 值是必須有的擅憔，否則后臺(tái)接收到數(shù)據(jù)無法識(shí)別究竟勾選了什么值鸵闪。可以對(duì) input 標(biāo)簽增加 checked 屬性實(shí)現(xiàn)預(yù)選暑诸。

2.4 單選按鈕

<div class="sex">
    <label>性別</label>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
</div>

效果：

單選按鈕和復(fù)選框一樣蚌讼，通過相同的name 屬性值來識(shí)別同一組按鈕，value 屬性是必需的个榕〈凼可以對(duì) input 標(biāo)簽增加 checked 屬性實(shí)現(xiàn)預(yù)選。value 屬性為 input 元素設(shè)定值西采。

對(duì)于不同的輸入類型凰萨，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值
注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。
注釋：value 屬性無法與 <input type="file"> 一同使用械馆。

2.5 下拉列表

<div class="section">
   <lable for="mycar">我的car：</lable>
            <select id="mycar" name="mycar">
                <option value="audi">奧迪</option>
                <option value="benz">奔馳</option>
                <option value="saab" selected>薩博</option>
            </select>
</div>

效果：

option 的 value 屬性是必需的胖眷，可以對(duì) option 設(shè)置 selected 屬性實(shí)現(xiàn)預(yù)選擇。

2.6 提交按鈕

<input type="submit" value="提交">

效果：

2.8 重置按鈕

<input type="reset" />

效果：

重置按鈕會(huì)清空表單中填寫的內(nèi)容

2.9 打開文件

<div class="file">
      <input type="file" name="myfile" accept="image/png">
</div>

效果：

accept="image/png"霹崎，只接受png格式文件珊搀，可設(shè)置選擇的文件格式

3.label 元素

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用戶名">
</div>

label 元素為 input 元素定義標(biāo)注，當(dāng)鼠標(biāo)選擇該標(biāo)簽時(shí)尾菇，關(guān)聯(lián)的元素控件會(huì)獲得焦點(diǎn)境析，for 屬性與關(guān)聯(lián)元素的 id 屬性要相同。

4. textarea 元素

<div class="textarea">
        <textarea name="article">
          ddd
        </textarea>
 </div>

效果：

展示輸入框错沽，可以拉選大小