UI设计师-前端基础-HTML5_HTML5表单控件与属性.docx

PAGE1

PAGE1

HTML5表单控件概述

1HTML5表单控件的新增特性

HTML5引入了许多新的表单控件和属性，这极大地丰富了网页设计中的数据输入与验证方式。之前，我们已经探讨了HTML5表单控件的优势与适用场景，现在，我们将深入探讨这些新特性，看看它们如何提升用户体验并简化开发流程。

1.1新增控件

inputtype=date:用于选择日期。它提供了一个日历控件，用户可以直接点击选择日期，而无需手动输入。

form

labelfor=birthday生日:/label

inputtype=dateid=birthdayname=birthday

/form

这个控件利用了浏览器的本地日历，使得用户在移动设备上也可以方便地选择日期，而无需考虑不同地区日期格式的差异。

inputtype=time:用于选择时间。用户可以选择小时和分钟，某些浏览器还支持秒的选择。

form

labelfor=appointment预约时间:/label

inputtype=timeid=appointmentname=appointment

/form

inputtype=datetime-local:结合date和time，用于选择日期和时间。

form

labelfor=event事件时间:/label

inputtype=datetime-localid=eventname=event

/form

inputtype=email:用于输入电子邮件地址。浏览器会自动验证输入是否符合电子邮件格式。

form

labelfor=email邮箱:/label

inputtype=emailid=emailname=email

/form

inputtype=url:用于输入网址。同email类似，浏览器会验证输入是否为合法的URL。

form

labelfor=website网址:/label

inputtype=urlid=websitename=website

/form

inputtype=search:专门用于有哪些信誉好的足球投注网站框，虽然在功能上与text类似，但提供了有哪些信誉好的足球投注网站按钮样式，增强了用户体验。

form

labelfor=query有哪些信誉好的足球投注网站:/label

inputtype=searchid=queryname=query

/form

inputtype=tel:用于电话号码输入。虽然浏览器不会自动验证电话号码格式，但可以结合pattern属性进行自定义格式验证。

form

labelfor=phone电话:/label

inputtype=telid=phonename=phonepattern=[0-9]{3}-[0-9]{2}-[0-9]{3}

/form

inputtype=range:提供了一个滑动条，用于输入数值范围。常用于音量控制、亮度调节等场景。

form

labelfor=volume音量:/label

inputtype=rangeid=volumename=volumemin=0max=100value=50

/form

inputtype=color:用于选择颜色。这个控件在浏览器中通常表现为一个颜色选择器。

form

labelfor=color选择颜色:/label

inputtype=colorid=colorname=color

/form

1.2新增属性

required:强制输入控件必须填写。不填写时，表单将无法提交。

inputtype=textrequired

pattern:使用正则表达式验证输入数据的格式。

inputtype=textpattern=[a-zA-Z]*

上述例子中，输入的数据必须全为字母或空格。

min和max:用于限制数值输入的范围。

inputtype=numbermin=18max=65

step:设置数值输入的增量。

inputtype=numbermin=0max=100step=5

用户只能输入以5为增量的数值。

readonly:使输入框变为只读。

inputtype=textreadonly

autocomplete:控制是否允许自动完成输入字段的值。可以是on或off。

inputtype=textname=usernameautocomplete=on

autofocus:控制页面加载时输入框是否自动获得焦点。

inputtype=textautofocus

placehold