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

htmlweb developmentfront end technology更新于 2024/7/25 7:08:17

在 HTML 中，<label> 标签用于定义多个元素的标签，例如 <input>、<progress>、<select>、<meter>、<textarea>。

<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<meter>
<progress>
<select>
<textarea>

语法

以下是 HTML 中 <label> 标签的用法 −

<label> 表单内容... </label>

<label> 标签使用 for 和 form 属性，现在让我们看看 for 和 form 属性的值和说明。

for − 它指定与标签关联的表单元素的 ID。以下是标签中 for 属性的语法 -

<label for="element_id">

form −此属性用于当存在多个表单时，指定标签所属的表单。其值为 form_id，标签中 form 属性的语法如下 -

<label form="form_id">

示例

在下面的示例中，我们创建一个表单并向其中的控件添加标签。


<!DOCTYPE html>
<html>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h2>The label for attribute</h2>
   <p>Click on one of the radio button:</p>
   <form action="/action_page.php">
      <input type="radio" id="html" name="language" value="HTML">
      <label for="html">HTML</label>
      <br>
      <input type="radio" id="css" name="language" value="CSS">
      <label for="css">CSS</label>
      <br>
      <input type="radio" id="javascript" name="language" value="JavaScript">
      <label for="javascript">JavaScript</label>
      <br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

示例

让我们看另一个例子 −


<!DOCTYPE html>
<html>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h2>The label for form attribute</h2>
   <p>The label in the second radio button is outside the form, but still a part of the form. Try to click the "Teacher" text label to select the "Teacher" radio button.</p>
   <form action="/action_page.php" id="form1">
      <input type="radio" id="student" name="person" value="STUDENT">
      <label for="student">STUDENT</label>
      <br>
      <input type="radio" id="teacher" name="person" value="TEACHER">
      <br>
      <input type="radio" id="admin" name="person" value="ADMIN">
      <label for="admin">ADMIN</label>
      <br>
      <br>
      <input type="submit" value="Submit">
   </form>
   <br>
   <label form="form1" for="teacher">TEACHER</label>
</body>
</html>

示例

在此示例中，我们尝试创建一个示例登录页面并向其添加标签。


<!DOCTYPE html>
<html>
<head>
   <title>HTML label Tag</title>
</head>
<body>
   <label for="email">EMAIL-ID: <br />
   <input type="email" value="" name="emailid" size="30" placeholder="Enter a valid email address">
   <br />
   <br />
   <label for="phone">PHONE NO: <br />
   <input type="text" value="" name="phno" size="30" maxlength="10" placeholder="Enter a valid phone number" pattern="[0-9]{10}">
   <br />
   <br />
</body>
</html>