<input type=" ">
HTML5之前已有的input type:
text、password、radio、checkbox、file、submit、reset、button、image、hidden
HTML5新增的input type:
1.Email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示矿口(可定制内容不能定制样式)
<input type="email">
2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口
<input type="url">
3.number:数字输入域,在表单提交时提供简单的数字格式验证,并弹出一个提示窗口
<input type="number" min="" max="" step="">
4.tel:电话号码输入域,在手机浏览器中弹出数字键盘
<input type="tel">
5.search:搜索输入域,在手机浏览器中右下角呈现搜索按键
<input type="search">
6.range:范围选择控件,帮助用户在一定范围内选择一个数字
<input type="range" min="" max="" step="">
(7)color:颜色选择控件,浏览器并未自己实现颜色选择框,而是使用操作系统自带的颜色选择控件
<input type="color">
(8)date:日期选择控件,FF没有实现,推荐使用第三方插件代替,如jqueryUI-datepicker、laydate等
<input type="date">
(9)month:月份选择控件,FF没有实现
<input type="month">
(10)week:星期选择控件,FF没有实现
<input type="week">
2.HTML5新特性之表单新特性——新的表单元素
HTML5之前FORM可以有的标签——用于数据提交:INPUT、TEXTAREA、SELECT/OPTION、BUTTON
3.HTML5新增表单元素——用于信息提示,不能用于数据提交:
(1)datalist:数据列表,配合option使用,本身为不可见元素,为普通的input提供输入建议列表
<datalist id="l"><option>XXX</option></datalist>
<input type="text" list="l">
(2)progress:进度条,未指定value属性则显示为“进行中”样式;若指定了value(默认在0~1之间)就可以控制其显示的进度
<progress value="0.5"></progress>
(3)meter:刻度尺/度量衡,用红黄绿三色表示出一个数值所处的范围:不可接受/可以接受/最优范围
<meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值"></meter>
(4)output:输出,用于描述表单中的计算结果,语义标签,样式与SPAN无异。
<output>xxx</output>
HTML5之前表单元素可用的属性:id、class、title、style、type、name、value、checked、selected、disabled、readonly
HTML5之前表单元素新增的属性:
(1)autocomplete:on/off,自动补全,是否自动记录之前提交的数据,以用于下一次输入建议
<input autocomplete="off">
(2)placeholder:站位符,用于在输入框中显示提示性文字,与value不同,不能被提交
<input placeholder="提示性文字">
(3)autofocus:false/true,自动获得输入焦点
<input autofocus>
(4)multiple:false/true,是否允许多个输入值,若声明了该属性,输入框中(如email)就允许输入用逗号分隔的多个值
<input type="email" multiple>
(5)form:为一个元素指定form属性,值为某个表单的ID,则此输入域可以放到表单的外部
<form id="f"></form>
<input form="f">
========上述五个属性是新的通用属性===========
=======上述六个属性是输入验证相关属性========
(6)required:false/true,必需的/必填项,在表单提交时会验证是否有输入,没有输入则弹出提示消息
<input required>
(7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数
<input maxlength="9">
(8)minlength:最小长度,在有输入的情况下,限定输入域中字符的个数,不是HTML5标准属性,仅部分浏览器支持(如Chrome)
<input minlength="6">
(9)min:限定输入的数字的最小值
<input min="">
(10)max:限定输入的数字的最大值
<input max="">
(11)step:限定输入的数字的步长,与min属性连用
<input step="">
(12)pattern:指定一个正则表达式,对输入进行验证
<input pattern="1[3578]\d{9}">
注意:上述正则表达式可以省略^和$
input标签主要用于Web表单的创建交互,以便接受来自用户的数据。 我们通过更改type属性的值,来实现不同的输入类型。这篇文章主要讲解html5中新增的表单属性。
使用ajax方式进行验证某个元素的值(只是验证元素的值,而不是ajax方式提交表单),默认会提交当前验证的值到请求的地址,如果要提交其它的值,可以使用data选项。
vee-validate基于vue2的表单验证组件,这篇文章主要讲解它的安装,引用,基础使用,内置的校验规则,自定义校验规则。Validator是以$validator被组件自动注入到Vue实例的,同时也可以独立的进行调用
input是我们接受来自用户的数据常用标签,在前端开发中:移动端底部input被弹出的键盘遮挡。控制input显/隐密码。在input中输入emoji表情导致请求失败。input多行输入显示换行。输入框首尾清除空格-trim()、在input中监听键盘事件
input输入限制只能为数字的2种方法,通过onkeypress事件和onkeyup事件,输不上任何非数字字符。加上正则匹配不能输入非数字字符就可以了
input,textarea限制字数,实时绑定的方式:1.在input 或 textarea中加属性 、 2.js判断,拓展: 实时绑定功能:二种输入标签的实时绑定方式 。 需求:框后面有显示字数
使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母,使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应,使用 oninput 事件,完美的解决了以上两种问题
在项目开发期间发现谷歌浏览器有记住密码的功能,该功能有个问题就是一遇到input type=password就开始自动填充,同一个账户还好,就是bug了。找了一堆解决方案终于找到了办法,下面分享一下解决方案。
在HTML中,<form></form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。每个表单元素开始于form元素,可以包含所有的表单控件
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验。onsubmit指定的方法返回true,则提交数据;返回false不提交数据。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!