HTML中input类型有哪些？完整指南

想知道HTML中`input`元素有多少种类型吗？本文为你全面解析！除了常见的文本框（text）和密码框（password），HTML5还新增了颜色选择器（color）、日期选择器（date）、邮箱验证（email）等多种实用类型，极大地丰富了表单功能。本文将详细介绍这些`input`类型的用法，以及如何利用`required`、`minlength`等属性进行前端验证，减轻JavaScript验证压力。此外，我们还将探讨如何使用CSS、伪类和JavaScript自定义`input`样式，打造更符合设计要求的表单，提升用户体验。掌握`input`元素的各种类型和属性，助你构建更高效、用户友好的Web应用！

HTML5新增的<input>类型包括color、date、datetime-local、email、month、number、range、search、tel、time、url和week，分别用于颜色选择、日期选取、日期时间选取、邮箱验证、月份选择、数字输入、滑块调节、搜索框、电话号码输入、时间选择、网址验证和周选择。此外，常见经典类型如text、password、radio、checkbox等也广泛用于文本输入、密码隐藏、单选及多选操作。前端验证可通过required、minlength/maxlength、min/max、pattern和title属性实现。自定义样式可使用CSS、伪类、JavaScript或第三方库进行优化，同时需注意可访问性、一致性与响应式设计。

HTML中的<input>元素类型丰富，远不止我们常用的text和password。了解这些类型及其用法，能让我们在前端开发中更加得心应手，构建更完善、用户体验更好的表单。

<input>的类型远比你想象的要多，不仅仅是文本框那么简单。

HTML5 新增的 input 类型有哪些？

HTML5 引入了许多新的 <input> 类型，极大地丰富了表单的功能。这些类型不仅提供了更便捷的用户输入方式，还在一定程度上减轻了前端验证的压力。

• color: 提供一个颜色选择器。浏览器会显示一个颜色面板，允许用户选择颜色。

  

  <label for="favcolor">选择你喜欢的颜色:</label>
  &lt;input type=&quot;color&quot; id=&quot;favcolor&quot; name=&quot;favcolor&quot; value=&quot;#ff0000&quot;&gt;

• date: 允许用户选择日期。浏览器会提供一个日期选择器，方便用户选取日期，避免手动输入错误。

  <label for="birthday">生日:</label>
  &lt;input type=&quot;date&quot; id=&quot;birthday&quot; name=&quot;birthday&quot;&gt;

• datetime-local: 允许用户选择包含日期和时间的本地时间。

  <label for="meeting-time">选择会议时间:</label>
  &lt;input type=&quot;datetime-local&quot; id=&quot;meeting-time&quot; name=&quot;meeting-time&quot;&gt;

• email: 专门用于输入电子邮件地址。浏览器会自动验证输入的文本是否符合电子邮件的格式。

  <label for="email">邮箱:</label>
  &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot;&gt;

• month: 允许用户选择月份。

  <label for="start-month">选择开始月份:</label>
  &lt;input type=&quot;month&quot; id=&quot;start-month&quot; name=&quot;start-month&quot;&gt;

• number: 用于输入数字。可以设置最小值 (min)、最大值 (max) 和步长 (step)。

  <label for="quantity">数量 (1 到 5):</label>
  &lt;input type=&quot;number&quot; id=&quot;quantity&quot; name=&quot;quantity&quot; min=&quot;1&quot; max=&quot;5&quot;&gt;

• range: 显示一个滑块，允许用户在一个范围内选择数值。

  <label for="volume">音量 (0 到 100):</label>
  &lt;input type=&quot;range&quot; id=&quot;volume&quot; name=&quot;volume&quot; min=&quot;0&quot; max=&quot;100&quot;&gt;

• search: 用于搜索框。在某些浏览器中，输入时会显示清除按钮。

  <label for="search">搜索:</label>
  &lt;input type=&quot;search&quot; id=&quot;search&quot; name=&quot;search&quot;&gt;

• tel: 用于输入电话号码。虽然不会强制验证格式，但在移动设备上会优化键盘布局。

  <label for="phone">电话号码:</label>
  &lt;input type=&quot;tel&quot; id=&quot;phone&quot; name=&quot;phone&quot;&gt;

• time: 允许用户选择时间。

  <label for="appt-time">选择预约时间:</label>
  &lt;input type=&quot;time&quot; id=&quot;appt-time&quot; name=&quot;appt-time&quot;&gt;

• url: 用于输入 URL 地址。浏览器会自动验证输入的文本是否符合 URL 的格式。

  <label for="website">网址:</label>
  &lt;input type=&quot;url&quot; id=&quot;website&quot; name=&quot;website&quot;&gt;

• week: 允许用户选择周。

  <label for="week">选择周:</label>
  &lt;input type=&quot;week&quot; id=&quot;week&quot; name=&quot;week&quot;&gt;

常见的 input 类型有哪些，分别有什么作用？

除了HTML5新增的类型，还有一些经典的<input>类型，它们同样非常重要。

• text: 单行文本输入框。这是最常用的类型，用于输入用户名、地址等文本信息。

  <label for="username">用户名:</label>
  &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot;&gt;

• password: 密码输入框。输入的字符会被隐藏，通常显示为星号或圆点。

  <label for="password">密码:</label>
  &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot;&gt;

• radio: 单选按钮。允许用户在一组选项中选择一个。需要配合name属性使用，同一组单选按钮的name属性必须相同。

  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label><br>
  &lt;input type=&quot;radio&quot; id=&quot;female&quot; name=&quot;gender&quot; value=&quot;female&quot;&gt;
  <label for="female">女</label>

• checkbox: 复选框。允许用户选择多个选项。

  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> 我有自行车</label><br>
  &lt;input type=&quot;checkbox&quot; id=&quot;vehicle2&quot; name=&quot;vehicle2&quot; value=&quot;Car&quot;&gt;
  <label for="vehicle2"> 我有汽车</label>

• file: 文件上传控件。允许用户选择本地文件上传。

  <label for="myfile">选择文件:</label>
  &lt;input type=&quot;file&quot; id=&quot;myfile&quot; name=&quot;myfile&quot;&gt;

• submit: 提交按钮。用于提交表单数据。

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

• reset: 重置按钮。用于重置表单数据到初始状态。

  <input type="reset" value="重置">

• button: 普通按钮。可以配合 JavaScript 使用，执行自定义操作。

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

• hidden: 隐藏字段。用于存储一些不需要显示给用户的信息，例如表单的唯一标识。

  <input type="hidden" id="custId" name="custId" value="3478">

• image: 图像按钮。与submit类似，但使用图像作为按钮。

  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

如何利用 input 的属性进行前端验证？

HTML5 提供了一些属性，可以直接在 <input> 元素上进行简单的前端验证，减少 JavaScript 代码量。

• required: 指示该字段是必填的。如果用户没有填写，浏览器会阻止表单提交。

  <label for="username">用户名:</label>
  &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; required&gt;

• minlength 和 maxlength: 限制文本输入框的最小和最大字符数。

  <label for="password">密码 (至少 8 个字符):</label>
  &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; minlength=&quot;8&quot;&gt;

• min 和 max: 限制数字输入框的最小值和最大值。

  <label for="age">年龄 (18 到 60):</label>
  &lt;input type=&quot;number&quot; id=&quot;age&quot; name=&quot;age&quot; min=&quot;18&quot; max=&quot;60&quot;&gt;

• pattern: 使用正则表达式验证输入的内容。

  <label for="country_code">国家代码 (3 个字母):</label>
  &lt;input type=&quot;text&quot; id=&quot;country_code&quot; name=&quot;country_code&quot; pattern=&quot;[A-Za-z]{3}&quot; title=&quot;请输入三个字母的国家代码&quot;&gt;

• title: 当验证失败时，鼠标悬停在输入框上会显示的提示信息。

  <label for="email">邮箱:</label>
  &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required title=&quot;请输入有效的邮箱地址&quot;&gt;

虽然这些属性提供了一些基本的验证功能，但更复杂的验证逻辑通常需要使用 JavaScript 来实现。

如何自定义 input 样式，使其更符合设计要求？

<input>元素的默认样式通常比较简单，为了使其更符合设计要求，我们需要自定义样式。

• 使用 CSS 修改基本样式: 可以使用 CSS 属性来修改<input>的颜色、字体、边框、背景等。

  input[type="text"] {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */
  }

• 使用伪类: ::placeholder 可以用来修改占位符的样式。:focus 可以用来修改输入框获得焦点时的样式。

  input[type="text"]::placeholder {
    color: #aaa;
  }
  
  input[type="text"]:focus {
    border-color: #66afe9;
    outline: none; /* 移除默认的 focus 样式 */
    box-shadow: 0 0 5px rgba(102, 175, 233, .5); /* 添加阴影效果 */
  }

• 使用 JavaScript 动态修改样式: 可以根据用户的输入或者其他事件，使用 JavaScript 动态修改<input>的样式。例如，当输入内容不符合要求时，可以改变输入框的边框颜色。

  const emailInput = document.getElementById('email');
  
  emailInput.addEventListener('blur', function() {
    if (!this.value.includes('@')) {
      this.style.borderColor = 'red';
    } else {
      this.style.borderColor = '#ccc';
    }
  });

• 使用第三方库: 可以使用一些第三方库，例如 Bootstrap、Materialize 等，它们提供了预定义的样式，可以快速创建美观的表单。

自定义<input>样式时，需要注意以下几点：

• 可访问性: 确保自定义样式不会影响可访问性。例如，不要移除 focus 时的轮廓，或者提供其他的视觉提示。
• 一致性: 保持样式的一致性，避免在不同的页面或组件中使用不同的样式。
• 响应式: 确保样式在不同的设备上都能正常显示。

<input>元素是HTML表单的核心组成部分。掌握各种类型及其属性，能够帮助我们构建更高效、用户友好的Web应用。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中input类型有哪些？完整指南》文章吧，也可关注golang学习网公众号了解相关技术文章。