什么是HTML表单
HTML表单用于收集用户输入，想服务器传输数据，使用<form>元素来定义一个HTML表单。
表单可以包含input label textarea button select等元素。
1. form元素
常用属性：
action:提交表单的地址
method:提交表单的方法，一般有get和post两种
<form action="http://www.domainname.com" method="get">
</form>
2.input元素
input元素通过type属性来设置不同的input类型。
2.1文本域
<div class="account">
<label for="username">账户</label>
<input id="username" type="text" name="username" placeholder="请输入账户名">
</div>
placeholder属性可以描述输入字段的预期值
2.2密码域
<div class="password">
<label for="password">密码</label>
<input id="password" type="passwordt" name="password" placeholder="请输入密码">
</div>
密码与的输入框会对输入信息做掩码处理
2.3单选按钮
<div class="gender">
<label>性别</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</div>
name相同的单选框会被划分为同一组
2.4复选框
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="swimming" checked>游泳
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="coding">写程序
</div>
复选框可选择多个
2.5下拉列表
<div class="age">
<label>年龄标签</label>
<select>
<option value="60s">60后</option>
<option value="70s">70后</option>
<option value="80s" selected>80后</option>
<option value="90s">90后</option>
<option value="00s">00后</option>
</select>
</div>
点击下拉列表进行选择
2.6提交按钮
<div class="submit">
<input type="submit" value="提交">
</div>
点击提交即可传送表单数据，提交的方式和目的地有form标签定义
2.7重置按钮
<div class="reset">
<input type="reset" value="重置">
</div>
点击即可把表单已填写的数据清空
2.8隐藏字段
<div class="hidden">
<input type="hidden" name="nationality" value="Chinese">
</div>
效果：隐藏字段对用户是不可见的
2.9上传文件
<div class="file">
<input type="file" name="pic" accept="image/jpeg">
</div>
点击即可上传文件，accept属性可以设置上传文件的格式
3、label元素
<div class="lab">
<label for="age">年龄</label>
<input type="text" name="age" id="age" >
</div>
label元素为input标签定义标注，当鼠标选择该标签时，关联的元素控件会获得焦点，需要注意的是for属性的值要和关联元素的id值相同。
点击年龄即可让输入框获取焦点
4、textarea元素
<div class="comment">
<label>评价</label>
<textarea cols="40" rows="10" placeholder="type in your comment"></textarea>
</div>
效果
