Z
ZHANK
表单

输入类型大全

text/password/email/number/date/color/range/checkbox/radio/file 等 20+ 类型

输入类型

HTML5 提供了 20+ 种 input 类型——浏览器内置了格式校验和不同的输入界面。

学完本章你将: 掌握 text/password/email/number/date/checkbox/radio/file 等类型。


文本类

html
<input type="text" placeholder="普通文本">
<input type="password" placeholder="密码(隐藏输入)">
<input type="email" placeholder="邮箱(自动校验格式)">
<input type="url" placeholder="网址">
<input type="search" placeholder="搜索框">
<input type="tel" placeholder="电话号码">

数字与日期

html
<input type="number" min="1" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="50">  <!-- 滑块 -->

<input type="date">          <!-- 日期选择器 -->
<input type="time">          <!-- 时间选择器 -->
<input type="datetime-local">  <!-- 日期+时间 -->
<input type="month">         <!-- 月份 -->
<input type="week">          <!-- 周 -->

选择类

html
<!-- 复选框(多选) -->
<input type="checkbox" id="html" name="skill" value="html">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skill" value="css" checked>
<label for="css">CSS</label>

<!-- 单选框(name 相同为一组) -->
<input type="radio" id="male" name="gender" value="male">
<label for="male"></label>
<input type="radio" id="female" name="gender" value="female" checked>
<label for="female"></label>

其他

html
<input type="file" accept=".jpg,.png">     <!-- 文件上传 -->
<input type="color" value="#ff0000">       <!-- 颜色选择器 -->
<input type="hidden" name="token" value="abc123">  <!-- 隐藏字段 -->