今日份学习——（HTML+CSS）表单属性

表单的构成与创建

一个完整的表单通常由表单元素、提示信息和表单域3个部分构成。

在HTML5中，form标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下。

form action="url 地址" method="提交 方式" name="表单名称"> 各种表单控件 </form

表单属性

表单拥有多个属性，通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。

1. action属性
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method属性
   method属性用于设置表单数据的提交方式，其取值为get或post。采用get方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，所以使用method="post"可以大量的提交数据。
3. name属性
   name属性用于指定表单的名称，以区分同- -个页面中的多个表单。
4. autocomplete属性
   autocomplete属性用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。
   autocomplete属性有2个值，对它们的解释如下。
   ●on:表单有自动完成功能。
   ●off: 表单无自动完成功能。
   
5. novalidate属性
   novalidate属性指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证。

未使用novalidate属性时：

开启novalidate属性后：

注意:
form标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在form>与</form之间添加相应的表单控件。

input元素及属性

input元素的type属性

1. 单行文本输入框<input type=“text” /
   单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、 value. maxlength。
2. 密码输入框<input type=“password” /
   密码输入框用来输入密码，其内容将以圆点的形式显示。
3. 单选按钮<input type=“radio” /
   单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选"才会生效。此外，可以对单选按钮应用checked属性,指定默认选中项。
4. 复选框<input type=“checkbox” /
   复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。
5. 普通按钮<input type=“button” /
   普通按钮常常配合javascript脚本语言使用，了解即可。
6. 提交按钮<input type=“submit” /
   提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的默认文本。
7. 重置按钮<input type=“reset” /
   当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性，改变重置按钮上的默认文本。
8. 图像形式的提交按钮<input type=“image” /
   图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url 地址。
9. 隐藏域<input type=" hidden" /
   隐藏域对于用户是不可见的，通常用于后台的程序，了解即可。
10. 文件域<input type=“file” /
    当定义文件域时，页面中将出现-一个文本框和一个“浏览…” 按钮,用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

实际操作：

效果展示：

不同类型的input控件外观不同,当对它们进行具体的操作时，如输入用户名和密码、选择性别和兴趣等，显示的效果也不-样。例如，当在密码输入框中输入内容时,其中的内容将以圆点的形式显示，而不会像用户名中的内容一样显示为明文。

11. email类型<input type=“email” /
    email类型的input元素是-种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合E-mail邮件地址格式;如果不符合,将提示相应的错误信息。
12. url类型<input type=“url” /
    url类型的input元素是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本,则会提交数据到服务器;如果输入的值不符合URL地址格式,则不允许提交,并且会有提示信息。
13. tel类型<input type=“tel” /
    tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现-一个通用的格式。因此, tel 类型通常会和pattemn属性配合使用.
14. search类型<input type= “search” /
    search类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符， 如站点搜索或者Google搜索。在用户输入内容后,其右侧会附带-一个删除图标，单击这个图标按钮可以快速清除内容。
15. color类型<input type=“color” /
    color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是:#RRGGBB,默认值为00000,通过value属性值可以更改默认颜色。单击color 类型文本框，可以快速打开拾色器面板，方便用呵视化选取一种颜色。

实际操作：

实际效果：

注意：
需要注意的是，不同的浏览器对url类型的输入框的要求有所不同，在多数浏览器中，要求用户必须输入完整的URL地址，并且允许地址前有空格的存在。

16. number类型<input type=“number” /
    number类型的input 元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。
    number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等，具体属性说明如下。
    ●value: 指定输入框的默认值。
    ●max：指定输入框可以接受的最大的输入值。
    ●min：指定输入框可以接受的最小的输入值。
    ●step: 输入域合法的间隔，如果不设置，默认值是1。.
17. range类型 input type=“range” />
    range类型的input 元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样，通过min属性和max属性，可以设置最小值与最大值通过step属性指定每次滑动的步幅。
18. Date pickers类型<input type= “date, month, wee…” /
    Date pickers 类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期.
    
    演示操作：
    
    效果展示：
    
    注意:
    对于浏览器不支持的input 元素输入类型，将会在网页中显示为一个普通输入框。

##input元素的其他属性

1. autofocus 属性
   在访问Google主页时，页面中的文字输入框会自动获得光标焦点，以便输入关键词。在HTML5中，autofocus 属性用于指定页面加载后是否自动获取焦点。

开启autofocus时：

关闭autofocus时：

2. form属性
   在HTML5之前，如果用户要提交一个表单，必须把相关的控件元素都放在表单内部，即<fom和/form>标签之间。在提交表单时，会将页面中不是表单子元素的控件直接忽略掉。
   HTML5中的form属性，可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。此外，form 属性还允许规定一个表单控件从属于多个表单。

   案例展示：
   
   效果展示：
   
   注意:
   form属性适用于所有的input输入类型。在使用时，只需引用所属表单的id即可。

3. list属性
   list属性用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。

案例展示：

效果展示：

4. multriple属性
   multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的input元素。multiple 属性用于email 类型的input元素时,表示可以向文本框中输入多个E-mail地址，多个地址之间通过逗号隔开; multiple 属性用于file类型的input元素时，表示可以选择多个文件。

案例展示：

效果展示：

5. min. max和step属性
   HTML5中的min、max和step属性用于为包含数字或日期的input 输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date. pickers. number和range标签。具体属性说明如下。
   ●max:规定输入框所允许的最大输入值。
   ●min: 规定输入框所允许的最小输入值。
   ●step:为输入框规定合法的数字间隔，如果不设置,默认值是1。

6. pattern属性
   pattern属性用于验证input类型输入框中,用户输入的内容是否与所定义的正则表达式相
   匹配。pattern属性适用于的类型是: text、 search、 url、 tel、 email 和password的<input/标记。
   

7. placeholder属性
   placeholder属性用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。在输入框为空时显式出现，而当输入框获得焦点时则会消失。

案例展示：

效果展示：

注意：
placeholder属性适用于type属性值为text、search. url、 tel. email 及password的input/>标记。

8. required 属性
   HTML5中的输入类型，不会自动判断用户是否在输入框中输入了内容，如果开发者要求输入框中的内容是必须填写的，那么需要为input元素指定required 属性。required 属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。.

案例展示：

效果展示：