转载自【http://www.656463.com/article/335】
HTML5 智能form表单新属性，主要包括智能表单介绍和智能表单使用与规范。但在不同支持HTML5的浏览器效果有所差异，使用的时候要注意
智能表单介绍
1、XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。
<FORM id=foo>
…
</FORM>
<INPUT … form="foo">
2、HTML5提供了多样的输入类型和风格，让设计界面更加丰富
<input type="text" list="mydata" />
<datalist id="mydata">
<option label="Top1" value="让子弹飞">
<option label="Top2" value="非诚勿扰2">
<option label="Top3" value="大笑江湖">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value=“PHP100">
</datalist>
新属性介绍：
autofocus 载入时自动获得焦点
required 必填项目
placeholder 点击input内容消失
pattern 验证正则表达式
3、实例
<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>HTML5视频教程-canvas</title>
</head>
<body>
<form action="" method="get" id="foo">
邮件<input type="email" placeholder="请输入正确mail地址"><br>
网址<input type="url"><br>
日期<input type="date"><br>
月份<input type="month"><br>
周 <input type="week"><br>
时间<input type="time"><br>
数字<input type="number"><br>
滑动<input type=range min="0" max="3" step="1"><br>
搜索<INPUT type=search results="n" value="搜索"><br>
颜色<INPUT type=color><br>
正则测试<input type="text" pattern="[789]+" required />
<input type="text" list="mydata" />
<datalist id="mydata">
<option label="Top1" value="656463">
<option label="Top2" value="HTML5">
<option label="Top3" value="Javascript">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value="初恋这件小事">
</datalist>
<input type="submit" value="sub">
</form>
</body>
</html>
分享到：
相关推荐
总之，HTML5和CSS3为form表单的设计打开了新的大门，提供了更多的交互性和视觉吸引力。理解并熟练应用这些技术，将使你的网页在众多竞争对手中脱颖而出，提供卓越的用户体验。通过不断学习和实践，你可以创建出既...
标题中的“前端项目-bootstrap3-contact-form.zip”表明这是一个基于Bootstrap 3框架的前端网页项目，主要功能是实现一个联系表单。Bootstrap 3是Twitter推出的一个开源的用于开发响应式布局、移动设备优先的WEB项目...
HTML5中的表单功能得到了极大的增强，不仅提供了更多的输入类型和属性，还引入了新的元素和API，使得网页上的表单更加丰富、易用且强大。在本章节中，我们将深入探讨HTML5表单的相关知识点。 #### 二、实验目的 1....
此外，也可以利用Laravel的表单模型绑定功能，将表单字段与模型属性关联，实现更智能的数据验证和填充。 7. **性能和兼容性** 由于laravel-bootstrap-form是基于Laravel 5构建的，因此它与Laravel 5.x版本兼容。在...
这些新的`input`属性极大地丰富了HTML5表单的功能，让开发者能够创建更智能、更易用的表单，同时也加强了前端的数据验证，减少了服务器端的负担。在实际开发中，结合这些属性可以构建出适应性强、用户体验良好的表单...
在HTML5中，form元素及其相关属性是关键组成部分，它们帮助开发者构建更加灵活和智能的表单。 首先，`<datalist>`元素是一个重要的新特性，它允许开发者定义输入域的预设选项列表。例如，当用户在输入框中输入信息...
HTML5是Web开发中的一种重要标准...通过这些新属性，HTML5极大地增强了表单功能，提供了更好的数据验证、用户体验和交互性。开发者可以根据需求灵活使用这些属性来定制表单，从而创建出更加智能和用户友好的网页应用。
form属性是HTML5中一个重要的新特性，它允许input元素关联到一个或多个表单，即使input元素不在form标签内部。通过指定form属性的值为相关表单的id，可以实现跨元素的关联。这增强了表单结构的灵活性。例如： ```...
2. 表单属性：如action（提交表单的URL）、method（提交方式，GET或POST）等，控制表单的行为。 3. 表单事件：如onsubmit（提交时触发）、onchange（元素值改变时触发）等，可以通过JavaScript进行响应处理。 二、...
在网页开发中，表单（Form）是用户与页面交互的重要元素，用于收集用户输入的信息。在HTML中，我们可以利用各种事件来控制表单元素的行为，`onblur`事件就是其中之一。`onblur`事件是当用户焦点离开某个元素，比如...
HTML5是Web开发中的一个重要版本，它在标准的HTML4基础上增加了许多新的特性和功能，尤其是在表单处理方面。在HTML5中，表单控件得到了显著增强，提供了更多的属性来帮助开发者创建更加灵活和交互性强的用户界面。...
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉吸引人的在线交互体验提供了强大的...同时，这样的实践也有助于提升开发者对HTML5新特性和CSS3高级特性的熟练度，从而在网页设计领域更上一层楼。
本实例将深入探讨如何利用jQuery实现网站会员注册表单的验证，并在用户提交form表单时进行有效控制。 首先，我们需要理解jQuery的核心概念。jQuery通过选择器（Selectors）选取HTML元素，然后使用方法（Methods）来...
"HTML5FormAttributes(Part1)共8页"这个压缩包文件很可能是关于HTML5中表单属性的一个教程或文档，虽然没有提供具体内容，但我们可以根据已知的标签"HTML5FormAttribu"来深入探讨HTML5中的一些关键表单属性。...
4. `<form>`的新属性：如`novalidate`，可以禁用表单的默认验证；`required`属性用于字段必填，`pattern`属性则可以定义输入的正则表达式，以限制输入格式。 二、动态添加表单元素 在JavaScript中，我们可以利用...
表单元素在HTML5中也得到了增强，提供了更多新的输入类型，如`<input type="email">`用于电子邮件地址，`<input type="tel">`用于电话号码，这些都可以帮助浏览器进行更智能的数据验证，提高用户体验。此外，`<form>...
### 巧用JavaScript创建智能表单效果 在现代网页开发中，使用JavaScript来增强用户体验是一项基本且关键的技术。本文将详细介绍如何通过JavaScript实现智能表单验证，并探讨如何使用字符串处理功能来进一步提升表单...
HTML5是现代网页开发的核心技术，它在传统HTML的基础上增加了许多新特性，使得网页功能更加丰富，用户体验更佳。在“html5点击弹出手机登录注册表单提交代码”这个主题中，我们将深入探讨HTML5如何实现点击事件触发...
HTML5是现代网页开发的关键技术之一，特别是在处理用户交互和数据收集方面，其表单验证功能使得前端数据校验变得更加智能和便捷。本篇将详细阐述HTML5在表单验证方面的核心特性，帮助理解如何有效地确保用户输入的...