表单（四类）
一、input 框
1、文本框
<form>
<!--文本框 -->
<input type="text">
</form>
2、密码框
<form>
<!--密码框 -->
<input type="password">
</form>
3、复选框
<form>
<!--复选框 -->
<input type="checkbox">
<input type="checkbox">
</form>
4、单选框
<form>
<!--单选框-->
<input type="radio">
</form>
5、H5新增的一个关于颜色的
<form>
<input type="color">
<form>
二、 textarea 文本域：可以写很多内容
<form>
<textarea name="" id="" cols="20" rows="3">how are you</textarea>
</form>
三、select 下拉框：option里面的value=""写什么，地址栏就会显示出来value的值
<form>
<select name="" id="">
<option value="">11</option>
<option value="">10</option>
<option value="">9</option>
</select>
</form>
四、按钮
1、普通按钮（2种写法，无差别）：
注意：action=" "里写提交地址，意思是要提交到哪里去
注意：添加action=""地址，点刷新会有效果
<form action="http://www.baidu.com">
<input type="button" value="按钮上的字">
</form>
<form action="http://www.baidu.com">
<button>按钮上的字</button>
</form>
2、提交按钮（2种）：
<form action="http://www.baidu.com">
<input type="submit" value="提交啦">
</form>
<form action="http://www.baidu.com">
<button type="submit">提交啦</button>
</form>
3、重置按钮（2种）：
<form action="http://www.baidu.com">
<input type="reset" value="我是重置按钮">
</form>
<form action="http://www.baidu.com">
<button type="reset">我也是重置按钮</button>
</form>
表单的提交方式（2种）：
方式1： method=“get” （默认是get，但此方式，会将数据暴露在地址栏!!!且数据长度受到地址栏的长度的限制，传输速度比较低，所以，我们如果为了保护自己的数据隐私，我们可以自己在代码里面去设置成post）
方式2：method=“post”
<form action="http://www.baidu.com" method="get">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="点此提交">
</form>
效果图：
<form action="http://www.baidu.com" method="post">
<input type="text" name="username">
<input type="text" name="password">
<input type="submit" value="点此提交">
</form>
效果图：
表单中的一些属性及含义
name：元素的名称，是开发人员自己定义的，可以重复
id：id也是由开发人员定义的 ，但是id不可以重复
required：表示必填，不能为空
placeholder：写提示内容
title:相当于一个标题框框
value:框框里的值
maxlength:输入字符的最大长度
minlength:输入字符的最小长度
例1：
<input type="text" name="username" required placeholder="这里是提示内容哦" title="我是框框" maxlength="3" minlength="2">
<input type="submit" value="提交">
效果图：
2、在单选框中，当name的值相同，表示是一组的，每次选中，只能选中其中一个
注意：这里注意，必须写上value值，这样服务器才稍微能辨别处两个都区别，不然是一组的没有区别
<form action=""
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</form>
3、如果我们想要“男”这个默认被选中，我们就在后面“男”这个代码里面加个checked
想要谁默认被选中，就在谁后面加个checked，单选框，复选框都可以用checked，表示默认
<form action=""
<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女
</form>
4、下拉框里，默认选择，用selected,
单选框和复选框，默认选择，用checked
<form>
<select name="" id="">
<option value="">11</option>
<option value="" selected>10</option>
<option value="">9</option>
</select>
</form>
5、<fieldset></fieldset> 将表单划分为不同区域的功能
<legend> </legend>里的内容，相当于表单的大名称一样
<form action="">
<fieldset>
<legend>注册</legend>
<!-- 文本框 -->
<input type="text" placeholder="用户名">
<!-- 日期框 这个用的最多-->
<input type="date">
<!-- 月份框 -->
<input type="month">
<!-- 周框 -->
<input type="week">
<!-- 时间框 -->
<input type="time">
</fieldset>
<fieldset>
<legend>数字</legend>
<!-- 数字框，可规定数字最小值下限和最大值上限 -->
<input type="number" min="3" max="50">
<!-- 进度范围框 -->
<input type="range" max="40" min="1">
</fieldset>
<fieldset>
<legend>html4里面的</legend>
<!-- multiple:可以上传多个文件 -->
<input type="file" multiple name="fileName">
<!--hiden ：隐藏域 -->
<label for="">这是一隐藏域，里面写上你不需要显示出来的东西，</label>
<input type="hidden" value="2">
<a href="">下页</a> <a href="">上页</a>
</fieldset>
<fieldset>
<legend>html5里面新增的</legend>
<!-- 会自动校验 -->
<input type="tel">
<input type="url">
<input type="email">
<input type="search">
<input type="image">
<button>提交</button>
<!-- 这里的提交按钮我们只写的是个普通的，我们没有写好 -->
</fieldset>
<fieldset>
<legend>下拉框</legend>
<!-- 当点击输入框时，需要展示的数据列表的id号 -->
<!-- 通过这个id关联起来 -->
<input type="text" list="mydata">
<!-- 数据列表 -->
<datalist id="mydata">
<option value="126.com"></option>
<option value="163.com"></option>
<option value="178.com"></option>
</fieldset>
</form>
效果图：
