html5新增表单属性
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,我们将及时处理。
微信扫码关注
更新实时通知