表单input标签type属性详解
⽬标：详解表单input标签type属性常⽤的属性值
⼀、input标签和它的type属性
PS：input 元素可以⽤来⽣成⼀个供⽤户输⼊数据的简单⽂本框。 在默认的情况下， 什么样的数据均可以输⼊。⽽通过不同的type属性值，可以限制输⼊的内容。
⼆、总结
1、text ⼀个单⾏⽂本框，默认属性值
2、password 隐藏字符的密码框
3、search 搜索框，在某些浏览器中输⼊内容会出现叉形标记
4、submit、reset、button 依次是：提交按钮、重置按钮、普通按钮
5、number、range 依次是：只能输⼊数值的框、只能输⼊在⼀个指定范围的数值框
6、checkbox、radio 依次是：复选框，⼀组复选框(name属性值相同)⽤户可以勾选多个、单选按钮，⼀组单选按钮(name属性值相同)⽤户只可以选中⼀个
7、image、color 依次是：图⽚按钮、颜⾊代码按钮
htmlradio设置默认的按钮8、email、tel、url 依次是：检测电⼦邮件、号码、⽹址的⽂本框
9、hidden ⽣成⼀个隐藏控件
10、file ⽣成⼀个上传控件
11、获取各种⽇期、时间 data、month、time、week、datetime、datatime-local
三、详解
1、type=”text”
1.1)、list 指定为⽂本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值
1.2)、maxlength 设置⽂本最⼤字符长度
1.3)、pattern ⽤于输⼊验证的正则表达式
1.4)、placeholder 输⼊提⽰的⽂本，当⽤户输⼊内容时会⾃动消失
1.5)、readonly ⽂本框处于只读状态
1.6)、disabled ⽂本框处于禁⽤状态
1.7)、size 设置⽂本框宽度
1.8)、value 设置⽂本框初始值，会显⽰在⽂本框中，显⽰时优先级⽐placeholder⾼，表单提交时优先提交⽤户输⼊的内容，如果⽤户没有输⼊则提交默认的值
1.9)、required 表⽰⽤户必须输⼊⼀个值，否则⽆法通过输⼊验证
2、type=”password”，和type=”text”时所拥的额外属性基本⼀致，少了⼀个list属性
3、type=”search” ， 和type=”text”所有⽤的额外属性值⼀致
4、当type为submit、reset、button，提交表单、重置表单、普通按钮
4.1)、如果是 submit 时，还提供了和元素⼀样的额外属性：formaction、formenctype、formmethod、formtarget 和formnovalidate。
5、当type为number、range时
5.1)、type=”number” 只能输⼊数字的⽂本框
5.2)、type=”range” ⽣成⼀个通过拖拽调节⼤⼩的调节器
额外属性：
5.3)、min 设置可接受的最⼩值
5.4)、max 设定可接受的最⼤值
5.5)、value 指定初始值
5.6)、step 指定上下调节值的步长
5.7)、required 表明⽤户必须输⼊⼀个值，否则⽆法通过输⼊验证
5.8)、readonly 设置⽂本框内容只读
6、当type为checkbox、radio
6.1)、不管type等于checkbox还是radio，都必须有属性name和value
6.2)、他们还有可选属性checked、required
PS：复选框和单选按钮都是以⼀组⼀组的形式存在，name值相同的即为⼀组，⼀组复选框可以同时选中⼏个，⽽⼀组单选按钮同时只能选中⼀个
<section>
<label for="c">C</label>            <input type="checkbox" id="c" name="hobby"value="c"/>
<label for="python">python</label>  <input type="checkbox" id="python" name="hobby"value="python"/>
<label for="java">java</label>      <input type="checkbox" id="java" name="hobby"value="java"/>
</section>
<section>
<label for="apple">apple</label>    <input type="checkbox" id="apple" name="eat"value="apple"/>
<label for="orange">orange</label>  <input type="checkbox" id="orange" name="eat"value="orange"/>
<label for="pear">pear</label>      <input type="checkbox" id="pear" name="eat"value="pear"/>
</section>
提交时数据格式：hobby=c&hobby=python&eat=orange&eat=pear
<section>
<label for="man">男</label><input type="radio"id="man"name="sex"value="man"/>
<label for="men">⼥</label><input type="radio"id="men"name="sex"value="men"/>
</section>
提交时数据格式：sex=man
7、当type为image、color
7.1)、当type=”image”时，功能上和type=”submit”⼀样，前者是⽤图⽚作为按钮，当然后者也可以达到同样的效果
额外属性：
7.2)、src 指定要显⽰图像的 URL
7.3)、alt 提供图⽚的⽂字说明，当图⽚不到时显⽰该⽂字
7.4)、width 图像的长度，注意这是标签属性，⽽不是样式属性
7.5)、height 图⽚的⾼度，注意事项如上
7.6)、提交时的额外属性 formaction、formenctype、formmethod、formtarget和 formnovalidate。
9、type=”hidden”
9.1)、⽣成⼀个隐藏控件，⼀般⽤于表单提交时关联主键 ID 提交，⽽这个数据作为隐藏存在
10、type=”file”
10.1)、⽣成⼀个⽂件上传控件，⽤于⽂件的上传。
额外属性：
10.2)、required 表明⽤户必须提供⼀个值，否则⽆法通过验证
10.3)、accept 指定接收的MIME类型　例如：accept=”image/gif, image/jpeg, image/png”
ＰＳ：当需要上传⽂件时，form标签的enctype属性必须设置为multipart/form-data
11、当type为data、month、time、week、datetime、datatime-local，因为各种原因还是⽤jquery等前端库写吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。