HTML Input 标签

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">Search: </label>
<input type="text" id="name">

浏览器输出

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

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

浏览器输出

在上面的例子中，只允许长度在 **4** 到 **8** 个字符之间的值。

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

2. 输入类型 button

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

<input type="button" value="Click Me!">

浏览器输出

值属性内的文本显示在按钮中。

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

3. 输入类型 checkbox

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

<input type="checkbox" id="subscribe" value="subscribe">
<label for="subscribe">Subscribe to newsletter!</label><br>

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

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

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

复选框的值仅在复选框选中时才包含在表单数据中，如果未选中则省略。

4. 输入类型 color

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

<input type="color" id="background">
<label for="background">Background Color</label>

浏览器输出（展开前）

浏览器输出（展开后）

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

5. 输入类型 date

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

<label for="birthday">Birthday:</label>
<input type="date" id="birthday">

浏览器输出（展开前）

浏览器输出（展开后）

6. 输入类型 datetime-local

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

<label for="meeting-time">Choose a time for your appointment:</label>
<input type="datetime-local" id="meeting-time" >

浏览器输出（展开前）

浏览器输出（展开后）

7. 输入类型 email

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

<label for="email">Enter your email:</label>
<input type="email" id="email">

浏览器输出

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

浏览器输出

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">First name: </label>
  <input type="text" id="firstname" name="firstname"><br><br>
  <label for="lastname">Last name: </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">Select Month:</label>
<input type="month" id="start" >

浏览器输出（展开前）

浏览器输出（展开后）

12. 输入类型 password

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

<label for="password">Password:</label>
<input type="password" id="password">

浏览器输出

浏览器使用星号 (*) 显示用户键入的所有字符。

13. 输入类型 radio

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

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

浏览器输出

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

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

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

14. 输入类型 range

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

<label for="range">Select value: </label>
<input type="range" id="range" value="90">

浏览器输出

15. 输入类型 reset

输入类型 reset 定义了一个按钮，它将所有表单值清除为它们的默认值。例如，

<form>
   <label for="name">Name:</label>
   <input id="name" type="text"  /><br />
   <input type="reset" value="Reset" />
 </form>

浏览器输出

浏览器输出（重置后）

16. 输入类型 search

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

<label for="search">Search: </label><input type="search" id="search" >

浏览器输出

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

17. 输入类型 submit

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

<input type="submit" value="submit">

浏览器输出

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

18. 输入类型 tel

输入类型 tel 用于定义输入电话号码的字段。电话号码不会自动验证为特定格式，因为电话格式在全球范围内有所不同。它有一个名为 pattern 的属性，用于验证输入的值。例如，

<label for="phone">Phone Number:</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">Select 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://.*">

浏览器输出

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

21. 输入类型 week

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

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

浏览器输出