HTML<label>标签

server/2025/2/2 12:00:35/
htmledit_views">

例子

三个带标签的单选按钮:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

定义和用法

标签<label>为几个元素定义了标签:

<输入类型=“复选框”>
<输入类型=“颜色”>
<输入类型=“日期”>
<输入类型=“datetime-local”>
<输入类型=“电子邮件”>
<输入类型=“文件”>
<输入类型=“月”>
<输入类型="数字">
<输入类型=“密码”>
<输入类型=“radio”>
<输入类型="范围">
<输入类型=“搜索”>
<输入类型="电话">
<输入类型=“文本”>
<输入类型=“时间”>
<输入类型=“url”>
<输入类型=“周”>
<米>
<进度>
<选择>
<文本区域>
正确使用包含上述元素的标签将带来以下好处:

屏幕阅读器用户(当用户聚焦于元素时,会大声读出标签)
难以点击非常小的区域(例如复选框)的用户 - 因为当用户点击<label>元素内的文本时,它会切换输入(这会增加点击区域)。 
提示和说明
提示:的for属性<label>必须等于相关元素的 id 属性才能将它们绑定在一起。也可以通过将元素放在<label>元素内部来将标签绑定到元素。 

支持的浏览器

全局属性
该<label>标签还支持HTML中的全局属性。

事件属性
该<label>标签还支持HTML中的事件属性。

相关页面
HTML DOM参考:标签对象

默认CSS设置
<label>大多数浏览器将使用以下默认值显示该元素:

例子
label {
  cursor: default;
}

<!DOCTYPE html>
< HTML >
<头>
<样式>
标签{
光标:默认;
</样式>
</头>
<正文>
<p>标签元素显示如下:</p>
<输入类型=“radio”ID =“html”名称=“fav_language”值=“HTML”
<标签for =“htm1”>HTML</标签>< br >
<输入类型=“radio”ID=“css”名称=“fav_language”值=“CSS”
<标签for=“css”>
CS5</标签><br>
输入类型=“radio”ID=“javascript”名称=“fav_language”值=“JavaScript”>
<标签for=rjavascript”>JavaScript</标签>
</正文>
</html>


http://www.ppmy.cn/server/164327.html

相关文章

FPGA实现光纤通信(3)——光纤8b/10b编码数据回环

前言 光纤通信属于高速串行通信,具有较高的数据传输速率,通常用于服务器以及通信设备之间用于高速数据交换,对于xilinx 7系列的FPGA,内部具有集成的高速接口用于实现光纤通信。本次就来实现8b/10b编码数据回环。 测试环境:vivado版本:2020.02 FPGA芯片:XC7K70T 测试说…

Synology 群辉NAS安装(9)安装jira

Synology 群辉NAS安装&#xff08;9&#xff09;安装jira 写在前面准备安装jira第一次的记录第二次成功的记录环境要求使用 docker-compose 启动 jira破解 jira 具体操作下代码和第一次docker-compse up以获取images得到images原始的docker-compose.yml原始的docker-compose.ym…

AtCoder Beginner Contest 391(ABCDE)

A - Lucky Direction 翻译&#xff1a; 给你一个字符串 D&#xff0c;代表八个方向&#xff08;北、东、西、南、东北、西北、东南、西南&#xff09;之一。方向与其代表字符串之间的对应关系如下。 北&#xff1a; N东&#xff1a; E西&#xff1a; W南&#xff1a; S东…

Python 数据分析 - 初识 Pandas

Python 数据分析 - 初识 Pandas 简介SeriesDataFrame创建基本操作添加删除 简介 Pandas 基于 NumPy 开发&#xff0c;它提供了快速、灵活、明确的数据结构&#xff0c;旨在简单、直观地处理数据。 Pandas 适用于处理以下类型的数据&#xff1a; 有序和无序的时间序列数据带行…

java 字符串日期字段格式化前端显示

在 Java 应用程序中&#xff0c;如果你有一个字符串类型的日期字段&#xff0c;并希望将其格式化后显示在前端&#xff0c;可以通过多种方式实现。这通常涉及到在后端将字符串转换为 Date 或 LocalDateTime 等对象&#xff0c;然后使用适当的注解或配置来确保它们以正确的格式序…

5 个开源且免费的提示词管理系统,按照 从优到劣 排序

1. PromptSource 研发背景: 国家: 国际协作&#xff08;主要由美国和欧洲团队主导&#xff09;。 团队: BigScience Workshop&#xff0c;一个由 Hugging Face 和多个研究机构共同支持的开源社区。 简介: 专注于创建、管理和共享提示词模板。 特点: 提供 Web 界面&#xff…

【Elasticsearch 】悬挂索引(Dangling Indices)

Elasticsearch 悬挂索引&#xff08;Dangling Indices&#xff09;解析与管理 1. 悬挂索引的定义 悬挂索引&#xff08;Dangling Indices&#xff09;是指存在于节点上但未被集群元数据识别的索引分片。这些索引分片不会参与到集群的正常索引操作中。 2. 悬挂索引的产生原因…

build报错:Your build is currently configured to use incompatible Java 21.0.3 and Gradle 5.4.1Cannot...

报错显示 报错如图。 报错原因 JDK和gradle版本不一致。 成功解决方案 将jdk版本改为1.8&#xff0c;问题解决。 尝试过未成功的方案 升级gradle版本&#xff0c;升级后报错如下。