HTML 表单输入类型

在 HTML 中，<input type=" "> 是 HTML 表单中的一个重要元素。“type”属性的 input 元素有多种类型，用于定义信息字段。例如 <input type="text" name="name"> 创建一个文本框。

以下是 HTML 中所有 <input> 元素类型的列表。

HTML5 在 <input> 元素中添加了新的类型。以下是 HTML5 元素类型列表

以下是带示例的 <input> 元素类型的描述。

1. <input type="text">

类型为“text”的 <input> 元素用于定义一个单行输入文本字段。

示例

输出

2. <input type="password">

类型为“password”的 <input> 元素允许用户在网页上安全地输入密码。密码字段中输入的文本会转换为“*”或“.”，以便其他用户无法读取。

示例

输出

3. <input type="submit">

类型为“submit”的 <input> 元素定义了一个提交按钮，在发生“click”事件时将表单提交到服务器。

示例

输出

4. <input type="reset">

类型为“reset”的 <input> 也定义为一个按钮，但当用户单击时，它默认会重置所有输入的值。

示例

输出

5. <input type="radio">

类型为“radio”的 <input> 定义了单选按钮，允许在一组相关选项中选择一个选项。一次只能选择一个单选按钮选项。

示例

输出

6. <input type="checkbox">

类型为“checkbox”的 <input> 显示为方框，可以选中或取消选中以从给定选项中选择。

注意：单选按钮与复选框类似，但两者之间有一个重要区别：单选按钮允许用户一次只选择一个选项，而复选框允许用户一次选择零个到多个选项。

示例

输出

7. <input type="button">

类型为“button”的 <input> 定义了一个简单的按钮，可以对其进行编程以控制任何事件（如单击事件）的功能。

注意：它主要与 JavaScript 一起使用。

示例

输出

注意：在上面的示例中，我们使用了 JS 的“alert”，这将在我们的 JS 教程中进行学习。它用于显示一个弹出窗口。

8. <input type="file">

类型为“file”的 <input> 元素用于从用户设备存储中选择一个或多个文件。选择文件后，提交后，可以使用 JS 代码和文件 API 将文件上传到服务器。

示例

输出

9. <input type="image">

类型为“image”的 <input> 用于以图像形式表示提交按钮。

示例

HTML5 新增的 <input> 类型元素

1. <input type="color">

类型为“color”的 <input> 用于定义一个包含颜色的输入字段。它允许用户通过浏览器上的视觉颜色界面指定颜色。

注意：“color”类型仅支持十六进制格式的颜色值，默认值为 #000000（黑色）。

示例

输出

2. <input type="date">

类型为“date”的 <input> 元素生成一个输入字段，允许用户以给定格式输入日期。用户可以通过文本字段或日期选择器界面输入日期。

示例

输出

3. <input type="datetime-local">

类型为“datetime-local”的 <input> 元素创建了一个输入字段，允许用户选择日期和本地时间（小时和分钟），而不带时区信息。

示例

输出

4. <input type="email">

类型为“email”的 <input> 创建了一个输入字段，允许用户输入带有模式验证的电子邮件地址。“multiple”属性允许用户输入多个电子邮件地址。

示例

输出

5. <input type="month">

类型为“month”的 <input> 创建了一个输入字段，允许用户以“MM, YYYY”的格式轻松输入月份和年份，其中 MM 代表月份值，YYYY 代表年份值。新

示例

输出

6. <input type="number">

类型为“number”的 <input> 元素创建了一个输入字段，允许用户输入数字值。您也可以使用 min 和 max 属性限制输入最小值和最大值。

示例

输出

7. <input type="url">

类型为“url”的 <input> 元素创建一个输入字段，使用户能够输入 URL。

示例

输出

8. <input type="week">

类型为“week”的 <input> 创建了一个输入字段，允许用户从下拉日历中选择一年中的某一周和年份，且不带时区。

示例

输出

9. <input type="search">

类型为“search”的 <input> 创建了一个输入字段，允许用户输入搜索字符串。这些在功能上与文本输入类型对称，但样式可能不同。

示例

输出

10. <input type="tel">

类型为“tel”的 <input> 元素创建一个输入字段，用于输入电话号码。“tel”类型没有默认验证（如电子邮件），因为电话号码模式可能因国家/地区而异。

示例

输出