表单
HTML 表单用于搜集不同类型的用户输入。html5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证。
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
1.Input 类型- email
email 类型用于应该包含e-mail 地址的输入域。在提交表单时，会自动验证email 域的值。
2.Input 类型- url
url 类型用于应该包含URL 地址的输入域。在提交表单时，会自动验证url 域的值。
3.Input 类型- number
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
4.Input 类型- range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定：
5.Input 类型- Date Pickers（数据检出器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
6.Input 类型- search
search 类型用于搜索域，比如站点搜索或Google 搜索。
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域
当用户要在表单中键入字母、数字等内容时，就会用到文本域(text fields)。
|
1
2
3
4
|
<form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form> |
浏览器显示如下：
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。[1]
单选按钮
当用户从若干给定的的选择中选取其一时，就会用到单选框(radio buttons)。
|
1
2
3
4
|
<form><input type="radio" name="sex" value="male"> Male<input type="radio" name="sex" value="female"> Female</form> |
浏览器显示如下：
|
1
2
|
MaleFemale |
如图：
复选框
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框（checkboxes)。
|
1
2
3
4
5
|
<form><input type="checkbox" name="bike" />I have a bike<br /><input type="checkbox" name="car" />I have a car</form> |
浏览器显示如下：
|
1
2
|
I have a bikeI have a car |
密码字段
|
1
2
3
|
<form>Password: <input type="password" name="pwd"></form> |
注意：密码字段字符不会明文显示，而是以星号或圆点替代。
OCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form> <input><!-- 单行文本框 --> <br> <input type="text"><!-- <-input默认值就是text --> <br> <input type="text" value="靠谱学院"><!-- 占位符 --> <br> <input type="text" placeholder="靠谱学院"><!-- 不占文本框内的 --> <br> <input type="text" maxlength="20"><!-- 最大能输入的字符 --> <br> <input type="text" maxlength="20" size="50"> <br> <input type="text" placeholder="靠谱学院" readonly><!-- readonly只能读不能进行操作 --> <br> <input type="password" placeholder="密码"> <br> <textarea rows="20"> aaaaaaaaaaaaaaaaa </textarea><!-- 多行文本框 rows 是行宽--> </form> </body> </html>
元素的使用
1、按钮属性
type=“button”
<button></button>
2、range型和input型
3、checkbox型和input元素
4、用input生成一组固定选项
5、生成选项列表（select）和数据列表（datalist）
区别：button>input button>input submin
分析：
1、原理上来讲：button元素和 type=“button”实际应用还是有区别的，button要比input 按钮的功能多，button元素可以当任何按钮来使用，使用范围更广泛。
2、input button 和 input submit 的区别：submit 用于提交表单，使用范围比 input button要小一点。
3、input button 通常用于和 java script 一起使用并作为绑定事件处理
4、input submit 用于提交表单时，必须生命form里面的method 属性，最好也添加action属性（涉及php知识）
得出结论：
使用范围和功能：button>input button>>input submin
1 <input type=button value="按钮"> 2 <button>按钮</button>><!-- 跟js合作并且用来绑定事件的 --> 3 <input type="submit" value="按钮"><!-- 提交表单 --> 4 </form>
checkbox型和input元素
<input type="number" min="-100" max="200" value="0">
<input type="checkbox" >记住我
<input type="radio" >选择
用input生成一组固定选项
谁最帅
<input type="radio" name="a">浩轩
<input type="radio" name="a">浩轩
<input type="radio" name="a">浩轩
生成选项列表（select）和数据列表（datalist）
<input type="text" list="datalist1"> <datalist id="datalist1"> <option>你猜</option> <option>你看我猜不</option> <option>不好玩</option> </datalist>