《HTML5+CSS3》课件——第七章 表格与表单.pptVIP

7.5 HTML5表单新属性 7.5.3 全新的input控件类型 在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证。 tel类型 input type=tel / tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和pattern属性配合使用。 请输入电话号码：input type=tel name=telphone pattern=^\d{11}$/ 7.5 HTML5表单新属性 7.5.3 全新的input控件类型 在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证。 search 类型 input type=search / search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。 输入搜索关键词：input type=search name=searchinfo/ 7.5 HTML5表单新属性 7.5.3 全新的input控件类型 在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证。 color类型 input type=color / color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。 请选取一种颜色：input type=color name=color1/ 7.5 HTML5表单新属性 7.5.3 全新的input控件类型 number类型 input type=number / number类型的input元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。 请输入数值：input type=number name=number1 value=1 min=1 max=20 step=4/ 在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证。 7.5 HTML5表单新属性 7.5.3 全新的input控件类型 在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证。 range类型 input type=range / range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样。 请输入数值：input type=“range name=number1 value=1 min=1 max=20 step=4/ 7.5 HTML5表单新属性 7.5.3 全新的input控件类型 在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证。 Date pickers类型 input type= date, month, week… / Date pickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期 input type=date/ 7.5 HTML5表单新属性 7.5.4 全新的input属性 autofocus属性用于指定页面加载后是否自动获取焦点，将标签的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。 autofocus属性 1 1、autofocus属性 7.5 HTML5表单新属性 7.5.4 全新的input属性 2、form属性 HTML5中的form属性，可以把表单内的子元素写在页面中的任一位置，只需为这个元素指定form属性并设置属性值为该表单的id即可。 form属性 2 7.5 HTML5表单新属性 7.5.4 全新的input属性 3、list属性 list属性用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。 list属性 3 7.5 HTML5表单新属性 7.5.4 全新的input属性 4、multiple属性 multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的input元素。 multiple属性 4 7.5 HTML5表单新属性 7.5.4 全新的input属性 5、min、max和step属性 HTML5中的min、max和step属性用于为包含数字或日期的