HTML表单的使用姿势初体验

HTML表单作用是搜集用户输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。

1.<form>属性

action:表单提交地址
method:提交表单方式，常用get和post两种方式 传送门

<form action="form_action.asp" method="get"></form>````
那么我们来看看表单中比较常见的元素吧!

##2.常用表单元素：
表单标签：<input>、<label>、<textarea>、<select>、<option>
属性类型：
**type:**输入类型(通过type属性的来设置input的类型)
**name:**表单名称
**value:**表单内容
####2.1文本域

<div class="username">
<label for="username">用户名</label>
<input id="username" type="text" name="username" placeholder="请输入用户名">
</div>```

image.png

<label>标签：当选中标签时，焦点自动转到相关联的表单控件上。
placeholder属性作为文本框内提示信息，文本域内输入内容后消失。

2.2密码域

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


![image.png](https://img.haomeiwen.com/i6363227/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复选框

<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="tennis">网球```
![image.png](https://img.haomeiwen.com/i6363227/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](https://img.haomeiwen.com/i6363227/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](https://img.haomeiwen.com/i6363227/1b2e43f983c20536.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
accept属性可以限制上传数据类型

##3.textarea元素

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

image.png

【个人总结，如有错漏，欢迎指出】
：>