<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> 用户名：<input type="text" name="userName"> <br><br> 密码：<input type="password" name="userPwd"> <br><br> <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交--> 邮箱：<input type="email"> <br><br> <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看--> 电话：<input type="tel"> <br><br> <!--验证只能输入合法的网址：必须包含http://--> 网址：<input type="url"> <br><br> <!--number：只能输入数字(包含小数点)，不能输入其它的字符 max:最大值 min:最小值 value:默认值--> 数量：<input type="number" value="60" max="100" min="0"> <br><br> <!--search：可以提供更人性化的输入体验--> 请输入商品名称：<input type="search"> <br><br> <!--range:范围--> 范围：<input type="range" max="100" min="0" value="5"> <br><br> 颜色：<input type="color"> <br><br> <!--日期时间相关--> <!--time:时间：时分秒--> 时间：<input type="time"> <br><br> <!--date：日期：年月日--> 日期：<input type="date"> <br><br> <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器--> 日期时间：<input type="datetime"><br><br> <!--datetime-local:日期和时间--> 日期时间：<input type="datetime-local"> <br><br> 月份：<input type="month"> <br><br> 星期：<input type="week"> <!--提交--> <input type="submit"> <form action="" id="myForm"><br><br> <!--placeholder：提示文本，提示占位--> <!--autofocus:自动获取焦点--> <!--autocomplete:自动完成：on:打开 off:关闭 1.必须成功提交过:提交过才会记录 2.当前添加autocomplete的元素必须有name属性--> 用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br><br> <!--tel并不会实现验证，仅仅是在移动端能够弹出数字键盘--> <!--required:必须输入，如果没有输入则会阻止当前数据提交--> <!--pattern:正则表达式验证 *:代表任意个 ?:代表0个或1个 +：代表1个或多个--> 手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br><br> <!--multiple：可以选择多个文件--> 文件：<input type="file" name="photo" multiple> <br><br> <!--email:有默认验证 在email中，multiple允许输入多个邮箱地址，以逗号分隔--> 邮箱：<input type="email" name="email" multiple><br><br> <!--提交：--> <input type="submit"> <br><br> </form> <!--下面这个表单元素并没有包含在form中：默认情况下面表单元素的数据不会进行提交--> <!--form:指定表单id,那么在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据一起提交--> 地址：<input type="text" name="address" form="myForm"> </form> </body> </html>
H5新添加的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> 用户名：<input type="text" name="userName" id="userName"><br> 电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br> <input type="submit"> </form> <script> /*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/ document.getElementById("userName").oninput=function(){ console.log("oninput:"+this.value); } /*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/ document.getElementById("userName").onkeyup=function(){ console.log("onkeyup:"+this.value); } /*oninvalid:当验证不通过时触发*/ document.getElementById("userPhone").oninvalid=function(){ /*设置默认的提示信息*/ this.setCustomValidity("请输入合法的11位手机号"); } </script> </body> </html>