HTML 零基础教程

HTML <input> 标签

<input> 标签让用户能够将数据输入并提交给网站。

在本章中，我们将深入挖掘 <input> 标签，重点聚焦于 text（文本）、password（密码） 和 email（邮箱） 这三种最常用的输入类型 。我们将探索它们的功能、属性以及实际应用场景，并了解它们如何提升数据校验和用户体验。

1. <input> 标签：HTML 表单的基座

<input> 标签是一个非常灵活的 HTML 元素，专门用于创建基于 Web 的表单交互控件。它允许用户输入诸如文本、密码、电子邮件地址等各种数据。

其中，type 属性是它的灵魂，它决定了输入框将以何种特定形式呈现。如果你不写 type 属性，浏览器会默认把它当成普通的文本框（text）。

1.1 基础结构

一个标准的 <input> 标签结构如下：

<input type="输入类型" id="唯一标识符" name="数据名称" value="默认值">
  • type： 指定要显示的输入框类型。这是最重要的属性，因为它直接决定了输入框的行为和外观。
  • id： 为这个输入元素提供在当前 HTML 文档中唯一的标识符。这对于使用 CSS 写样式和使用 JavaScript 操作它是必不可少的。
  • name： 指定输入元素的名称。这对于将表单数据提交给服务器至关重要。服务器就是通过 name 属性来识别接收到的是什么数据。
  • value： 定义输入框的初始值（默认填入的文字）。这个属性是可选的，常用于预填充表单或提供默认选项。

2. 输入类型：text（普通文本）

text 输入类型会创建一个单行文本框，用户可以在里面输入任何类型的文本。这是最基础、也是最常用的输入类型。

2.1 text 的专属好用属性

除了继承 id、name 和 value 这些通用属性外，text 类型经常搭配以下三个属性使用：

  • maxlength： 严格限制用户在这个输入框中最多能输入的字符数。
  • size： 定义输入框在屏幕上的可见宽度（以字符数为单位）。请注意，这仅仅是给浏览器的一个“视觉提示”，它不限制用户实际能输入多少字（限制字数必须用 maxlength）。
  • placeholder： 占位符。在输入框为空时，提供一段浅色的提示文字，告诉用户这里该填什么。一旦用户开始打字，这段提示文字就会自动消失。

代码示例：

<label for="firstName">名字：</label><br>
<input type="text" id="firstName" name="firstName" placeholder="请输入你的名字" maxlength="50" size="30"><br><br>

<label for="lastName">姓氏：</label><br>
<input type="text" id="lastName" name="lastName" placeholder="请输入你的姓氏" maxlength="50" size="30">

在这个例子中，我们创建了名和姓两个文本框。placeholder 提供了贴心的输入引导，maxlength 确保名字不会长得离谱，而 size 则让输入框在页面上看起来足够宽敞。

3. 输入类型：password（密码）

password 输入类型专门用于输入敏感信息，比如密码。

它的核心功能是掩码（Masking）：它会把你输入的字符隐藏起来，通常显示为星号（*）或小圆点（•），防止旁边的人偷窥。

3.1  重要安全提示

请务必明白，password 类型绝对不会加密你的数据。它仅仅是在屏幕上“遮挡”了字符。在提交表单时，数据依然是以纯文本（明文）形式发送给服务器的。想要真正保护数据安全，你的网站必须使用 HTTPS 安全连接。

3.2 支持的属性

password 类型支持与 text 类型相同的属性，包括 id、name、value、maxlength、size 和 placeholder。

代码示例：

<label for="password">密码：</label><br>
<input type="password" id="password" name="password" placeholder="请输入你的密码" maxlength="20" size="30">

4. 输入类型：email（电子邮件）

email 输入类型专门用于输入电子邮件地址。

使用它的最大好处是，现代浏览器自带了基础格式验证 。当你尝试提交表单时，如果输入的内容不符合标准邮箱格式（比如缺少了 @ 符号），浏览器会自动阻止提交并弹出提示。

不过，这种前端验证并不是万无一失的，实际开发中，你永远需要在服务器端再次进行验证。

4.1 专属属性：multiple

email 类型支持所有标准属性（id、name 等），此外它还支持一个非常特别的布尔属性：multiple。

  • multiple： 如果加上这个词，用户就可以在这个输入框里输入多个电子邮件地址，地址之间用逗号（,）隔开即可。

代码示例：

<label for="email">个人邮箱：</label><br>
<input type="email" id="email" name="email" placeholder="请输入你的邮箱地址" size="30"><br><br>

<label for="ccEmail">抄送邮箱（可填多个）：</label><br>
<input type="email" id="ccEmail" name="ccEmail" placeholder="多个邮箱请用逗号隔开" size="30" multiple>

在这个例子中，第一个输入框只能填一个邮箱；而第二个输入框因为有了 multiple 属性，允许你一口气填入一长串的抄送邮箱。

5. 极其重要的通用属性

有几个属性在上述三种类型（text、password、email）中都通用，且对表单的功能和用户体验起着决定性作用。

5.1 id 与 name 的黄金法则

id 和 name 承担着完全不同的职责，初学者很容易混淆：

  • id 是供前端使用的（CSS 选人做样式，JavaScript 抓取元素做动态交互）。
  • name 是供**后端（服务器）**使用的。当你点击提交按钮，浏览器会把 name 作为数据的标签打包发给服务器。

最佳实践： 养成好习惯，确保你的每一个 <input> 框都同时拥有 id 和 name 属性。

5.2 placeholder（占位提示）

如前所述，它能在输入框里显示浅色提示，是提升复杂表单用户体验（UX）的绝佳利器，让用户不用猜这里该填什么格式的数据。

5.3 required（必填项验证）

required 是一个布尔属性（写上它就生效，不需要赋值）。它规定在提交表单之前，这个输入框必须填写内容 。

如果必填框空着，现代浏览器会直接拦截表单提交，并向用户显示一个警告提示框。

带有 required 的代码示例：

<label for="username">用户名：</label><br>
<input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>

<label for="password">密码：</label><br>
<input type="password" id="password" name="password" placeholder="请输入密码" required>

在这个登录表单中，用户名和密码都被标记为 required。任何一个没填，表单都绝对提交不了。