在HTML中为表单控件添加标签|极客教程

在HTML中为表单控件添加标签

参考： Add a label for a form control in HTML

在HTML中，为表单控件添加标签是一种提高网页可访问性的重要做法。标签（Label）不仅有助于提供更多的信息给用户，还能提高表单控件的可点击区域，使得用户更容易与之交互。此外，对于屏幕阅读器用户来说，标签是识别表单控件功能的关键。本文将详细介绍如何在HTML中为表单控件添加标签，并提供多个示例代码。

1. 使用`<label>`元素

<label>元素是HTML中用于为表单控件添加标签的标准方式。它可以通过两种方式与表单控件关联：使用for属性或将表单控件嵌套在<label>元素内部。

示例代码1：使用`for`属性关联

<!DOCTYPE html>
<html>
<head>
    <title>示例1</title>
</head>
<body>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名how2html.com">
</body>
</html>

Output:

在HTML中为表单控件添加标签

示例代码2：嵌套表单控件

<!DOCTYPE html>
<html>
<head>
    <title>示例2</title>
</head>
<body>
    <label>
        邮箱地址：
        <input type="email" name="email" placeholder="请输入邮箱how2html.com">
    </label>
</body>
</html>

Output:

在HTML中为表单控件添加标签

2. 使用`<fieldset>`和`<legend>`为一组控件添加标签

当你有一组相关的表单控件时，使用<fieldset>元素将它们分组，并通过<legend>元素为这个组提供标签是一个好方法。

示例代码3：使用`<fieldset>`和`<legend>`

<!DOCTYPE html>
<html>
<head>
    <title>示例3</title>
</head>
<body>
    <fieldset>
        <legend>联系信息</legend>
        <label for="tel">电话：</label>
        <input type="tel" id="tel" name="tel" placeholder="请输入电话号码how2html.com">
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱how2html.com">
    </fieldset>
</body>
</html>

Output:

在HTML中为表单控件添加标签

3. 使用`<output>`元素显示计算结果

<output>元素用于显示表单控件的输出，比如计算结果。你可以为<output>元素添加标签，以提供更多上下文信息。

示例代码4：使用`<output>`显示结果

<!DOCTYPE html>
<html>
<head>
    <title>示例4</title>
</head>
<body>
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <label for="a">A：</label>
        <input type="number" id="a" name="a" value="0">
        <label for="b">B：</label>
        <input type="number" id="b" name="b" value="0">
        <label for="result">结果：</label>
        <output name="result" for="a b">0</output>
    </form>
</body>
</html>

Output:

在HTML中为表单控件添加标签

4. 使用`<input>`元素的不同类型

<input>元素支持多种类型，如text、email、password等，每种类型的输入控件都可以通过<label>元素添加标签。

示例代码5：`<input type="password">`

<!DOCTYPE html>
<html>
<head>
    <title>示例5</title>
</head>
<body>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" placeholder="请输入密码how2html.com">
</body>
</html>

Output:

在HTML中为表单控件添加标签

示例代码6：`<input type="checkbox">`

<!DOCTYPE html>
<html>
<head>
    <title>示例6</title>
</head>
<body>
    <label>
        <input type="checkbox" name="subscribe" value="newsletter">
        我同意接收how2html.com的新闻通讯
    </label>
</body>
</html>

Output:

在HTML中为表单控件添加标签

示例代码7：`<input type="radio">`

<!DOCTYPE html>
<html>
<head>
    <title>示例7</title>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="gender" value="male">
            男
        </label>
        <label>
            <input type="radio" name="gender" value="female">
            女
        </label>
    </form>
</body>
</html>

Output:

在HTML中为表单控件添加标签

示例代码8：`<input type="file">`

<!DOCTYPE html>
<html>
<head>
    <title>示例8</title>
</head>
<body>
    <label for="file">上传文件：</label>
    <input type="file" id="file" name="file">
</body>
</html>

Output:

在HTML中为表单控件添加标签

5. 使用`<select>`和`<option>`元素

<select>元素创建下拉列表，而<option>元素定义下拉列表中的选项。为<select>元素添加标签可以帮助用户理解其功能。

示例代码9：`<select>`元素

<!DOCTYPE html>
<html>
<head>
    <title>示例9</title>
</head>
<body>
    <label for="country">国家：</label>
    <select id="country" name="country">
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="uk">英国</option>
    </select>
</body>
</html>

Output:

在HTML中为表单控件添加标签

6. 使用`<textarea>`元素

<textarea>元素创建多行文本输入框，适用于输入较长的文本。为其添加标签有助于指明用户应在此处输入的内容类型。

示例代码10：`<textarea>`元素

<!DOCTYPE html>
<html>
<head>
    <title>示例10</title>
</head>
<body>
    <label for="bio">个人简介：</label>
    <textarea id="bio" name="bio" rows="4" cols="50" placeholder="请简述您的个人经历how2html.com"></textarea>
</body>
</html>