如何在HTML5中使用form控件和表单属性

发布时间:2021-06-08 15:36:27 作者:Leah
来源:亿速云 阅读:173

如何在HTML5中使用form控件和表单属性?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

第一个知识点:

我们常见的表单验证有哪些呢

  text  文本框标签

  password 密码框

  checkbox 多选框

  radio  单选框

  button  按钮

  submit  提交按钮

如何在HTML5中使用form控件和表单属性

以上是我们常用的一些form属性

第二个知识点:H5新的输入型控件

  (一)email:电子邮箱文本框,跟普通的没什么区别

  1.当输入不是邮箱的时候,验证不通过

  2.移动端键盘会有变化

如何在HTML5中使用form控件和表单属性

  (二)tel:电话号码

  1.主要在移动端,一个键盘的切换

如何在HTML5中使用form控件和表单属性

  (三)url:网页的URL

  如何在HTML5中使用form控件和表单属性

输入正确的网址

  (四)sear:搜索引擎

  1.chrome下输入文字后,会多出一个关闭的x

如何在HTML5中使用form控件和表单属性

  (五)range:特定范围内的数值选择器

  1.min、max、step(步数)

  2.例子:用js来显示当前数值

  如何在HTML5中使用form控件和表单属性

  (六)number:只能包含数字的输入框

如何在HTML5中使用form控件和表单属性

  (七)color:颜色选择器

  如何在HTML5中使用form控件和表单属性

  (八)detetime显示完整日期

如何在HTML5中使用form控件和表单属性

  (九)autocomplete:是否保存用户输入值

  默人为on,关闭提示选择off

  (十):指定表单获取输入焦点

  如何在HTML5中使用form控件和表单属性

  (十一):此项必填,不能为空

如何在HTML5中使用form控件和表单属性

如果只写第一个输入框,第二个输入框就会弹出“请填写此字段”

  (十二)parrern:正则验证 pattrn="\d{1,5}"

如何在HTML5中使用form控件和表单属性

看完上述内容,你们掌握如何在HTML5中使用form控件和表单属性的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 如何使用html表单form中的常用属性
  2. HTML5属性:form表单属性怎么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5 form

上一篇:怎么在HTML5中播放 RTSP 视频

下一篇:如何优化shell性能测试脚本

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》