HTML5智能表单

1、表单新增属性

 ☀ autofocus 属性

<input type="text" autofocus/>设置 autofocus 属性，使文本框自动获得焦点

注意:一个页面中最多只能有一个表单元素设置该属性，否则功能将失效，建议对第一个input元素设置autofocus属性。

 

☀ formaction 属性

<input type="submit" formaction="处理逻辑"><!-- 处理逻辑可为add.jsp(添加)、update.jsp(修改)、delete.jsp(删除)。 -->

所有提交按钮(<input type="submit">、<input type="image">、<button type="submit">)都可以使用 formaction 属性。

HTML5只需添加formaction属性就可实现增加、修改和删除3个按钮功能，不再需要脚本的控制。

 

☀ autocomplete 属性

若一个元素内包含有 autocomplete="off" 属性，这意味着涉及机密信息，不应被浏览器保存。

若表单未定义 autocomplete，则默认设置为开启自动完成、显示输入提示(记忆用户在曾访问网站上所输入的内容)。

 

☀ pattern 属性

pattern 属性是input元素的验证属性，该属性的值是一个正则表达式，通过这个表达式可以验证输入内容的有效性。

用户名：<input type="text" name="username" pattern="^[a-zA-Z]\w{2,7}" title="必须以字母开头，包含字符或数字，长度是3~8" /><br />
密码：<input type="text" name="password" pattern="\d{6}" title="必须输入6个数字" /><br />

☀ placeholder 属性，也叫占位符

占位符值可以给予用户一个快速提示，让他们了解该在输入字段中输入什么，它并不会取代标签元素。当需要用户输入某一特定格式的内容时，

占位符显得尤其有用。浏览器会在输入字段显示提示文字。当该输入字段被聚焦(focus)激活，该提示文字则消失，失去焦点时又将自动显示。

姓名：<input type="text" placeholder="请输入您的真实姓名" name="username"><br />

required 属性  定义必填项

required 是一个布尔型属性，包含此属性的表单元素必须被填写。在发送时若仍为空，浏览器就会给予相关相应。

 

2、新增的 input 元素类型

☀ 输入类型 tel 及 search

tel(电话输入文本) 及 search(搜索关键字输入的文本框) 类型与普通的文本没什么不同，

唯一不同的是输入关键字后search文本框右侧会出现一个"X"按钮，单击"X"后清空输入内容，由此带来方便。

 

☀ 输入类型 url 及 email

URL地址输入框要求必须输入一个包含访问协议的完整的URL路径。

URL网址：<input type="url" name="rul" title="URL应包括访问协议">

email邮箱输入框要求输入正确格式，此外，还可以添加 multiple 属性以允许同时输入多个以逗号分隔的email。

Email：<input type="email" name="email" title="email的格式是 XXX@XXX.XX ">

☀ 输入类型 number 及 range

number 及 range 类型与包含数值的输入有关，并且支持浮点数表达式。不同的是range类型是用一个滑块来进行输入。

输入数值的取值范围由 min和 max两个属性来设置，默认是不限定；调节步长使用 step属性，默认步长是1.

<input type="number/range" min="最小值" max="最大值" step="改变数值的步长" name="number/range">

☀ 输入类型 color

color 类型让 input元素生成一个颜色选择器。<input type="color" name="color">

☀ datalist 选项列表

datalist 元素用于生成一个隐藏的下拉菜单，其相当于一个“看不见”的 select元素。为什么需要设置id值呢？

因为 datalist元素一般需要跟某个文本框结合使用，结合方式是通过将文本框的"list"属性值设置为 datalist的 id值，这样就将 datalist绑定到了某个文本框。用户选中选项后datalist元素自动隐藏。记住，跟文本框一起使用并给文本框list和自身id相同的值。

    <input type="text" name="degree" form="register" list="degree">
    <datalist id="degree">
      <option label="top1" value="大专"></option>
      <option label="top2" value="本科"></option>
      <option label="top3" value="研究生"></option>
    </datalist>

 

☀ 用 datetime(日期和时间),date(日期),time(时间),month,week以及 datetime-local(本地日期时间)这几个type类型表示日期和时间

<input type="datetime/date/time/month/week/datetime-local" name="...">

datetime包括日期以及时间信息；时间设置始终为UTC。规范允许用户通过浏览器选择不同时区，但input元素的值始终会被转换为UTC格式。datetime属性 字符串必须以 Z 结束以表明它是UTC格式。"YYYY-MM-DDThh:mm:ss.ssZ"这是UTC格式.目前，很多浏览器都不支持datetime这个类型。

在 date和 month中，时间及时区则被忽略。根据规范定义，date必须是所选月份中的一个有效日期，同时考虑到闰年。年、月、日必须用“ - ”号隔开。为了确保星期与月份不被混淆，week前面通常会加上一个字母 W 。

datetime-local 与之前描述过的 datetime 作用基本相同，唯一不同之处是不需要表明时区。

 

☀ 使用 meter 显示度量

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。

注释：<meter> 标签虽说也可标记进度条，但并不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

<meter value="3" min="0" max="10">十分之三</meter>或<meter value="0.6"></meter>

 

☀ 用 progress 显示任务进程