当前位置：翔宇亭IT乐园 → IT知识库 → WEB → HTML

HTML label元素

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-17 09:20:41

在HTML中，<label>元素用于定义表单中控件元素的标题。

在HTML表单中，将控件关联一个<label>标签具有很大的优点。

HTML label元素

<label>元素的简单示例

在HTML表单中，通常有两种使用<label>的方法。

<form
				action="form_example.asp"
				id="form1"
				name="form1">

 <label
				for="yourName">您的姓名：</label>

 <input
				type="text"
				id="yourName"
				name="yourName">

 <br>

 <label>您的地址：<input
				type="text"
				id="yourAddr"
				name="yourAddr"></label>

 <br>

 <input
				type="submit">

</form>

在上例中演示了<label>元素的两种使用方法：

（1）定义一个<label>元素，使用它的for属性与对应的<input> id属性值进行关联。

（2）将<input>元素放在<label>和</label>之间。

<label>元素的作用

（1）在现代浏览器中，<label>标签中的文本内容会告诉用户当前控件输入值的含义。

（2）在输入控件获得焦点后，屏幕阅读器会读出<label>标签中的文本内容，以提示用户应该输入什么样的数据，特别是对需要辅助技术的用户会非常有用。

（3）当用户点击或触摸标签时，浏览器会将焦点移到其对应的输入控件，方便用户输入，对于单选或复选控件来说，用户点击其对应的标签时，会实现自动选中，这种技术提高了选中控件的区域。

<label>元素使用的方法

为了实现<label>标签的作用，设计者在将<label>与<input>标签关联时，需要为<input>元素添加id属性。然后，在<label>元素中添加for属性，使for属性的值与<input>元素id属性的值相同即可。

如果不想为<input>元素指定id属性，或不准备为<label>元素添加for属性，设计人员也可以直接将<input>直接定义在<label>和</label>标签时间。

<label>元素运用于单选按钮

单选按钮和复选按钮在运用<label>元素后可以增加用户点击区域，方便用户选中相关内容。

<form
				action="form_example.asp"
				id="form1"
				name="form1">

 <p>下面属于动物的一项是：</p>

 <input
				type="radio"
				value="apple"
				id="r1"
				name="ani"><label
				for="r1">苹果</label>

 <input
				type="radio" value="dog"
				id="r2"
				name="ani"><label
				for="r2">狗</label>

  <input
				type="radio"
				value="pear"
				id="r3"
				name="ani"><label
				for="r3">梨</label>

  <input
				type="radio"
				value="banana"
				id="r4"
				name="ani"><label
				for="r4">香蕉</label>

 <br>

 <input
				type="submit">

</form>

上例中，用户点击文字或相应的按钮都可以选中相应的项。

<label>元素用于复选按钮

<label>元素用于复选按钮的方法与单选按钮方法相似，具体可以参考下例。

<form
				action="form_example.asp"
				id="form1"
				name="form1">

 <p>下面属于水果的是：</p>

 <input
				type="checkbox"
				value="apple"
				id="c1"
				name="fr"><label
				for="c1">苹果</label>

 <input
				type="checkbox" value="dog"
				id="c2"
				name="fr"><label
				for="c2">狗</label>

  <input
				type="checkbox"
				value="pear"
				id="c3"
				name="fr"><label
				for="c3">梨</label>

  <input
				type="checkbox"
				value="banana"
				id="c4"
				name="fr"><label
				for="c4">香蕉</label>

 <br>

 <input
				type="submit">

</form>