列举input中的type属性及说明.pdfVIP

列举input中的type属性及说明 1 ⼀、input标签和它的type属性 2 PS：input 元素可以⽤来⽣成⼀个供⽤户输⼊数据的简单⽂本框。在默认的情况下，什么样的数据均可以输⼊。⽽通过不同的type 3 4 ⼆、总结 5 1、text ⼀个单⾏⽂本框，默认属性值 6 2、password 隐藏字符的密码框 7 3、search 搜索框，在某些浏览器中输⼊内容会出现叉形标记 8 4、submit、reset、button 依次是：提交按钮、重置按钮、普通按钮 9 5、number、range 依次是：只能输⼊数值的框、只能输⼊在⼀个指定范围的数值框 10 6、checkbox、radio 依次是：复选框，⼀组复选框(name属性值相同)⽤户可以勾选多个、单选按钮，⼀组单选按钮(name属性值相同)⽤户只可以选中⼀个 11 7、image、color 依次是：图⽚按钮、颜⾊代码按钮 12 8、email、tel、url 依次是：检测电⼦邮件、号码、⽹址的⽂本框 13 9、hidden ⽣成⼀个隐藏控件 14 10、file ⽣成⼀个上传控件 15 11、获取各种⽇期、时间 data、month、time、week、datetime、datatime-local 16 17 三、详解 18 1、type=”text” 19 1.1)、list 指定为⽂本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值 20 1.2)、maxlength 设置⽂本最⼤字符长度 21 1.3)、pattern ⽤于输⼊验证的正则表达式 22 1.4)、placeholder 输⼊提⽰的⽂本，当⽤户输⼊内容时会⾃动消失 23 1.5)、readonly ⽂本框处于只读状态 24 1.6)、disabled ⽂本框处于禁⽤状态 25 1.7)、size 设置⽂本框宽度 26 1.8)、value 设置⽂本框初始值，会显⽰在⽂本框中，显⽰时优先级⽐placeholder⾼，表单提交时优先提交⽤户输⼊的内容，如果⽤户没有输⼊则 27 1.9)、required 表⽰⽤户必须输⼊⼀个值，否则⽆法通过输⼊验证 28 29 2、type=”password”，和type=”text”时所拥的额外属性基本⼀致，少了⼀个list属性 30 31 3、type=”search” ，和type=”text”所有⽤的额外属性值⼀致 32 33 4、当type为submit、reset、button，提交表单、重置表单、普通按钮 34 4.1)、如果是 submit 时，还提供了和元素⼀样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。 35 36 5、当type为number、range时 37 5.1)、type=”number” 只能输⼊数字的⽂本框 38 5.2)、type=”range” ⽣成⼀个通过拖拽调节⼤⼩的调节器 39 额外属性： 40 5.3)、min 设置可接受的最⼩值 41 5.4)、max 设定可接受的最⼤值 42 5.5)、value 指定初始值 43 5.6)、step 指定上下调节值的步长 44 5.7)、required 表明⽤户必须输⼊⼀个值，否则⽆法通过输⼊验证 45 5.8)、readonly 设置⽂本框内容只读 46 47 6、当type为checkbox、radio 48 6.1)、不管type等于checkbox还是radio，都必须有属性name和value 49 6.2)、他们还有可选属性checked、required 50 PS：复选框和单选按钮都是以⼀组⼀组的形式存在，name值相同的即为⼀组，⼀组复选框可以同时选中⼏个，⽽⼀组单选按钮同时只能选中⼀个 51 52 7、当type为image、color 53 7.1)、当type=”image”时，功能上和type=”submit”⼀样，前者是⽤图⽚作为按钮，当然后者也可以达到同样的效果 54 额外属性： 55 7.2)、src 指定要显⽰图像的 URL 56 7.3)、alt 提供图⽚的⽂字说明，当图⽚找不到时显⽰该⽂字 57 7.4)、width 图像的长度，注意这是标签属性，⽽不是样式属性 58 7.5)、height 图⽚的⾼度，注意事