技術標籤：前端知識htmlcss

目錄

使用label標籤實現點選文字相應文字框獲取焦點

應用例項

具體用法

label標籤的定義：

label標籤的作用：

程式碼示例

簡要文字說明：

使用label標籤實現點選文字相應文字框獲取焦點

點選文字，就可以選中單選框或者複選框，亦或者是對應的文字框。

應用例項

在性別的選擇上，對於單選框的選擇只有很小一塊區域，操作起來不是很方便，為了解決這個問題就可以使用label標籤。

具體用法

label標籤的定義：

<label>用於為輸入控制元件定義文字標籤（label）——即顯示在輸入控制元件旁邊的說明性文字。

label標籤的作用：

用<label>元素定義的文字標籤，從顯示上看與其他文字毫無差異。

不過，它為滑鼠使用者增強了可用性：當用戶點選由<label>元素定義的文字標籤時，與該文字標籤關聯的輸入控制元件將獲得焦點。

要為<label>指定關聯的輸入控制元件，只需把相關控制元件的id賦值給<label>標籤的for屬性即可。

程式碼示例

<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</form>
 

簡要文字說明：

上段程式碼的最終樣式就是：

• 當點選單選框時，能實現選中；
• 當點選文字“男”時，也能實現單選框的選中效果。

label標籤對於移動端還是比較好用的一個屬性標籤，畢竟手機介面本來就小，單單點選單選框實現選中還是對使用者來說不夠友好的。