HTML input 元素的不同类型

本章介绍了 HTML <input> 元素的所有的类型和具体的用法。

HTML 输入类型

以下是可以在 HTML 中使用的不同输入类型：

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

! 提示： type 属性的默认值为“text”。

单行文本 `text`

<input type="text"> 定义单行文本输入字段：

<form>
  <label for="name">姓名：</label><br />
  <input type="text" id="name" name="name" /><br />
  <label for="age">年龄：</label><br />
  <input type="text" id="age" name="age" />
</form>

密码 `password`

<input type="password"> 定义一个密码字段：

<form>
  <label for="username">用户名：</label><br />
  <input type="text" id="username" name="username" /><br />
  <label for="pwd">密码：</label><br />
  <input type="password" id="pwd" name="pwd" />
</form>

! 在浏览器中，密码字段中的字符被屏蔽显示为星号或圆圈。

提交按钮 `submit`

<input type="submit"> 定义一个表单提交按钮。提交按钮将表单数据提交到在 <form> 的 action 属性中设置的服务端的表单处理程序。

<input type="submit"> 的表现和 <button type="submit"></button> 效果相同。

<form action="/action_page.php">
  <label for="name">姓名：</label><br />
  <input type="text" id="name" name="name" value="John" /><br />
  <label for="age">年龄：</label><br />
  <input type="text" id="age" name="age" value="Doe" /><br /><br />
  <input type="submit" value="提交" />
</form>

! 如果省略提交按钮的 value 属性，浏览器会提供默认的文本。

重置按钮 `reset`

<input type="reset"> 定义一个重置按钮 ，将所有表单值重置为其默认值。

<input type="reset"> 的表现和 <button type="reset"></button> 效果相同。

<form action="/action_page.php">
  <label for="name">姓名：</label><br />
  <input type="text" id="name" name="name" value="John" /><br />
  <label for="age">年龄：</label><br />
  <input type="text" id="age" name="age" value="Doe" /><br /><br />
  <input type="submit" value="提交" />
  <input type="reset" />
</form>

! 如果更改输入值，然后单击“重置”按钮，表单数据将重置为默认值。

单选按钮 `radio`

<input type="radio"> 定义一个单选按钮。

单选按钮限制了用户只能选择列表中的一项。

<form>
  <input type="radio" id="male" name="gender" value="male" />
  <label for="male">男</label><br />
  <input type="radio" id="female" name="gender" value="female" />
  <label for="female">女</label><br />
  <input type="radio" id="other" name="gender" value="other" />
  <label for="other">保密</label>
</form>

复选框 `checkbox`

<input type="checkbox"> 定义一个复选框。

复选框允许用户在列表中选择多项。

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
  <label for="vehicle1">我有一辆自行车</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
  <label for="vehicle2">我有一辆汽车</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
  <label for="vehicle3">我有一条船</label>
</form>

按钮 `button`

<input type="button"> 定义一个常规按钮。

<input type="reset"> 的表现和 <button type="button"></button> 效果相同。

<input type="button" onclick="alert('Hello World!')" value="点我！" />

颜色选择框 `color`

<input type="color"> 定义一个颜色输入框，浏览器会弹出一个颜色选择框供用户选择。

<form>
  <label for="favcolor">选择你喜欢的颜色：</label>
  <input type="color" id="favcolor" name="favcolor" />
</form>

日期 `date`

<input type="date"> 定一个日期选择器供用户输入日期。

<form>
  <label for="birthday">生日：</label>
  <input type="date" id="birthday" name="birthday" />
</form>

您还可以使用 min 和 max 属性来添加对日期的限制：

<form>
  <label for="datemax">选择一个 1980-01-01 以前的日期</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />
  <label for="datemin">选择一个 2000-01-01 以后的日期</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02" />
</form>

本地日期时间 `datetime-local`

<input type="datetime-local"> 定义一个日期和时间输入框，不考虑时区。

<form>
  <label for="birthdaytime">生日 (日期和时间)：</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime" />
</form>

电子邮件 `email`

<input type="email"> 定义个输入框用于输入电子邮件地址。

根据浏览器支持情况，电子邮件地址可以在提交时自动验证。

<form>
  <label for="email">输入电子邮件：</label>
  <input type="email" id="email" name="email" />
</form>

文件 `file`

<input type="file"> 定义文件选择框。

<form>
  <label for="myfile">选择一个文件：</label>
  <input type="file" id="myfile" name="myfile" />
</form>

隐藏字段 `hidden`

<input type="hidden"> 定义了一个隐藏字段，用户不可见，但是可以存储内容。

隐藏字段允许 Web 开发人员在提交表单时包含用户无法看到或修改的数据。

隐藏字段通常存储提交表单时需要更新的数据库记录的 ID。

! 注意： 虽然该值不会在页面内容中向用户显示，但是使用浏览器的开发人员工具或“查看源代码”功能都可以看到（并且可以编辑）。不要使用隐藏字段作为一种安全方案。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" /><br /><br />
  <input type="hidden" id="custId" name="custId" value="3487" />
  <input type="submit" value="提交" />
</form>

月份 `month`

<input type="month"> 允许用户选择年份和月份。

<form>
  <label for="bdaymonth">生日 (年和月)：</label>
  <input type="month" id="bdaymonth" name="bdaymonth" />
</form>

数字 `number`

<input type="number"> 限制用户输入数字。

以下示例显示一个数字输入字段，您可以在其中输入 1 到 5 之间的值：

<form>
  <label for="quantity">数量 (1 - 5)：</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5" />
</form>

输入限制

下表是 <input> 元素中与输入限制相关的属性：

属性	说明
`checked`	指定在页面加载时应预先选择输入字段（对于 type=“checkbox” 或 type=“radio”）
`disabled`	指定输入字段是禁用的
`max`	指定输入字段的最大值
`maxlength`	指定输入字段的最大字符数
`min`	指定输入字段的最小值
`pattern`	指定一个正则表达式来验证输入值
`readonly`	指定输入字段是只读的（不能更改）
`required`	指定输入字段是必需的（必须填写）
`size`	指定输入字段的宽度（以字符为单位）
`step`	指定输入字段的合法数字间隔
`value`	指定输入字段的默认值

您将在下一章中了解有关输入限制的更多信息。

范围 `range`

<input type="range"> 提供一个滑块组件来限定用户输入数字。默认范围是 0 到 100。但是，您可以通过 min ， max 以及 step 来设置范围及步长。

<form>
  <label for="vol">输入 0 - 50 之间的数字：</label>
  <input type="range" id="vol" name="vol" min="0" max="50" />
</form>

搜索 `search`

<input type="search"> 用于搜索字段（搜索字段的行为像一个普通的文本字段）。

<form>
  <label for="bdsearch">百度搜索：</label>
  <input type="search" id="bdsearch" name="bdsearch" />
</form>

电话 `tel`

<input type="tel"> 被用于输入电话号码。

<form>
  <label for="phone">输入您的电弧号码</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
</form>

时间 `time`

<input type="time"> 允许用户选择时间。

<form>
  <label for="appt">选择时间：</label>
  <input type="time" id="appt" name="appt" />
</form>

网址 `url`

<input type="url"> 允许用户输入 URL 地址。

根据浏览器支持的支持情况，url 字段可以在提交时自动验证。

<form>
  <label for="blog">添加你的博客：</label>
  <input type="url" id="blog" name="blog" />
</form>

周/星期 `week`

<input type="week"> 允许用户选择一年中的一个星期。

根据浏览器支持，日期选择器可以显示在输入字段中。

<form>
  <label for="week">选择星期：</label>
  <input type="week" id="week" name="week" />
</form>

HTML input 元素的不同类型

HTML 输入类型

单行文本 text

密码 password

提交按钮 submit

重置按钮 reset

单选按钮 radio

复选框 checkbox

按钮 button

颜色选择框 color

日期 date

本地日期时间 datetime-local

电子邮件 email

文件 file

隐藏字段 hidden

月份 month

数字 number