HTML5 新的 Input 类型
输入类型
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
浏览器支持
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5表单相关</title>
</head>
<body>
<form action="">
<p>
<label for="email">email邮箱</label>
<input type="email" name="e" id="email" value="">
</p>
<p>
<label for="color">color颜色选择控件</label>
<input type="color" name="c" id="color" value="#3388ff">
</p>
<p>
<label for="number">number数字</label>
<input type="number" name="n" id="number" value="1" min="0" max="20" step="0.5">
</p>
<p>
<label for="range">range拖拽条</label>
<input type="range" name="r" id="range" value="0" min="0" max="100" step="4">
</p>
<p>
<label for="url">url网址输入框</label>
<input type="url" name="u" id="url" value="">
</p>
<p>
<label for="tel">tel手机号输入框</label>
<input type="tel" name="t" id="tel" value="">
</p>
<p>
<label for="date">date选择年/月/日</label>
<input type="date" name="date" id="date" value="">
</p>
<p>
<label for="month">month选择年/月</label>
<input type="month" name="month" id="month" value="">
</p>
<p>
<label for="week">week选择年/周</label>
<input type="week" name="week" id="week" value="">
</p>
<p>
<label for="time">time选择时段/时间</label>
<input type="time" name="time" id="time" value="">
</p>
<p>
<label for="datetime-local">datetime-local选择:年/月/日/时段/时间(本地)</label>
<input type="datetime-local" name="datetime-local" id="datetime-local" value="">
</p>
<p>
<label for="datetime">datetime选择:年/月/日/时段/时间(UTC)</label>
<input type="datetime" name="datetime" id="datetime" value="">
</p>
<p>
<label for="search">search显示为常规输入框</label>
<input type="search" name="search" id="search" value="">
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
HTML5 的新的表单元素
连接 http://www.w3school.com.cn/html5/html_5_form_elements.asp
HTML5 的新的表单属性
连接 http://www.w3school.com.cn/html5/html_5_form_attributes.asp