前端学习(十三) 表单内容-input(html)

input

兼容性:https://caniuse.com/

文本输入,类型有以下

-hidden:隐藏我们要提交的字段,不会显示

-data/time/...:这个可以设置多个,大致显示就是一个日历显示,具体的type类型有,data(日期选择),mouth(仅月份选择),week(仅星期选择),time(时间选择器),datatime-local(日期和时间选择输入,包含:年,月,日,小时,分钟)

-text:单行文本输入,默认 

-secrch:搜索关键字输入,相比text多了个×

-file:文本选择器,可以通过设置accept属性,设置哪些文件可以看到,如:

<input type="file" accept="audio/*,video/*"  multiple>,允许看到视频文件和音频文件,也可以通过加入multiple设置是否多选

-tel:电话号码输入,数字,假如要对手机号作出一些限制,可以通过pattern属性,例如:

<input type="tel" pattern="[\\d]{11}">,示例限制了号码为11位

扫描二维码关注公众号,回复: 1795755 查看本文章

-radio:单选

-url:单个url的绝对路径(RFC3996),必须包含http或者https

-color:颜色输入控件

-email:邮箱地址输入,支持多个邮箱地址输入,多个地址输入用“,”分割,需要在input加入multiple属性,如:

<input type="email" multiple>

-range:范围选择控件

-number:数字输入框,如数字,小数点

-checkbox:多选

-password:密码输入框


<input type="reset" value="重置">等同于<button type="reset">重置</button>

<input type="submit" value="提交">等同于<button type="reset">提交</button>

<input type="button" value="取消">等同于<button>取消</button>


思考练习

文件选择器美化

猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80724896