学习网页之掌握 label 标签的用法

网页

使用 LABEL 对象

HTML 4.0 规范引入了 LABEL 对象,您可以使用它来将文本与其他任何 HTML 对象或内部控件相关联。无论用户单击 LABEL 或者 HTML 对象,链接的 LABEL 和 HTML 对象在引发和接收事件时行为一致。要链接 LABEL 和 HTML 对象,请将 LABEL 的 FOR 属性设置为等于 HTML 对象的 ID 属性。

下列示例将 LABEL 控件与文本框相关联。当用户单击 LABEL 控件(或者按下 ALT+T 组合键)时,LABEL 控件会将焦点设置到文本框:


以下是引用片段:
<label for="txtInputBox"><u>T</u>ype value:</label>
<input type="text" id="txtInputBox" name="txtInputBox" accesskey="t" />

label 主要是给表单组件增加可访问性设计的,一般我们都把 label 用在表单里。除以上方法,还可以直接用 label 套嵌整个表单组件和文本标签,如下面的例子:


以下是引用片段:
<form action="..." method="post">
<p>
<label>
   First Name
   <input type="text" name="firstname" />
</label>
<label>
   <input type="text" name="lastname" />
   Last Name</label>
</p>
</form>

根据 规范 这样文本会自动与邻接的表单组件关联,遗憾的是 IE 并不支持这个特性。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索html
, 对象
, 控件
, 表单
, 文本
, label
Label标签
,以便于您获取更多的相关知识。

时间: 2024-09-19 16:40:43

学习网页之掌握 label 标签的用法的相关文章

学习网页制作基础入门教程(5)背景标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 背景标签 1. 使用方法:<BODY BGCOLOR="#ffffff" BACKGROUND="bg.jpg"> 2. 标签解释:这个标签其实应该老早就要讲了,毕竟它是制作网页不可或缺的基本要素之一,我们背景颜色或图片的设定以及连接字体的颜色,统统都放在 <

学习网页制作基础入门教程(4)图象标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 图象标签 1. 使用方法:<IMG SRC="/UploadPic/2007-7/200777152731585.gif" ALT="本站特约模特儿" ALIGN=RIGHT BORDER=0 HSPACE=2 VSPACE=2 HEIGHT=56 WIDTH=32> 2. 标签解释:目前常见的网页图形

学习网页制作基础入门教程(2)排版标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 文字上的分隔标签 1. 使用方法:强制断行标签<BR> .强制分段标签<P> 2. 标签解说:我们在写文章时,有时候在特定的地方会强迫断行(<BR> ),或是在写完某一段的时候便会分段(<P>),制作网页也一样,而且更需要断行及分段的功能,以免整个网页看起来乱糟糟的. 3. 使用范例: 原始代码 显示结果  这是一个断行的例子 <BR> 看出来了吗?网页教学网 这是一个断行

学习网页制作基础入门教程(3)字体标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 标题标签 1. 使用方法:<H1>标题內容</H1> 2. 标签解释:标题的大小一共有六种,两个标签一组,也就是从 <H1> 到 <H6> , <H1> 最大,<H6>最小.使用标题标签时,该标签会将字体变为粗体字,并会自成一行. 3. 使用范例: 原始碼 呈現結果 <H1>标题1</H1> 标题1

学习网页制作基础入门教程(9)序列标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 学习网页制作基础入门教程(8)框架标签 无序标签 1. 序列标签基本上可分为两种,一种是"无序条列",一种是"有序条列".所谓"无序条列"

学习网页制作基础入门教程(8)框架标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 框架概念 1. 首先,各位先看看右边这张图片,将利用这张图来做解释,这样子,讲起来可能会清楚一些. 我们可以看见,右边的这个图片,一共分为 1 . 2 . 3 三个框架,每一个框架,各有

学习网页制作基础入门教程(7)表格标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 表格单元格对齐位置设定 1. 首先我们来看一个最简单的表格: 原始代码 显示结果 <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE&g

学习网页制作基础入门教程(6)连接标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 网页内部的连接 1. 使用方法: 先在欲连接处作记号:<A NAME="here"> 这里是你想连接的点 </A> 设定连接:<A HREF="#here"> 连接 </A> 2. 标签解

学习网页制作基础入门教程

教程|入门教程|网页 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)背景标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 学习网页制作基础入门教程(8)框架标签 学习网页制作基础入门教程(9)序列标签 学习网页制作基础入门教程(10)表单标签 学习网页制作基础入门教程(11)注意的问题