HTML 输入类型

<input> 是一个高度灵活的表单控件，通过 type 属性切换行为。以下是所有常用类型。

文本类输入

html

<!-- 普通文本 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码（输入内容被遮蔽） -->
<input type="password" name="password" placeholder="请输入密码">

<!-- 邮箱（移动端弹出邮箱键盘） -->
<input type="email" name="email" placeholder="your@email.com">

<!-- 网址 -->
<input type="url" name="website" placeholder="https://">

<!-- 电话（移动端弹出拨号键盘） -->
<input type="tel" name="phone" placeholder="13800138000">

<!-- 搜索（部分浏览器显示清除按钮） -->
<input type="search" name="q" placeholder="搜索...">

<!-- 多行文本用 textarea，不是 input -->
<textarea name="bio" rows="4" cols="40" placeholder="介绍一下自己..."></textarea>

数字与日期

html

<input type="number" name="age" min="1" max="150" step="1" value="18">
<input type="range" name="volume" min="0" max="100" value="80">
<input type="date" name="birthday">
<input type="time" name="meeting">
<input type="datetime-local" name="appointment">
<input type="month" name="month">
<input type="week" name="week">

现代浏览器会为数字和日期类型提供专用控件（如日历选取器、微调按钮）。在旧浏览器中，它们会回退为普通 <input type="text">，不影响功能。

选择类

html

<!-- 复选框（可多选） -->
<label>
  <input type="checkbox" name="skills" value="html" checked> HTML
</label>
<label>
  <input type="checkbox" name="skills" value="css"> CSS
</label>
<label>
  <input type="checkbox" name="skills" value="js"> JavaScript
</label>

<!-- 单选框（同 name 的一组只能选一个） -->
<label>
  <input type="radio" name="gender" value="male" checked> 男
</label>
<label>
  <input type="radio" name="gender" value="female"> 女
</label>

文件与颜色

html

<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*">
<!-- accept 限制可选文件类型 -->

<!-- 多文件上传 -->
<input type="file" name="photos" accept="image/*" multiple>

<!-- 颜色选择器 -->
<input type="color" name="favcolor" value="#2563eb">

按钮类

html

<input type="submit" value="提交表单">
<input type="reset" value="重置">
<input type="button" value="点击我" onclick="alert('Hello!')">

<input type="submit"> 和 <button type="submit"> 效果相同，但 <button> 可以在内部放文字和 HTML 元素（如图标），而 <input> 只能用 value 设置纯文字。推荐使用 <button>。

隐藏与不可见

html

<!-- 隐藏字段：用户不可见，随表单一起提交 -->
<input type="hidden" name="userId" value="42">

<!-- 只读 -->
<input type="text" name="username" value="张三" readonly>

<!-- 禁用 -->
<input type="text" name="username" value="张三" disabled>

readonly — 值可被选中和复制，随表单提交
disabled — 值不可编辑、不可选中、不会随表单提交