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位
-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>
思考练习
文件选择器美化