表单

表单结构，文本栏、密码栏、隐藏栏、复选栏、单选栏、窗体栏位、区块栏位、按钮、图像按钮、允许上传文件、表单的外框和标题、元件的次序和快捷键。

用来收集用户信息。
2.表单复习
表单的标签为form

Action属性：表单的信息提交到哪儿

文本框
文本框的type值为text

Name：文本框的名字
Maxlength：能输入内容的最大长度
Size：文本框的宽度

密码框：type为password

文本域：textarea

Cols：文本域的宽度
Rows：文本域的高度

隐藏字段：type值为hidden

隐藏字段也可以将value值提交到后台

单选框：type值为radio，需要注意必须要有相同的name表示这两个单选按钮是一组的

Checked：代表默认被选中

复选框：type值为checkbox

复选框也需要相同的name值，代表这些复选框是一组的

下拉列表：通过select标签来实现，需要配合option标签来一起使用

下拉列表分组：optgroup标签可以用来给下拉列表进行分组

 

Selected属性用来设置下拉列表默认是什么值
Multiple：用于设置显示多个下拉列表选项
Size：用于设置具体出现几个选项

上传文档：type值为file
使用上传文档控件时，需要注意的就是form标签需要添加上enctype属性，并且要将该属性值设置为multipart/form-data
如果不设置的话，后台无法得到文件里面的具体内容

四种按钮
提交：type值为submit

重置：type值为reset

图片：背后就是提交按钮，只不过该按钮是通过图片来实现的

普通按钮：type值为button

但是如果是在表单里面使用<button>，该按钮则是提交按钮

效果：表单里面的信息会被提交

3.HTML5新增表单控件
①email类型
主要用于用户输入email地址，在提交表单时，会自动验证email输入框的值

 

②url类型
主要用于用户输入url地址，在提交表单的时候，会自动验证

 

如果遇到不支持该标签的浏览器，那么会被渲染为一个普通的文本框，这是基于HTML5平稳退化的设计理念

③number类型
该类型控件只允许用户输入数字，并且数字的范围是可以指定的

 

通过min和max属性来指定数字的范围

 

还有一个step属性：设置数值的间隔

 

Range：表示范围
和number的作用大致是一样的，只不过表现形式稍微有点不同，range为一个滑动条

默认的最小最大值为0-100

通过min和max属性可以设置range的最大最小值

也可以通过step来设置间隔

④日期检查控件
大致有5个
1.日期控件：type值为date

2.时间控件：type值为time

 

3.本地日期时间：type值为datetime-local

 

4.月份控件：type值为month

5.周控件：type值为week

⑤Search类型
用于搜索关键字的文本框

 

虽然外观上感觉没有区别，但是实际上还是有细微区别
第一个区别在于search填写内容后右边会有小×，用于删除填写的所有信息

第二区别就在于语义不同

⑥ Tel类型
Tel类型代表输入电话号码的文本框

虽然外观上和普通的文本框一模一样，但是他们还是有区别的，区别就在于语义上区别

⑦ Color类型
专门用于设置颜色的控件

 

4.HTML5里面新增的属性
① autocomplete属性
自动完成功能
使用该功能需要配合datalist标签和list属性，还有option标签

效果：当提交过一次以后，可以自动填写之前提交的值

② autofocus属性
自动获取焦点

 

效果：同意按钮自动获取焦点

③Form属性
以前要提交信息的时候，所有控件必须写在form标签里面，有了form属性以后，只需要在外部的表单控件添加form属性即可，form属性里面写form表单的ID

 

④表单重写属性
表单重写属性是一套属性，具体有如下：
formaction，formenctype，formmethod，formtarget，formnovalidate

⑤min，max，step属性
min：输入框允许的最小值
max：输入框允许的最大值
step：输入数字之间的间隔

⑥pattern属性
该属性允许开发者自己写一个正则表达式进入，定义自己的输入规则，正则表达式的和JavaScript是一样的
代码：

效果：

⑦placeholder属性
文本框提示信息

⑧required属性
必须填写

效果：

⑨novalidate属性
代表取消验证，关闭对表单内所有元素的检查
该属性添加在form标签里面

效果：