HTML表單作用是搜集用戶輸入，用戶提交表單時向服務(wù)器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與web服務(wù)器的交互。

1.<form>屬性

action:表單提交地址
method:提交表單方式，常用get和post兩種方式 傳送門

<form action="form_action.asp" method="get"></form>````
那么我們來看看表單中比較常見的元素吧!

##2.常用表單元素：
表單標簽：<input>、<label>、<textarea>、<select>、<option>
屬性類型：
**type:**輸入類型(通過type屬性的來設(shè)置input的類型)
**name:**表單名稱
**value:**表單內(nèi)容
####2.1文本域

<div class="username">
<label for="username">用戶名</label>
<input id="username" type="text" name="username" placeholder="請輸入用戶名">
</div>```

image.png

<label>標簽：當選中標簽時，焦點自動轉(zhuǎn)到相關(guān)聯(lián)的表單控件上。
placeholder屬性作為文本框內(nèi)提示信息，文本域內(nèi)輸入內(nèi)容后消失。

2.2密碼域

<form action="/abc" method="get">
     <label for="password">密碼</label>
     <input id="password" type="password" name="password" placeholder="輸入密碼">
</form>```


![image.png](http://upload-images.jianshu.io/upload_images/6363227-84603ac4cfde2d89.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####2.3單選框

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女```

image.png

name屬性相同的為一組

2.4復(fù)選框

<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="tennis">網(wǎng)球```
![image.png](http://upload-images.jianshu.io/upload_images/6363227-00acfb4fb9df631b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####2.5提交按鈕

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

image.png

2.6下拉列表

<label for="city">城市</label>
        <select id="city">
            <option value="beijing">北京</option>
            <option value="chengdu" selected>成都</option>
            <option value="shanghai">上海</option>
        </select>```
![image.png](http://upload-images.jianshu.io/upload_images/6363227-6846515c3f6f4f64.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


####2.7重置按鈕

<input type="reset" name="reset" value="清除">```

image.png

2.8上傳文件

<input type="file" name="photo" accept="image/png">```
![image.png](http://upload-images.jianshu.io/upload_images/6363227-1b2e43f983c20536.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
accept屬性可以限制上傳數(shù)據(jù)類型

##3.textarea元素

<textarea name="article">
ddd
</textarea>```

image.png

【個人總結(jié)，如有錯漏，歡迎指出】
：>