資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物
數學
英語
經濟學
心理學
社會研究
服飾研究
法律研究在 HTML 中為表單控制元件新增標籤？
在 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> form content... </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>
修改於:10-Oct-2023
386 瀏覽量
廣告