转 html label标签的使用教程

最新推荐文章于 2024-03-11 22:27:38 发布
最新推荐文章于 2024-03-11 22:27:38 发布
阅读量890 收藏 1
点赞数

在Dreamweaver8中，只要一加入表单或表单对象，文本框等等，就会在代码中加入一个<label></label>，一直没明白这个label是做什么的，今天正好看到了解释：
Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。
FOR属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY属性：
功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

注释
要将 LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是，要提交表单，你必须为 LABEL 元素所绑定到的控件指定NAME。
有两种方法给所指定的快捷键添加下划线。LABEL 元素的 rich text 支持可以在 ACCESSKEY 属性所指定的快捷键字符两侧加上 U 元素。如果你更愿意使用样式表(CSS)来应用样式，可以将该字符包含在 SPAN 中，并设置样式为“text-decoration: underline”。

如果用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。

需要注意的地方：
1、标签不允许嵌套。
2、此元素在Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。
3、此元素是内嵌元素。
4、此元素需要关闭标签。

元素示例代码
下面的例子使用了 LABEL 元素和 ACCESSKEY 属性设置文本框的焦点。
<LABEL FOR="oCtrlID" ACCESSKEY="1">
<SPAN style="text-decoration:underline;">名字</SPAN>: <font color="#999999">按ALT+1到文本框</font>
</LABEL>
<INPUT TYPE="text" NAME="TXT1" VALUE="阿会楠" SIZE="20" TABINDEX="1" ID="oCtrlID">
演示：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
        <title>html label作用</title>
    </head>
    <body>
        <LABEL FOR="oCtrlID" ACCESSKEY="1"> 
        <SPAN style="text-decoration:underline;">名字</SPAN>: <font color="#999999">按ALT+1到文本框</font>
        </LABEL> 
        <INPUT TYPE="text" NAME="TXT1" VALUE="阿会楠"  SIZE="20" TABINDEX="1" ID="oCtrlID">
    </body>
</html>

fengxinyixiao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中lable标签的作用
02-01
html中lable标签的作用和几个例子
《HTML5从入门到精通》中文学习教程
12-14
《HTML5从入门到精通》是一本全面介绍HTML5技术的中文学习教程，旨在帮助初学者和有一定基础的学习者深入理解和掌握这一现代网页开发的标准。HTML5是超文本标记语言（HTML）的最新版本，它引入了许多新的特性和功能...
HTML 标签
doubleIT的专栏
01-30 438
  标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。    Label 中有两个属性是非常有用的,一个是FOR、
【HTML】label 标签
小秀的博客
08-06 2032
标签用于为表单元素创建标签文本或标题。它可以与输入字段（如文本框、单选按钮、复选框等）和其他表单元素关联起来，以提高可用性和可访问性。这样做的好处是，用户单击标签时，关联的输入字段会自动聚焦（获取焦点），从而提供更好的用户体验。这样做的好处是，单击标签时，相关的表单元素会自动选中（获取焦点），从而提高可用性和可访问性。标签可以提高表单的可用性、可访问性和用户体验。标签将文本 “用户名：” 与一个文本输入框进行包裹。标签，并根据实际情况选择合适的用法。属性与目标表单元素建立关联。属性的值应与目标元素的。
HTML <label> 标签
weixin_33698823的博客
05-11 60
定义： 1、<label>标签为input 元素定义标注（标记） 2、label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性：当在label元素内点击文本，浏览器就会自动将焦点转到和标签相关的表单控件上。（通过使用for属性） 属性： 1、for ： 用法及描述：可把label绑定到另外一个元素。"for"属性的值设置为绑定的相关元素的id属性...
HTML - label标签
qq_33962481的博客
05-14 4478
文章目录一、label标签的作用二、使用1.语法 一、label标签的作用 <label>标签用于绑定一个表单元素, 当点击<lable>标签内的文本时, 浏览器就会自动将焦点转到或者选择对应的表单元素上. 二、使用 1.语法 <form action="#" method="POST"> <label for="name">用户名: </label> <input type="text" name="username"
html label标签的使用教程
10-30
html label标签的使用教程
html教程.docx
02-28
HTML，全称为HyperText ...以上只是HTML教程中的一部分内容，实际上HTML还包括更复杂的布局技巧、事件处理、响应式设计等多个方面。学习HTML是Web开发的第一步，结合CSS和JavaScript，可以构建功能丰富的交互式网页。
入门级HTML教程-HTML元素
01-30
`<label>`为表单控件添加关联的标签。`<legend>`在`<fieldset>`内的标题。`<li>`定义列表项。`<link>`创建文档之间的关系，如样式表和图标。`<listing>`（非标准）以固定宽度显示文本，类似代码。`<map>`定义图像...
chexpert_multiclass_multilabel:我使用 CheXpert 数据集的工作
08-04
+多标签和多类分类班级标签格式化标签/类以进行建模使用 SKLearn 进行多标签/多类验证超参数PyTorch 查找器合并元数据关于热图的说明推理功能 CheXpert 项目CheXpert是一个用于胸片解释的大型公共数据集，由 65,240 ...
HTML中的lable
xiaosheng
01-03 686
在input的输入框中，为了增加用户体验，一般用lable标签将input包括起来，这样的话，可以点击文字，直接将鼠标定位到输入框中 下拉框：用select里面包括这option标签，如果想要默认选中某个option的话，只需要在option标签中添加select='selected’即可 ...
HTML lable标签
热门推荐
小葵坤_易安的博客
07-18 2万+
一、HTML < label> 定义与用法 < label> 标签为 input 元素定义标注（标记） label 元素不会向用户呈现任何特殊效果。若在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上 for属性可把 label 绑定到另外一个元素，< label> 标签的 for 属性...
HTML:表单标签中的lable标签
weixin_46682277的博客
12-02 759
label标签的作用是用于绑定一个元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点，对用户更友好。 绑定元素的方式有两种： 第一种：直接用label标签包含住input表单，例： <label>用户名：<input type = "text" name = "username" value = "请输入用户名"></lable> 该方法适合单个表单选择 第二种：使用for和id规定lable与哪个表单元素绑定，例： <lable for = "n
html_label标签
qq_43260366的博客
08-15 1517
通过 label标签的for属性 和 表单控件的id属性 显示关联；如上代码：label标签与表单控件相关联，父组件绑定点击事件；当点击文本“名称：”时，会自动聚焦在input输入框中；隐士关联是直接使用label标签包裹表单控件；此时只有点击 单选框才能选中，点击文本不起作用。此时点击 男/女 就会选中其前面的单选框；修饰符阻止了label标签的默认事件·；最近发现一个比较有意思的现象。阻止元素的默认事件；...
HTML——label标签
Jaylan的博客
05-06 3789
label标签是HTML中的一个标签，用于为表单元素（如文本框、复选框等）提供标签或说明文本。通常与input标签配合使用。label标签可以通过for属性与相应的表单元素建立联系，
HTML中的<lable>标签用法
xiaokangmiclong的博客
01-26 709
请点击Female文本标记之一，就可以触发相关控件，而Male不能： Male Female
HTML 中 ＜lable＞ 标签的用法
CyberPlayer的博客
02-25 1440
<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果你在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。 单击文本，例如单击文字 M
HTML中的 lable 标签的介绍和使用
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
10-13 1362
label ：是一个 作用域 标签 我们一般用在单选按钮、复选按钮、按钮中，提高用户体验 主要原因是，label中的区域都是可选了的 下面我们就以 radio标签为例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
前端学习之HTML的label标签
最新发布
banliyaoguai的博客
03-11 387
for属性规定label与哪个表单元素绑定,绑定的是id。绑定一个表单元素，被绑定的表单元素会获得输入焦点。labeI标签为input标签定义元素作用。
Tkinter的详细使用教程
07-14
下面是一个简单的Tkinter使用教程： 1. 导入Tkinter模块： ```python import tkinter as tk ``` 2. 创建主窗口： ```python root = tk.Tk() ``` 3. 添加组件： 可以添加各种GUI组件，比如按钮、标签、文本框等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值