HTML基础各种input输入标签总结

• 单行文本输入框

<input type="text" value="文本"/>

• 密码输入框

<input type="password" value="111111"/>

• 普通按钮

<input type="button" value="普通按钮">

• 单选框

<input type="radio" checked/>男

• 复选框

<input type="checkbox" checked/>是否同意

• 提交按钮

<input type="submit" value="提交"/>

• 图片提交按钮

<input type="image" src="../1.jpg"/>

• 重置按钮

<input type="reset" value="取消"/>

• 隐藏域

<input type="hidden" value="隐藏值"/>

• 文件上传域

<input type="file" multiple/>

• email输入框

<input type="email"/>

• URL文本输入框

<input type="url"/>

• 电话文本输入框

<input type="tel"/>

• 关键词搜索文本框

<input type="search"/>

• 颜色设置文本框

<input type="color"/>

• 数字输入框

<input type="number" value="当前值" min="最小" max="最大" step="值得间隔"/>

• 滑动条

<input type="range" value="当前值" min="最小" max="最大" step="值得间隔"/>

日期和时间输入框

1. 日期输入框

<input type="date"/>

2. 月份输入框

<input type="month"/>

3. 星期输入框

<input type="week"/>

4. 时间输入框

<input type="time"/>

5. 时间和日期输入框

<input type="datetime-local"/>

input标签的其他属性

1. placeholder属性
   用于为输入框提供相关提示信息
2. required属性
   用于为form表单提交之前，输入框必须填入数据
3. pattern属性
   用于为输入框提供正则表达式验证
4. disabled属性
   用于为禁用输入框
5. autofocus属性
   用于页面加载后，输入框自动获得焦点

移动开发中meta标签的应用

1. 控制页面的缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

width：控制viewport的大小，device-width为设备的宽度
initial-scale：页面初始缩放程度，一个浮点值，是页面大小的一个乘数
maximum-scale：页面最大缩放程度
minimum-scale：页面最小缩放程度
user-scalable：用户是否能改变页面缩放程度，如果设置为yes，则允许用户对其进行改变；反之为no

2. iOS系统的一些控制

<!-- 强制全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置状态栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 设置添加至主屏标题 -->
<meta name="apple-mobile-web-app-title" content="标题"/>

3. 控制是否自动识别电话号码和Email

<meta name="format-detection" content="telphone=no,email=no" />

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

福利~ 福利~ 福利~ 1块钱一次帮下CSDN资料

添加微信，备注下载资料~所需下载CSDN资料链接可通过微信发送。