H5表单input标签新增type

匿名 (未验证) 提交于 2019-12-02 23:32:01

示例代码:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <form action="">     <!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交-->     邮箱:<input type="email"> <br>     <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果:qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->     电话:<input type="tel"> <br>     <!--验证只能输入合法的网址:必须包含http://-->     网址:<input type="url"> <br>     <!--number:只能输入数字(包含小数点),不能输入其它的字符     max:最大值     min:最小值     value:默认值-->     数量:<input type="number" value="60" max="100" min="0"> <br>     <!--search:可以提供更人性化的输入体验-->     请输入商品名称:<input type="search"> <br>     <!--range:范围-->     范围:<input type="range" max="100" min="0" value="50"> <br>     颜色:<input type="color"> <br>     <!--日期时间相关-->     <!--time:时间:时分秒-->     时间:<input type="time"> <br>     <!--date:日期:年月日-->     日期:<input type="date"> <br>     <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->     日期时间:<input type="datetime"><br>     <!--datetime-local:日期和时间-->     日期时间:<input type="datetime-local"> <br>     月份:<input type="month"> <br>     星期:<input type="week">     <!--提交-->     <input type="submit"> </form> </body> </html>

补充:邮箱验证及其他验证,当input标签上有required属性时浏览器才会在表单提交前自动执行验证

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!