email: 提交表单时检测值是否是一个电子邮件格式 url: 提交表单时检测值是否是一个url格式 date: 年-月-日格式的控件 time: 时:分格式的控件 datetime: 年-月-日 时:分 格式的控件（UTC时间） datetime-local: 年-月-日 时:分 格式的控件（本地时间） month: 年-月格式的控件 week: 年-周数格式的控件 number: 数字输入框 <input type="number" name="" id="" value="60" max="100" min="0" /> range: 选择区域 <input type="range" name="" id="" value="60" max="100" min="0" /> tel: 电话输入框 search: 用于搜索 color: 调用系统选色器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> 文本框：<input type="text" id="" value="" /><br> 密码框：<input type="password" id="" value="" /><br> <!-------------------------下面都是h5新增控件----------------------------------> 数字框：<input type="number" id="" value="" /><br> 邮件框：<input type="email" id="" value="" /><br> 网址框：<input type="url" id="" value="" /><br> 电话框：<input type="tel" id="" value="" /><br> 搜索框：<input type="search" id="" value="" /><br> 拾色器：<input type="color" id="" value="" /><br> 选择区：<input type="range" id="" value="100" max='100' min='0'/><br> <!--------------------------下面是日期控件---------------------------------------> <input type="date" id="" value="" /><br> <input type="time" id="" value="" /><br> <input type="datetime-local" id="" value="" /><br> <input type="datetime" id="" value="" /><br> <input type="month" id="" value="" /><br> <input type="week" id="" value="" /><br> <input type="submit" value="提交"/> </form> </body> </html>placeholder: 占位符，输入框提示信息 <input type="text" autofocus placeholder=''/> required: 该input为必填项 autofocus: 在页面加载时，域自动地获得焦点 autocomplete="off/on":可以记录输入信息 必须有name属性 必须提交过 off==>关闭 on==>打开 <input type="tel" name="user" id="" value="" autocomplete="on"/> pattern: 正则验证 <input type="tel" pattern="[0-9]{7,12}"/> min/max: input能输入的最小/最大字节的长度 step: 针对number和range类型，每次递增step的值 list: 指定一个datalist，作为下拉提示单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <!--文本框：<input type="text" id="" value="" placeholder="" autofocus autocomplete="on" name="user"/><br> 密码框：<input type="password" id="" value="" required/><br> 数字框：<input type="number" id="" value="" /><br>--> <!------------------------------------------------------> <!--密码框：<input type="text" id="" value="" pattern="^[a-z0-9_-]{6,18}$"/><br>--> <!--电话框：<input type="tel" pattern="[0-9]{7,12}"/>--> <!--文本框：<input type="text" id="" value="" maxlength='8'/><br>--> <!--输入的数字必须是8以下，3以上--> <!--数字框：<input type="number" id="" value="" min="3" max="8" />--> 区域：<input type="range" id="" value="" min="0" max="100" step="10"/> <input type="submit" value="提交"/> </form> </body> </html>