最后
由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容
input 属性 - formnovalidate 属性
formnvalidate 属性覆盖 元素的 novalidate 属性。
- 注意:formnvalidate 属性可以与 type = “submit” 配合使用。表单的提交方式:
formnvalidate 实现控件的表单不需要验证,添加在 submit 中,而不是添加在 input 中。
input 类型
表单输入类型
-
month(月份) week(周) date (日期) datetime(日期+时间) datetime-local(本地时间和日期) time(时间)
-
color (颜色) number (数字) range(范围)
-
tel (电话) search(查询搜索) url(浏览器访问URL)
主要是给移动端提供,在PC端效果并不是很出色,很有代表性。
表单输入类型
通常用在页面的表单元素 中,用来接收用户输入的子元素。
在HTML5中,新增了多种输入类型的子元素,提供了更好的输入控制和验证。
输入类型的分类
color 基本使用方法
color 类型用于选取颜色,使用语法如下:
可以通过 color 元素的 value 属性获取用户选择的颜色值
-
var c = document.getElementById(“colorId”);
-
document.body.style.backgroundColor = c.value; // 修改界面的背景颜色
-
早期颜色的定义:
- RGB
2.英文单词
3.十六进制数
案例代码:
submit
number 基本使用方法
数字类型只能接受数字值
number 类型用于数值的输入域,还能够设定对数字的限定。
-
number 常见属性
max :规定允许的最大值。
min : 规定允许的最小值。
step : 规定输入字段的合法数字间隔,递增或者递减的步长。
value: 规定输入字段的默认值。
range 基本使用方法
range 类型用于应该包含一定范围内数字值得输入域,显示为滑动条。
-
range 常见属性
max :最大值
min :最小值
value :默认值
step :数字间隔
小案例:
submit
上面代码在点击提交按钮后才会显示数字值,十分的不友好,那么下面对上面的代码进行优化,使操作变得更加人性化。
search 基本使用方法
search 类型用于搜索域,比如站点搜索或Google搜索。
search 类型通常用于移动端设备上显示比较友好,如下图:
< input type=“search” >
submit
tel 基本使用方法
tel 类型用于输入电话号码。
tel 类型通常在移动端设备上显示比较好,如图所示:
< input type = “tel” >
url 基本使用方法
url 类型用于包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
< input type = “url” >
日期输入类型的使用方法
month:选择月份。
week:选择周和年。
date:选择日期。
datatime:选择日期时间。
- Safari 和 Opera 支持
datetime-local:选择贝蒂日期时间。
time:选择时间。
案例代码(感受一下)
HTML5 表单验证
ValidateState 对象
html5 引入了用于验证表单控件的方法。
可以通过表单控件来访问 ValidateState 对象。
-
var check = document.myForm.myInput.validity
-
check.valid 属性来判断验证是否完全通过。
案例代码:
check
验证约束条件
1、valueMissing
目的:确保表单控件中的值已填写。
用法:在表单中将 required 特性设置为 true。
示例:
< input type = “text” name = “myText” required >
check
2、typeMismatch
目的:保证控件值和预期类型相匹配(如:number、email、url 等)。
用法:指定表单控件的 type 特性值。
示例:
check
3、patternMismatch
目的:根据表单控件上设置的格式规则验证输入是否为有效格式。
用法:在表单控件上设置 pattern 特性,并且赋予适当的匹配规则。
示例:
<input type = “text” name = “creditcardnumber” pattern=“[0-9]{16}”
title = “A credit card number is 16 djgjts with no spaces or dashes” >
<input type=“text” name=“stuNo”
title=“网址格式不正确”
pattern=“[a-zA-z]+://[^\s]*”>
check
4、toolong
目的:避免输入的值包含过多字符串。
用法:在表单控件上设置 maxlength 特性。
示例:
< input type=“text” name=“limitesText” maxLength = “140” >
check
5、rangeUnderflow
目的:限制数值型控件的最小值。
用法: 为表单控件设置 min 特性,并且赋予最小值。
示例:
< input type = “range” name=“ageCheck” min=“18” >
check
6、rangeOverflow
目的:限制数值型控件的最大值。
用法: 为表单控件设置 max 特性,并且赋予最大值。
示例:
< input type = “range” name=“ageCheck” max=“20” >
7、stepMismatch
目的:确保输入值符合 min、max 及 step 即设置。
用法: 为表单控件设置 step 特性,并且指定数值的增量。
示例:
< input type = “range” name=“level” min=“10” max=“20” step=“2”>
8、customError
目的:处理应用代码明确设置及计算产生的错误。
用法:调用 setCustomValidity(message) 将表单控件置于 customError 状态。
示例:
input.setCustomValidity(“自定义错误”)
要清除错误,只需要在控件上吊用 setCustomValidity(“”) 即可。
submit
HTML5 表单元素和属性小结
学习内容汇总
1、表单元素
2、表单属性
3、输入类型
4、表单验证
表单元素
表单元素简介
总结
- 对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说,人嘛都会有苦恼的~
祝大家都有美好的未来,拿下满意的 offer。
ity(“邮件格式不正确!!!”);
return;
}
document.frm.email.setCustomValidity(“”);
}
HTML5 表单元素和属性小结
学习内容汇总
1、表单元素
2、表单属性
3、输入类型
4、表单验证
表单元素
表单元素简介
总结
- 对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说,人嘛都会有苦恼的~
祝大家都有美好的未来,拿下满意的 offer。