html表单-HTML5表单新属性

HTML5中增加了许多新的表单功能，例如form属性、表单控件、input控件类型、input属性等，这些新增内容可以帮助设计人员更加高效和省力地制作出标准的Web表单。

一、全新的form属性

二、全新的表单控件

三、全新的input控件类型

四、全新的input属性

1.属性

属性用于指定页面加载后是否自动获取焦点html表单html表单，将标签的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。

2.form属性

HTML5中的form属性，可以把表单内的子元素写在页面中的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。

3.list属性

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

4.属性

属性指定输入框可以选择多个值，该属性适用于email和file类型的input元素。

5.min、max和step属性

HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date、、和range标签。

表单html代码_html表单_表单HTML

6.属性

属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。属性适用于的类型是：text、、url、tel、email和的标签。

7.属性

属性用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。

8.属性

属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

任务1：使用全新的表单控件完成以下效果图

<html><head><meta charset="utf-8"><title>全新的表单控件</title></head><body><form action="#" method="get">请输入您的邮箱：<input type="email" name="formmail"/><br/>请输入个人网址：<input type="url" name="user_url"/><br/>请输入电话号码：<input type="tel" name="telphone" pattern="^d{11}$"/><br/>输入搜索关键词：<input type="search" name="searchinfo"/><br/>请选取一种颜色：<input type="color" name="color1"/><input type="color" name="color2" value="#FF3E96"/><input type="submit" value="提交"/></form></body></html>