label標簽:

1.label標簽的作用

首先我們看一組代碼：

性別:男<input type="radio" value="男" name="gender"> 女<input type="radio" value="女" name="gender">

這是我們昨天寫的代碼，運行結果：

然后我們再加上label標簽：

性別:<input type="radio" value="男" name="gender" id="nan"> <label for="nan">男</label><input type="radio" value="女" name="gender" id="nv"> <label for="nv">女</label>

這是我們改進之后的代碼，運行結果：

**欸~，這不是沒區別嗎？**別著急，仔細看一下，我們就會發現在加入label標簽之前，我們的運行結果中鼠標點在這個"男"或者"女"的漢字上是沒有效果的。但是加入label標簽之后，我們點擊了漢字之后效果和點到了按鈕鍵是一樣的。

同樣的，其他type屬性也可以：

<label for="username">用戶名:</label> <input type="text" id="username" name="username" placeholder="請輸入用戶名"><br> <label for="password">密碼:</label> &nbsp;&nbsp;&nbsp;<input type="password" id="password" name="password" placeholder="請輸入密碼">

運行結果：

可以看到，我們的代碼讓用戶的體驗變得更好了！

2.label標簽的語法：

性別: <label for="nan">男</label> <!--這里的label里面的for屬性規定了一個值--> <!--label標簽是個雙標簽，雙標簽中間的值就是可以用來代替按鈕的文本--> <input type="radio" value="男" name="gender" id="nan"> <!--將上面的for屬性規定的值添加到這里的id屬性中就大功告成了！--> <label for="nv">女</label> <input type="radio" value="女" name="gender" id="nv">

如果有什么問題，歡迎評論區探討呀！

總結

以上是生活随笔為你收集整理的表单中的label标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。