HTML <label> 標籤

admin發表於2018-09-08
HTML

此標籤可以為<input>元素新增標註；與<input>元素關聯起來，實現體驗更佳的滑鼠操作。

比如checkbox核取方塊，預設直接點選核取方塊才能實現選中和取消選中，如果與<label>關聯起來，那麼只要點選<label>即可實現同樣的功能。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
</head> 
<body>
<form> 
  <input type="checkbox" id="a" >
  <label for="a">螞蟻部落一</label>

  <input type="checkbox" id="b" > 
  <label for="b">螞蟻部落二</label>

  <input type="checkbox" id="c" >
  <label for="c">螞蟻部落三</label>
</form>
</body> 
</html>

上面程式碼中，點選文字也可以實現核取方塊的選中和取消選中效果。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
</head> 
<body> 
<form>
  <label>
    <input type="checkbox"/>
    螞蟻部落一
  </label>
  <label>
    <input type="checkbox"/> 
    螞蟻部落二
  </label>
  <label>
    <input type="checkbox">
    螞蟻部落三
  </label>
</form>
</body> 
</html>

可以將文字框放入<label>之內，這次就不需要使用使用for屬性與<input>的id關聯起來。

一.for屬性:

<label>的for屬性值是要關聯元素的id屬性值，是這兩個元素關聯起來的必要條件。

看第一個程式碼例項中的片段: 

[HTML] 純文字檢視 複製程式碼
<input type="checkbox" id="a" >
<label for="a">螞蟻部落一</label>

二.form屬性（HTML5）:

規定<label>所屬的一個或多個表單，屬性值是表單的id屬性值。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="checkbox" id="a">
</form>
<label for="a" form="ant">螞蟻部落</label>
</body>
</html>

雖然此<label>在表單之外，但是還是屬於對應表單。

相關文章