html5新增表单属性
时间：6年前 阅读：4347
1、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--给下面range加个js效果试试-->
<script type="text/javascript">
window.onload = function(){
var ttyy =
document.getElementById("ttyy");
// 给滑块加鼠标移动事件
ttyy.onmousemove = function(){
// 获得滑块的值,写入到title中：拉动浏览器上方会显示值的数字
document.title = ttyy.value;
}
// 给颜色面板绑定onchange事件
document.getElementById("yanse").onchange = function(){
alert(this.value);
}
}
</script>
</head>
<body>
<!--表单放在form里面的-->
<form action="hd.php">
用户名：<input type="text" />
<br /><br />
密码：<input type="password" />
<br /><br />
<!--html5新加的邮箱-->
邮箱：<input type="email" />
<br /><br />
网址：<input type="url" />
<br /><br />
<!--类似购物加商量数量的东西，number数量; 号码; 数字;-->
<!--限制min最小是1，max最大20， step每次数字变化是3 value默认值是1开始-->
<input type="number" min="1" max="20" step="3" value="1"/>
<br /><br />
<!--范围; 排列-->
<input type="range" min="0" max="20" step="2" value="4" id="ttyy"/>
<br /><br />
<input type="date" />
<br /><br />
<!--search这是html5语义化的标签 搜索框的新写法-->
<input type="search" />
<br /><br />
<!--选择颜色面版-->
<!--用上面的js来捉颜色-->
<input type="color" id="yanse"/>
<br /><br />
<input type="submit" />
</form>
</body>
</html>
上面代码效果图片：
2、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--类似百度搜索框输入的效果--> <!--意思是这个input标签要关联ID是dduu这个列表--> <input type="text" list="dduu"/> <!--datalist标签 加入这个在输入列表的时候有一个字相同(相关的关联词)就有提示作用--> <!--加个id="dduu"和列表相关起来--> <datalist id="dduu"> <option value="肇庆市">肇庆市</option> <option value="端州区">端州区</option> <option value="鼎湖区">鼎湖区</option> <option value="广宁县">广宁县</option> <option value="怀集县">怀集县</option> </datalist> <br /><br /> <!--autofocus 字面解释：自动聚集的，自动对光的;--> <!--autofocus标签 自动获取焦点（打开网页鼠标光标会自动出现在哪里的意思）--> <input type="text" /> <!--我想要光标自动在第二个input上显示，加个autofocus标签 来实现--> <!--autofocus="autofocus"这样也行 直接autofocus--> <input type="text" autofocus="autofocus" /> <br /><br /> <!--form属性 提交form标签外的表单--> <form action="" id="yyuu"> 用户名：<input type="text" /> 密码：<input type="password" /> <input type="submit" /> </form> <!--举例上面这个form以外的表单--> <!--上面的id="yyuu" 和下面的 form="yyuu" 相关联起来// 把下面的input指定属于上面的form表单的--> 邮箱：<input type="email" form="yyuu"/> <br /><br /> <!--传统的上传只能一次上传一个文件--> <input type="file" /> <br /><br /> <!--multiple 多重的; 多个的; 设置multiple后可以设置多个文件--> 多文件上传multiple属性 <input type="file" multiple/> <br /><br /> 表单提示placeholder <!--placeholder就是提示文字--> <input type="text" placeholder="请输入内容"/> <br /> <br /> <br /> <br /> <!--pattern 模式;花样--> 通过正则表达式验证表单 表单验证pattern属性 <form action=""> <!--required 必须的， 需要; 要求--> <input type="text" placeholder="表单内容不能为空" required/> <br /><br /> <input type="text" pattern="\d\d\d\d" /> <br /><br /> <!--pattern="\d\d\d\d"必须要有4个数字才能提交--> <input type="submit" /> </form> </body> </html>
上面代码效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论