<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
用户名:<input type="text" /><br>
密码:<input type="password" /><br>
邮箱:<input type="email" /><br><!--提供了默认的电子邮箱的完整验证,提交时验证,必须包含@必须包含域名,如果不能满足验证则会阻止当前的数据提交-->
电话:<input type="tel" /><br> <!--目的在移动端切换到数字键盘,意味着数字键盘限制了用户只能输入数字-->
网址:<input type="url" /><br> <!--提供了验证只能输入合法网址验证 必须包含http://-->
数字:<input type="number" value="10" max="20" min="0" /><br><!-- 只能输入数字(包含小数点)不能输入其他字符 value默认值max最大值min最小值-->
请输入商品名称:<input type="search" /><br><!--人性化的输入体验,右边可以删除,可删除全部-->
范围:<input type="range" max="100" min="0" value="50"/><br><!--max min value不写默认也是50-->
颜色:<input type="color" /><br><!--value值就是其颜色 可以选择颜色 可以通过js获取该value值为该颜色-->
时间:<input type="time" /><br><!--时分秒-->
日期:<input type="date" /><br>
<!--年月日 datetime大多浏览器不支持-->
<!--年月日时分秒-->
日期时间:<input type="datetime-local" /><br>
月:<input type="month" /><br>
<!---->
周:<input type="week" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>
H5新增表单type属性
猜你喜欢
转载自blog.csdn.net/weixin_43727391/article/details/84197381
今日推荐
周排行