html5——表单
type类型
email //输入email格式 tel //手机号码 url //只能输入url格式 number //只能输入数字 search //搜索框 range //范围 滑动条 color //拾色器 time //时间 date //日期不是绝对的 datetime //时间日期 month //月份 week //星期 //部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
表单元素
1、<datalist>数据列表与input标签使用
2、<keygen>生成加密字符串,谷歌没有效果
3、<output>元素用于不同类型的输出,比如计算或脚本输出
4、<meter>表示度量器,不建议用作进度条
5、<progress>进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> form { width: 100%; max-width: 400px; min-width: 200px; margin: 100px auto; } input { width: 100%; margin-top: 10px; } meter, progress { width: 100%; } </style> </head> <body> <form action=""> <fieldset> <legend>表头</legend> <label for="sport">爱好:</label> <input type="text" list="hobby" name="hobby" id="sport"> <datalist id="hobby"> <option value="篮球"></option> <option value="足球"></option> <option value="羽毛球"></option> <option value="排球"></option> </datalist> <br><br> <label for="me">度量器:</label> <meter min="0" max="100" low="20" high="80" value="60" id="me"></meter> <br><br> <label for="pro">进度条:</label> <progress min="0" max="100" low="20" high="80" value="60" id="pro"></progress> </fieldset> </form> </body> </html>
表单属性
placeholder //占位符 autofocus //获取焦点 multiple //文件上传多选或多个邮箱地址 autocomplete //自动完成,用于表单元素,也可用于表单自身(on/off) form //指定表单项属于哪个form,处理复杂表单时会需要 novalidate //关闭验证,可用于<form>标签,谷歌没有效果 required //必填项 pattern //正则表达式 验证表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> form { width: 100%; max-width: 400px; min-width: 200px; margin: 100px auto; } input { width: 100%; margin-top: 10px; } meter, progress { width: 100%; } </style> </head> <body> <form action="" id="form"> <fieldset> <legend>表头</legend> <label for="sport">placeholder:</label> <input type="text" name="hobby" id="sport" placeholder="请输入您的兴趣爱好"> <br><br> <label for="com">autocomplete:</label> <input type="text" name="com" id="com" autocomplete="on"> <br><br> <label for="firstName">autofocus:</label> <input type="email" name="firstName" id="firstName" autofocus> <br><br> <label for="file">multiple :</label> <input type="file" name="file" id="file" multiple> <br><br> <label for="nova">novalidate :</label> <input type="email" name="novalidate " id="nova" novalidate> <br><br> <label for="re">required :</label> <input type="text" name="re" id="re" required> <br><br> <label for="pa">pattern :</label> <input type="tel" name="pa" id="pa" pattern="1\d{3}"> <br><br> <input type="submit" value="提交"> </fieldset> </form> <label for="other">表单外的一个input标签</label><input type="text" name="other" id="other" form="form"> </body> </html>
autocomplete:是带有name属性的input标签提交后,再次提交会触发事件,off会关闭自动显示历史输入的值 ,on会显示
form:表单外的input标签会随着表单提交
表单事件
oninput:用户输入内容时触发,可用于移动端输入字数统计
oninvalid:当验证不通过时触发
setCustomValidity:可获取验证错误信息并且自定义值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> form { width: 100%; max-width: 400px; min-width: 200px; margin: 100px auto; } input { width: 100%; margin-top: 10px; } meter, progress { width: 100%; } </style> </head> <body> <form action="" id="form"> <fieldset> <legend>表头</legend> <label for="acount">账号:</label> <input type="text" name="acount" id="acount"> <br><br> <label for="em">email:</label> <input type="email" name="em" id="em"> <br><br> <input type="submit" value="提交"> </fieldset> </form> <script> var inpArr = document.getElementsByTagName("input"); inpArr[0].oninput = function () { console.log(this.value.length); } inpArr[1].oninvalid = function () { this.setCustomValidity("邮箱都能写错啊!天才"); } </script> </body> </html>