HTLM5表单

1.HTML5占位符文本

  使用placeholder可以给文本框,搜索框添加提示性文本

<input type="text" name="url" placeholder="输入地址" />

HTLM5表单

2.自动聚焦

    当页面加载完成时让输入焦点自动落到某个元素上;这个动作用autofocus属性完成。

<!-- These all work! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

3.标签自动补全

datalist作用:我们经常在网上的搜索框中看到当输入一个字符,输入框下方会自动列出你输入的关键词。

    <input list="w3cfuns-search" />
<datalist id="w3cfuns-search">
<option value="W3Cfuns">
<option value="W3C标准">
<option value="W3C规则">
<option value="W3C验证">
<option value="前端开发">
<option value="前端开发网">
<option value="2天驾驭DIV+CSS">
<option value="W3CSchool">
</datalist>

HTLM5表单

4.HTML5新输入类型

   (1)color 类型用在input字段主要用于选取颜色

<input type="color" name="favcolor">

HTLM5表单

(2)date 类型允许你从一个日期选择器选择一个日期

<input type="date" name="bday">

HTLM5表单

(3)datetime-local 类型允许你选择一个日期和时间 (无时区)

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

(4)email 类型用于应该包含 e-mail 地址的输入域

E-mail: <input type="email" name="email">

(5)month 类型允许你选择一个月份。

生日 (月和年): <input type="month" name="bdaymonth">

(6)number 类型用于应该包含数值的输入域。

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

其他还有:

  • range     滑动条
  • search    搜索框
  • tel          电话号码
  • time       时间
  • url         URL地址
  • week      周

使用下面的属性来规定对数字类型的限定:

HTLM5表单

range 类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条。

<input type="range" name="points" min="1" max="10">

HTLM5表单

 5.HTML5表单验证

     HTML5对表单元素提供了patern属性,它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。

<input id="phone_num" name="phone_num" type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="xxx-xxxx-xxxx"/>

HTLM5表单

 

上一篇:Java中JSON的简单使用与前端解析


下一篇:SPOJ 7258 SUBLEX 后缀数组 + 二分答案 + 前缀和