6.1.4Input元素及属性--2a精品课件.pptxVIP

6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。tel类型input type=tel /tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和pattern属性配合使用。请输入电话号码：input type=tel name=telphone pattern=^\d{11}$/ 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。search 类型input type=search /search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。输入搜索关键词：input type=search name=searchinfo/ 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。color类型input type=color /color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。请选取一种颜色：input type=color name=color1/ 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。number类型input type=number /number类型的input元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。请输入数值：input type=number name=number1 value=1 min=1 max=20 step=4/ 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。range类型input type=range /range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样。请输入数值：input type=“range name=number1 value=1 min=1 max=20 step=4/ 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。Date pickers类型input type= date, month, week… /Date pickers类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期input type=date/ 6.3 Input元素及属性1. Input元素的type属性在HTML5中，input元素拥有多个type属性值，用于定义不同的控件类型。Date pickers类型—时间和日期类型时间和日期类型说明date选取日、月、年 month选取月、年week选取周和年time选取时间（小时和分钟）datetime选取时间、日、月、年（UTC时间）datetime-local选取时间、日、月、年（本地时间）