HTML input 标签

required 属性 required属性规定必需在提交表单之前填写输入字段。


<!-- 此输入框为必填-->
<input type="text" required>

list 属性 属性引用 datalist 元素，其中包含 input 元素的预定义选项。


<input list="city">
<datalist id="city">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
<option value="杭州">
</datalist>

maxlength 属性 属性规定 input 元素中允许的最大字符数。


 <!-- 只允许输入3个字符 -->
<input type="text" name="usrname" maxlength="3">

max min 属性 属性规定 input 元素的最大和最小值。


<!-- 最大值为10 -->
<input type="number" max="10" required>
<!-- 最小值为10 -->
<input type="number" min="10" required>
<!-- 1到10之间的数字 -->
<input type="number" min="1" max="10" required>

multiple 属性 可接受多个值的文件上传字段


<!-- 按住Ctrl，可选择上传多个文件 -->
<input type="file" multiple required>

pattern 属性 pattern 属性规定用于验证 input 元素的值的正则表达式。


<!-- 用pattern属性限制只能输入字母 -->
<input type="text" pattern="^[a-zA-Z]+$" title="只能输入字母" required>

step 属性 step 属性规定 input 元素的合法数字间隔。


<!-- 只能输入能被5整除的数字 -->
<input type="number" step="5" required>

src alt 属性规定 input按钮用图片展示


<!-- src的值可以是图片链接或者base64 -->
<input type="image" src="data:image/png;base64">

placeholder 属性 placeholder 属性规定可描述输入 input 字段预期值的简短的提示信息。


<!-- 带有 placeholder 文本的输入字段 -->
<input type="text" placeholder="请输入你的文本">

<!-- placeholder 文本也可以指定颜色 -->
<style type="text/css">	
#color::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#f00;
}
#color::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#f00;
}
#color:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#f00;
}
</style>
<input id="color" type="text" placeholder="请输入你的文本">

type 属性 在HTML5中，type有了更多丰富的控件类型让我们使用

color 拾色器


<!-- 拾色器 -->
<input type="color">

date 日期控件


<!-- 日期控件 -->
<input type="date">

month 年月控件


<!-- 定义 month 和 year 控件（不带时区） -->
<input type="month">

time 时间控件


<!-- 定义用于输入时间的控件（不带时区） -->
<input type="time">

week 周控件


<!-- 定义 week 和 year 控件（不带时区） -->
<input type="week">

datetime-local 带时间的日期控件


<!-- date 和 time 控件（不带时区） -->
<input type="datetime-local">

email 定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）


<!-- 输入的必须是邮箱格式 -->
<input type="email" required>

number 数字


<!-- 输入的必须是数字 -->
<input type="number">

password 密码


<!-- 输入密码控件 -->
<input type="password">

range 范围取值


<!-- 选择1到10的范围 -->
<input type="range" min="1" max="10">

tel 电话


<!-- 输入的值必须是电话号码 -->
<input type="tel">

url 链接


<!-- 输入的值必须是链接 -->
<input type="url" required>