疯狂的表单-html5新增表单元素和属性 - 文日尧_H5之家

疯狂的表单

2015/11/27 16:44:07

从三方面来介绍html5表单的新特性

表单结构更灵活

要提交数据的控件可以布局在form标签之外，看下面的代码，表单元素可以写到form元素之外，只需在元素中加入form="form1"属性，也可提交到form元素指定的服务器地址

<body> <form action="upload.php" method="post" accept-charset="utf-8"> </form> <input type="text" value="" form="form1"> <input type="submit" value="提交" form="form1"> </body> 新增表单元素

我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用

日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果

<form action="upload.php" method="post" accept-charset="utf-8"> <br> 主页: <input type="url" value="" placeholder="个人主页" required> <br> 邮箱: <input type="email" value="" placeholder="邮箱" required> <br> 生日: <input type="date" value="" required> <br> 时间: <input type="time" value="" required> <br> 星期: <input type="week" value="" required> <br> 年龄: <input type="number" value=""> <br> 薪水: <input type="range" value=""> <br> 电话: <input type="tel" value="" placeholder="都不支持"> <br> 颜色: <input type="color"> <br> <input type="search" value="" results="s"><br> <input type="submit" value="提交" form="form1"> </form> 浏览器的支持情况

chrome：

firefox：

Opera：

Microsoft Edge：

好，我们对微软的进步进行表扬！

新增表单属性

除了新增的表单元素之外，html5中还新增了一些表单属性

新的 form 属性：

autocomplete
novalidate

新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

在下面的案例中，我们对一些常用的属性做了解释，大家直接看代码和代码旁边的注释，然后对照浏览器的运行结果就理解其意义了