您的位置：首页 > Web前端 > HTML5

html5新增的type类型

2016-01-09 11:27 721 查看
html5新增了很多的input类型，省去了前端开发者写javascript，调用插件等一系列麻烦的操作，下面介绍一些新增的类型。注释直接写在HTML代码里了：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5中新增的input标签</title>
</head>
<body>
	<form action="test.php" method="get">
		/*search类型专用于“搜索”，可以在输入后点击“X”直接清空输入框*/
		search----<input type="search" name="hehehe"><br>

		/*tel类型用于输入电话号码，在pattern里写正则，title写提示错误信息*/
		tel----<input type="tel" pattern="^\d{11}$" title="请输入11位数字" name="phone"><br>
		
		/*url类型用于匹配url，要求输入须为http://或https://开头*/
		url----<input type="url" name="url"><br>

		/*email类型要求输入必须是邮箱格式，使用required属性则要求必填，multiple属性则允许输入多个，输入多个时使用西文字符,分割*/
		email----<input type="email" multiple="true" required name="email"><br>

		/*datetime类型貌似各浏览器暂不支持，按照H5规范应该是输入时间日期类型，可以自己写个正则去验证*/
		datetime----<input type="datetime" name="datetime" title="请填写日期时间格式" pattern="^\d+-\d+-\d+ \d+:\d+:\d+$"><br>

		/*date类型要求输入年月日，不用使用插件，可以调用出选择年月日的面板*/
		date----<input type="date" name="date"><br>

		/*month类型要求输入年月，同上*/
		month----<input type="month" name="month"><br>
		
		/*week类型要求输入X年第X周，同上*/
		week----<input type="week" name="week"><br>

		/*time类型要求输入X时X分，同上*/
		time----<input type="time" name="time"><br>
		
		/*number类型要求输入整数，用min和max控制大小，step控制“跳数”*/
		number-----<input min="1" max="10" step="2" type="number" name="num"><br>

		/*range类型提供了一个滑动条，以step为跳数，max和min控制大小，根据匹配的output标签的id来控制默认的大小，看下面的图就明白了*/
		range----<input type="range" onchange="ttt.value=value" name="range" max="100" min="0" step="5">
		<output id="ttt">50</output><br>

		/*color类型要求输入颜色，会自动调用颜色选择窗，很方便*/
		color----<input type="color" name="color"><br>

		/*file类型可以使用multiple控制是否选择多个，accept控制选择的文件类型*/
		file----<input type="file" multiple accept="image/*" name="file"><br>

		<input type="submit" value="提交">
	</form>
</body>
</html>



这些新增的input类型在chrome和opera浏览器里支持得比较好，但是各浏览器表现出来可能各有差异。这些类型大部分时为移动端服务等 像这些input 验证 在小屏幕终端 就能直接呼出不同的键盘，提交表单前验证节省流量

另外：form标签还有一个属性：formnovalidate。使用该属性可以取消该表单里的所有验证，个人感觉没什么用。在H5规范里input标签里有个novalidate属性，可以单独地取消某个input的验证，然后各浏览器并不支持，移动端现在也不支持，当初w3c写在了H5的规则里希望能有这种属性，可能以后会支持吧，个人感觉好像没什么卵用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航