跳到主要内容

HTML 输入标签

提示
  1. <input>标签的作用：HTML中的<input>标签定义用户数据输入字段，type属性决定接受的输入类型。
  2. 不同的输入类型：HTML5支持多种输入类型，包括文本、按钮、复选框、颜色选择器、日期选择器、电子邮件、文件、隐藏输入等。
  3. 特定属性的使用：<input>标签的name属性指定输入的名称，minlength、maxlength、size等属性用于限制文本长度，pattern用于验证输入模式。

HTML <input> 标签定义了用户可以输入数据的字段。type 属性决定了接受何种类型的用户输入。

<input type="text" name="firstname" />

浏览器输出

输入标签

这里，

  • type - 决定 <input> 标签接受的输入类型
  • name - 指定输入的名称，当将数据提交给服务器时，数据将以此名称命名。

不同的输入类型​

HTML5 中可用的各种输入标签类型包括：

  1. text - 创建单行文本字段（默认）
  2. button - 创建无默认功能的按钮
  3. checkbox - 创建复选框
  4. color - 创建颜色选择器
  5. date - 创建日期选择器
  6. datetime-local - 创建日期和时间选择器
  7. email - 创建允许用户输入有效电子邮件地址的输入字段
  8. file - 创建允许用户上传文件或多个文件的输入字段
  9. hidden - 创建不可见的输入字段
  10. image - 使用图像创建按钮
  11. month - 创建允许用户输入月份和年份的输入字段
  12. password - 创建允许用户安全输入信息的输入字段
  13. radio - 创建单选按钮
  14. range - 创建用户可以选择值的范围选择器
  15. reset - 创建清除所有表单值至默认值的按钮
  16. search - 允许用户在文本字段中输入搜索查询
  17. submit - 允许用户将表单提交给服务器
  18. tel - 定义输入电话号码的字段
  19. time - 创建接受时间值的输入字段
  20. url - 让用户输入和编辑 URL
  21. week - 让用户从日历中选择一周和一年

1. 输入类型 text​

输入类型 text 用于创建单行文本字段。它是默认的输入类型。

<label for="name">搜索： </label> <input type="text" id="name" />

浏览器输出

文本类型的输入标签

输入类型 text 还可以包含 minlength、maxlength 和 size 属性。例如，

<label for="name">姓名</label>
<input type="text" id="name" minlength="4" maxlength="8" />

浏览器输出

文本类型的输入标签

在上述例子中，只允许输入 4 到 8 个字符长度的值。

注意：如果未提供 type 属性，标签将成为文本类型。

2. 输入类型 button​

输入类型 button 用于创建无默认功能的按钮。例如，

<input type="button" value="点击我！" />

浏览器输出

按钮类型的输入标签 值属性中的文本将显示在按钮上。

注意：通常使用 JavaScript 为此类按钮添加功能。

3. 输入类型 checkbox​

输入类型 checkbox 用于创建复选框输入。例如，

<input type="checkbox" id="subscribe" value="subscribe" />
<label for="subscribe">订阅新闻通讯！</label><br />

浏览器输出（未选中的复选框）

未选中的复选框输入标签类型

复选框可以在选中和未选中之间切换。

浏览器输出（选中的复选框）

选中的复选框输入标签类型

只有当复选框被选中时，复选框的值才会包含在表单数据中，如果未选中，则不会包含。

4. 输入类型 color​

输入类型 color 用于创建允许用户选择颜色的输入字段。例如，

<input type="color" id="background" /> <label for="background">背景颜色</label>

浏览器输出（展开前）

关闭的颜色输入标签类型

浏览器输出（展开后）

打开的颜色输入标签类型

颜色选择器内置于浏览器中。用户也可以手动输入颜色的十六进制代码。颜色选择器的 UI 会因浏览器而异。

5. 输入类型 date​

输入类型 date 用于创建允许用户使用浏览器的日期选择器界面输入日期的输入字段。例如，

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

浏览器输出（展开前）

关闭的日期输入标签类型

浏览器输出（展开后）

打开的日期输入标签类型

6. 输入类型 datetime-local​

输入类型 datetime-local 用于创建允许用户使用浏览器的日期时间选择器选择日期和时间的输入字段。从输入中选择的时间不包含时区信息。例如，

<label for="meeting-time">选择您的预约时间：</label>
<input type="datetime-local" id="meeting-time" />

浏览器输出（展开前）

关闭的 datetime-local 输入标签类型

浏览器输出（展开后）

打开的 datetime-local 输入标签类型

7. 输入类型 email​

输入类型 email 用于创建允许用户输入有效电子邮件地址的输入字段。

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

浏览器输出

电子邮件类型的输入标签

如果提供的值不是有效的电子邮件地址，该输入字段会抛出错误。例如，

浏览器输出

显示验证的 HTML 电子邮件输入类型

8. 输入类型 file​

输入类型 file 用于创建允许用户从其设备上传文件或多个文件的输入字段。例如，

<input type="file" name="file" />

浏览器输出

文件类型的输入标签

9. 输入类型 hidden​

输入类型 hidden 用于创建不可见的输入字段。它用于向服务器提供表单中用户无法看到或修改的额外值。例如，

<input type="hidden" name="id" value="123" />

10. 输入类型 image​

输入类型 image 用于使用图像创建按钮。

<input type="image" src="/submit.png" alt="submit" />

浏览器输出

图像类型的输入标签

让我们看一个如何在表单中使用它的例子。

<form>
  <label for="firstname">名字： </label>
  <input type="text" id="firstname" name="firstname" /><br /><br />
  <label for="lastname">姓氏： </label>
  <input type="text" id="lastname" name="lastname" /><br /><br />
  <input type="image" src="/submit.png" alt="submit" />
</form>

浏览器输出

表单中的图像类型输入标签

11. 输入类型 month​

输入类型 month 用于创建允许用户使用浏览器的可视界面输入月份和年份的输入字段。例如，

<label for="start">选择月份：</label> <input type="month" id="start" />

浏览器输出（展开前）

月份类型的输入标签

浏览器输出（展开后）

打开的月份类型输入标签

12. 输入类型 password​

输入类型 password 用于创建允许用户安全输入信息的输入字段。例如，

<label for="password">密码：</label> <input type="password" id="password" />

浏览器输出

密码类型的输入标签

浏览器会使用星号（*）显示用户输入的所有字符。

13. 输入类型 radio​

输入类型 radio 用于定义单选按钮。单选按钮在一个组中定义。单选按钮允许用户从一组选项中选择一个选项。

<form>
  <input type="radio" id="cat" name="animal" value="cat" />
  <label for="cat">猫</label>
  <input type="radio" id="dog" name="animal" value="dog" />
  <label for="dog">狗</label>
</form>

浏览器输出

单选类型的输入标签

从上面的例子中我们可以看到，所有的单选按钮共享相同的 name 属性。这允许用户从单选按钮组中准确地选择一个选项。

提交表单数据时，输入的键将是 name 属性，值将是所选的单选按钮。

注意：提交表单时，name 属性用作数据的键。

14. 输入类型 range​

输入类型 range 用于创建范围选择器，用户可以从中选择值。用户可以从给定的范围中选择一个值。默认范围从 0 到 100。例如，

<label for="range">选择值：</label> <input type="range" id="range" value="90" />

浏览器输出

范围类型的输入标签

15. 输入类型 reset​

输入类型 reset 定义了清除所有表单值至默认值的按钮。例如，

<form>
  <label for="name">姓名：</label>
  <input id="name" type="text" /><br />
  <input type="reset" value="重置" />
</form>

浏览器输出 重置类型的输入标签

浏览器输出（重置后）

重置类型的输入标签

输入类型 search 允许用户在文本字段中输入搜索查询。它与输入类型 text 类似。例如，

<label for="search">搜索：</label><input type="search" id="search" />

浏览器输出

搜索类型的输入标签

注意：除非我们使用一些 JavaScript 来进行搜索计算，否则搜索输入不会作为搜索工作。

17. 输入类型 submit​

当用户将表单提交给服务器时使用输入类型 submit。它呈现为一个按钮。例如，

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

浏览器输出

提交类型的输入标签

这里，value 属性中提供的文本将显示在按钮上。

18. 输入类型 tel​

输入类型 tel 用于定义输入电话号码的字段。电话号码不会自动验证为特定格式，因为电话格式在世界各地都不同。它具有一个名为 pattern 的属性，用于验证输入的值。例如，

<label for="phone">电话号码：</label>
<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />

浏览器输出

电话类型的输入标签

上例中的模式允许按照 XXX-XX-XXX 的格式输入数字，其中 X 是 0 到 9 之间的数字。

19. 输入类型 time​

输入类型 time 属性创建一个接受时间值的输入字段。它允许用户轻松地添加小时、分钟和秒。例如，

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

浏览器输出（展开前）

时间类型的输入标签

浏览器输出（展开后）

展开的时间类型输入标签

20. 输入类型 url​

输入类型 url 用于让用户输入和编辑 URL。例如，

<label for="url">URL：</label>
<input
  type="url"
  id="url"
  placeholder="https://example.com"
  pattern="https://.*"
/>

浏览器输出

URL 类型的输入标签

这里，placeholder 是指定输入字段预期值的提示，pattern 定义接受何种类型的值。上述模式意味着只有以 https:// 开头的文本才有效。

21. 输入类型 week​

输入类型 week 让用户从日历中选择一周和一年。例如，

<label for="week">周</label> <input type="week" id="week" />

浏览器输出

周类型的输入标签

最后于 更新