<input>元素全部用法和属性

1.–单行文本输入框

最简单的元素用于单行输入

图片[1] - <input>元素全部用法和属性 - MaxSSL

2.type属性

2.1 type=”text”(默认)

2.2 type=”password”—-此时输入的内容会被小圆点代替,防止密码被偷窥.

图片[2] - <input>元素全部用法和属性 - MaxSSL

2.3 type=”number”—此时输入类容被限制为数字.

图片[3] - <input>元素全部用法和属性 - MaxSSL

2.4 type=”color”—此时input框成为了色块,可以调节各种颜色

图片[4] - <input>元素全部用法和属性 - MaxSSL

2.5 type=”button”—此时的input不是输入框,而是一个按钮

<!-- 效果类似,但是

图片[5] - <input>元素全部用法和属性 - MaxSSL

2.6 type=”checked”—此时的input不是输入框,而是多选框

图片[6] - <input>元素全部用法和属性 - MaxSSL

2.7 type=”radio”—此时input为单选框,选择一方,另外一方就会被取消选择.

男女

图片[7] - <input>元素全部用法和属性 - MaxSSL

2.8 type=”range”—此时input为范围区间条

图片[8] - <input>元素全部用法和属性 - MaxSSL

2.9 type=”file”,此时为文件选择器

图片[9] - <input>元素全部用法和属性 - MaxSSL

2.10type=”image”—此时用图片为提交按钮

图片[10] - <input>元素全部用法和属性 - MaxSSL

2.11 type=”data”—日期选择器

图片[11] - <input>元素全部用法和属性 - MaxSSL

2.12 type=”datetime-local”—与date类似具体到分钟

图片[12] - <input>元素全部用法和属性 - MaxSSL

2.13 type=”month”—用于年份和月份的显示

图片[13] - <input>元素全部用法和属性 - MaxSSL

2.14 type=”week”—用于周数显示

图片[14] - <input>元素全部用法和属性 - MaxSSL

2.15 type=”time”—用于时间的输入,分秒

图片[15] - <input>元素全部用法和属性 - MaxSSL

2.16 type=”email” 和 type=”submit”—email,submit与表单元素配合验证邮箱是否正确.

submit单独没有意义,通常与元素配合使用,我们后面会讲到.

图片[16] - <input>元素全部用法和属性 - MaxSSL

2.17 type=”reset”与submit与元素使用

value为input的值显示在input框内

reset是将表单重置为初始值

submit是提交表单

用户名: 密码: 

图片[17] - <input>元素全部用法和属性 - MaxSSL

3.placeholder—占位字符

当输入框为空的时候,内部显示,提示用户输入

图片[18] - <input>元素全部用法和属性 - MaxSSL

当有value时会覆盖placeholder

图片[19] - <input>元素全部用法和属性 - MaxSSL

4.autofocus—自动聚焦

当打开网页时,鼠标光标自动进入输入框中,不要点击输入框再输入了

图片[20] - <input>元素全部用法和属性 - MaxSSL

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享