响应式设计入门-08用HTML5和CSS3征服表单讲述.ppt

用 HTML5 和CSS3 征服表单 本章内容 在表单域中插入占位符文字 在需要时禁用表单域的自动完成功能 将特定表单域设置为必填项 使用不同类型的输入框，如电子邮箱、电话号码和URL。 制作数字输入滑动条以方便选择数值 使用日期和颜色选择器 学习如何使用正则表达式定义表单值验证规则 为落后的浏览器添加腻子脚本 使用 CSS3 轻松灵活地美化HTML5 表单 HTML5 表单 表单是什么？ 现在，所有这些用户界面元素（包括上述的滑动条、占位符文字和控制器）和表单验证都可以使用原生的HTML5 来完成，不需要再依赖JavaScript。 理解HTML5 表单中的元素 首先表单被设定了一个ID 用于对应样式，然后包含一个HTML5 的hgroup，用于显示表单标题和说明文字。 form id=redemption method=post hgroup h1Oscar Redemption/h1 h2Heres your chance to set the record straight: tell us what year the wrong film got nominated, and which film bshould/bhave received a nod.../h2 /hgroup 表单中的三块子区域都使用带有legend 标签的fieldset 来包裹： fieldset legendAbout the offending film (part 1 of 3)/legend div label for=filmThe film in question?/label input id=film name=film type=text placeholder=e.g. King Kong required aria-required=true /div 从上面的代码片段可以看出，每一个输入元素，都有一个label 元素与之对应，且一并被包裹在div 中。 HTML5 的表单特性：在id、name 和type 这些普通属性之后，有一个placeholder属性。 placeholder 在input 元素中加入placeholder 属性，其属性值就会默认显示为占位符文字，输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时，占位符文字则会再次显示。 required required 属性看起来是这个样子的： required aria-required=true 在支持HTML5 的浏览器中，在input 元素中追加布尔类型的属性required（也就是说你可以选择追加或不追加该属性），则表明该表单域为必填项。 如果没有特殊原因，建议为输入框追加WAI-ARIA 版的必填属性以方便屏幕阅读器用户（你应该还记得，我们在第4 章学习过WAI-ARIA 技术）。 required 属性可用于多种类型的输入元素，以确保表单域必须输入值。 range、color、button 和hidden 类型的输入元素则不能使用required，因为这几种输入类型几乎都有默认值。 autofocus HTML5 的autofocus 属性可以让表单在加载完成时就有一个表单域被默认聚焦（或选中），以便于用户输入。 下面的代码中被div 包裹的表单域的末尾就被追加了一个autofocus 属性： div label for=searchSearch the site.../label input id=search name=search type=search placeholder=Wyatt Earp autofocus /div 使用该属性时要小心。如果有多个表单域都被追加了autofocus 属性，则会造成跨浏览器混乱。 autocomplete div label for=telTelephone (so we can berate you if youre wrong)/label input id=tel name=tel type=tel placeholder=1-234-546758 autocomplete=off required aria-required=true /div 用户可以在浏览器设置中打开或关闭这项功能，现在我们还能告知浏览器我们不想在某个表单或表单域上使用自动完成功能。这不仅仅能保护敏感数据（例如银行账户），还可以让你确保用户用心填写表单，手工输入一些值。 也可以通过给表单本身（不是fieldset）设置属性来禁用整个表单的自动完成功能。示例代码如下： form id=redemption method=post autocomplete=off list（及