input的属性

Posted 2021-03-20 luchengx

让标签内的元素变为可编辑 兼容问题用的很少
<div contenteditable="true"> 这个属性可继承

2、form中 autocomplete 设置成功提交过的数据，下一次有提示，一般会关闭这个功能
<form action="#" method="get" autocomplete="off" >

3、input 中的属性
1.placeholder 占位符
2.autofocus 获取焦点
3.<input type="date"> 日期
4.<input type="time"> 时间
5.<input type="week"> 周
6.<input type="datetime-local"> 所有时间的格式的集合
7.<!-- number chrome Safari IE 不支持 -->
8.<input type="number" max="18" min="6" step="3"> 验证number类型
9.<input type="email" name="em"> 验证邮箱
10.<input type="color" name="color"> 获取颜色
11.<input type="range" name="range" min="10" max="60">
12.<input type="url">
13.<!-- 在客户端没有任何区别 在手机上自动的切换到数字-->
14.<input type="tel" name="tel">
15.<!-- chorem支持 FireFox不支持 -->
16.<input type="search"> 搜索
17.<input type="submit" value="提交"> 提交

 

二、新曾的表单元素 类似下拉框
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<progress value="0.5"></progress>
<meter></meter>

三、表单的验证
<form action="" method="get">
<!-- required boolean属性 必须的 text search url pwd...-->
<input type="text" name="uname" required maxlength="9" minlength="3" min= "" step="1">
<!-- pattern 正则 可以省略 ^ $ -->
<input type="tel" name="utel" pattern="1[3578]d{9}">
<!-- 是否允许多个输入值 使用逗号分隔-->
<input type="email" multiple name="email">
<!-- image可以作为提交按钮来使用 -->
<input type="image" src="imgs/login.png" alt="Submit" width="100" height="100">
<!-- <input type="submit" value="submit"> -->
</form>

 

四、validity 每一个标签的js对象中都 添加这个属性，标识用户输入的有效性

通过节点来获取validity内容，elem.validity
badInput:false 无效输入
customError:false 是否有自定义错误
patternMismatch:false 是否不符合正则表达式
rangeOverflow:false 输入的数字是否不满足max
rangeUnderflow:false 输入的数字都不满足min
stepMismatch:false 步长不匹配
tooLong:false 输入的内容不满足maxlength
tooShort:false 输入的内容不满足minlength
typeMismatch:false 类型不匹配
valid:true 输入是否有效
valueMissing:false 值是否缺失