html5中form控件和表单属性的使用方法

发布时间:2022-02-21 10:33:12 作者:iii
来源:亿速云 阅读:189

这篇“html5中form控件和表单属性的使用方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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

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

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

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

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

我设置的正则是1-5数字,如果不是就提交失败

以上就是关于“html5中form控件和表单属性的使用方法”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. 如何使用html表单form中的常用属性
  2. HTML5中form表单标签使用方法

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

html5 form

上一篇:html如何输入多个空格符号

下一篇:HTML5中的postMessage手册如何使用

相关阅读

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

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