【HTML】＜input＞ 元素详解

在 HTML 中，<input> 元素是构建交互式表单的基础，用于接收用户输入的数据。本文将详细介绍 <input> 元素的各种类型、属性及其在实际开发中的应用，帮助您更好地理解和使用这一关键元素。

一、<input> 元素概述

1. 元素介绍

<input> 元素是 HTML 表单中最常见的元素之一，用于创建各种类型的输入控件，供用户输入数据。它是一个自闭合标签，通常嵌套在 <form> 元素中，以便在表单提交时传递用户输入的数据。

2. 基本语法

<input type="text" name="username" placeholder="请输入用户名">

在上述示例中：

• type 属性指定输入的类型，如文本、密码、电子邮件等。
• name 属性为输入字段命名，便于在表单提交时识别。
• placeholder 属性提供占位符文本，提示用户应输入的内容。

二、<input> 元素的类型

<input> 元素的 type 属性决定了输入控件的行为和外观。以下是常见的输入类型：

1. 文本输入 (type="text")

用于输入单行文本。

<input type="text" name="fullname" placeholder="请输入全名">

2. 密码输入 (type="password")

用于输入密码，输入内容以掩码显示。

<input type="password" name="password" placeholder="请输入密码">

3. 电子邮件输入 (type="email")

用于输入电子邮件地址，浏览器会进行基本格式验证。

<input type="email" name="email" placeholder="请输入电子邮件">

4. 数字输入 (type="number")

用于输入数字，可设置最小值、最大值和步长。

<input type="number" name="quantity" min="1" max="10" step="1">

5. 复选框 (type="checkbox")

用于选择多个选项中的一个或多个。

<label><input type="checkbox" name="interest" value="sports"> 体育</label>
<label>