HTML label标记 HTMLlabel标记|HTML5

本文概述

属性
支持的浏览器

< label> 标记用于为表单的< input> 元素指定标签。它将标签添加到表单控件, 例如文本, 电子邮件, 密码, 文本区域等。当用户单击< label> 元素内的文本时, 将切换控件。
句法：

< label> form_content... < /label>

可以通过以下两种方式使用此标记：
1.在< input> 元素内设置id属性, 并在< label> 标签内为for属性指定其名称。
示例：本示例将for属性与表单中使用的每个标签标记一起使用。

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < title> Example of Label tag < /title> < style> /* The following tag selector body use the font-family and background-color properties for body of a page*/body { font-family: Calibri, Helvetica, sans-serif; background-color: pink; } /* Following container class used padding for generate space around it, and also use a background-color for specify the color lightblue as a background */ .container { padding: 50px; background-color: lightblue; } /* The following tag selector input use the different properties for the text filed. */ input[type=text] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus { background-color: orange; outline: none; } div { padding: 10px 0; } hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* The following tag selector button uses the different properties for the Button. */ button { background-color: #4CAF50; color: white; margin: 8px 0; border: none; cursor: pointer; padding: 16px 20px; width: 100%; opacity: 0.9; } /* The following tag selector hover uses the opacity property for the Button which select button when you mouse over it. */ button:hover { opacity: 1; } < /style> < /head> < body> < form> < div class="container"> < center> < h1> Registration Form< /h1> < /center> < hr> < label for="firstname"> Firstname < /label> < input type="text" id="firstname" name="ftname" placeholder= "Firstname" size="15" required /> < label for="middlename"> Middlename: < /label> < input type="text" id="middlename" name="mname" placeholder="Middlename" size="15" required /> < label for="lastname"> Lastname: < /label> < input type="text" id="lastname" name="ltname" placeholder="Lastname" size="15"required /> < div> < label for="gender"> Gender : < /label> < br> < input type="radio" id="gender" value="http://www.srcmini.com/Male" name="gender" checked > Male < input type="radio" id="gender" value="http://www.srcmini.com/Female" name="gender"> Female < input type="radio" id="gender" value="http://www.srcmini.com/Other" name="gender"> Other< /div> < label for="Phone"> Phone: < /label> < input type="text" name="country code" placeholder="Country Code"value="http://www.srcmini.com/+91" size="2"/> < input type="text" id="Phone" name="phone" placeholder="phone no." size="10"/ required> < label for="email"> Email < /label> < input type="text" id="email" placeholder="Enter Email" name="email" required> < button type="submit" value="http://www.srcmini.com/submit"> Submit< /button> < button type="reset" value="http://www.srcmini.com/submit"> Reset< /button> < /form> < /body> < /html>

立即测试
输出：

文章图片
2.我们也可以在表单的< label> 元素内使用< input> 标签。
示例：本示例使用< / label> 元素内的< input> 标签。

< !DOCTYPE html> < html> < head> < meta name="viewport" content="width=device-width, initial-scale=1"> < style> /* The following tag selector body use the font-family and background-color properties for body of a page*/ body{ font-family: Calibri, Helvetica, sans-serif; background-color: pink; } /* Following container class used padding for generate space around it, and also use a background-color for specify the color lightblue as a background */ .container { padding: 50px; background-color: lightblue; } /* The following tag selector input use the different properties for the text filed. */ input[type=text] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus { background-color: orange; outline: none; } div { padding: 10px 0; }hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* The following tag selector button use the different properties for the Button. */ button { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; margin: 8px 0; width: 100%; opacity: 0.9; }button:hover { opacity: 1; }< /style> < /head> < body> < form> < div class="container"> < center> < h1> Registration Form < /h1> < /center> < hr> < label> Firstname < input type="text" name="firstname" placeholder= "Firstname" size="15" required /> < /label> < label> Middlename: < input type="text" name="middlename" placeholder="Middlename" size="15" required /> < /label> < label> Lastname: < input type="text" name="lastname" placeholder="Lastname" size="15"required /> < /label> < div> < label> Gender : < br> < input type="radio" value="http://www.srcmini.com/Male" name="gender" checked > Male < input type="radio" value="http://www.srcmini.com/Female" name="gender"> Female < input type="radio" value="http://www.srcmini.com/Other" name="gender"> Other < /label> < /div> < label> Phone : < input type="text" name="country code" placeholder="Country Code"value="http://www.srcmini.com/+91" size="2"/> < input type="text" name="phone" placeholder="phone no." size="10"/ required> < /label> < label> < b> Email : < /b> < input type="text" placeholder="Enter Email" name="email" required> < /label> < button type="submit" value="http://www.srcmini.com/submit"> Submit< /button> < button type="reset" value="http://www.srcmini.com/submit"> Reset< /button> < /form> < /body> < /html>

立即测试
输出：此示例的输出也与第一个示例相同, 但是它们之间的区别是实现。