将 label 标签包裹在表单项周围还是使用 HTML 中的“for”属性更好?

2024-01-11

我知道您可以同时使用两者,但是使用其中一个比使用另一个更好吗?如果是这样,为什么?

“for”属性的示例:

<input type="text" id="male"><label for="male">Male</label>

包裹示例:

<label>Age:<input type="text"></label>

从语义上讲,两种可能性是相同的。但根据您想要的布局,这两种可能性各有优点和缺点。例如,如果您希望标签位于完全不同的位置,则将输入放入标签中是没有任何意义的。但如果你想通过 css 制作悬停效果,那就设置 e。 G。标签和输入周围区域的背景,最好将输入放入标签中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 label 标签包裹在表单项周围还是使用 HTML 中的“for”属性更好? 的相关文章

  • 避免 Django 中表单输入元素 ID 重复

    当一页上的两个表单具有相同名称的字段时 Django 将生成无效的 HTML
  • HTML 解析 - 从 div 内的表格获取数据?

    我对 HTML 解析 抓取的整个想法还比较陌生 我希望我能来这里获得我需要的帮助 基本上我想要做的 我认为 是指定我希望从中获取数据的页面的 url 在这种情况下 http www epgpweb com guild us Caelestr
  • 如何将内部 div 与外部 div 的底部对齐?

    我需要将内部 div 与外部 div 的底部对齐 我的代码如下所示 div class myOuterDiv div class div1 floatLeft Variable content here div div class div2
  • .addClass 仅添加到无序列表中单击的项目符号

    我有一个简短的无序列表 其中有两个项目符号 我添加了一些 Javascript 这样当我单击项目符号时 它会向其中添加一个类 问题是 它将该类添加到所有现有的 li 中 而不仅仅是我单击的那个 这是 JSFiddle http jsfidd
  • 如何使用 Nokogiri 漂亮地打印 HTML?

    我用 Ruby 编写了一个网络爬虫 并且正在使用Nokogiri HTML来解析页面 我需要打印该页面 在 IRB 中闲逛时 我注意到一个pretty print方法 然而它需要一个参数 我不知道它想要什么 我的爬虫正在缓存网页的 HTML
  • 使用 CSS 网格布局跨越所有列/行的项目

    随着 CSS 网格布局模块很快在 Firefox 和 Chrome 中发布 我想我应该尝试了解如何使用它 我尝试用一 个项目创建一个简单的网格a跨越所有行的左侧 其他项目 b c d e等 跨越各个行的右侧 跨越行右侧的项目数量是可变的 因
  • Internet Explorer 10,最大 div 大小为 1.533.917 像素

    我需要制作一个非常大的 div 以百万像素为单位 搜索我发现这个线程证明 IE 可以管理最多 10 000 000 px 确定最大可能的 DIV 高度 https stackoverflow com questions 7719273 de
  • HTML 和 CSS 的基本编码标准 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道它们是否是像 PSR 01 这样的 HTML 和 CSS 基本编码标准 我尝试谷歌搜索和搜索 但没有找到 我建议看看类似的东西
  • 如何将 twitter bootstrap 与 Spring MVC 一起使用

    我不明白为什么我的 Spring MVC 页面没有隐藏引导样式 我的你好 jsp
  • CSS 中的 &::before、&::after 是什么? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想创建一个垂直时间线 然后我发现了这个页面 http cssdeck com labs oz2nu681 http cssdeck
  • 如何使用 svg 使 iframe“可聚焦”

    我想检测 iframe 上的点击 这建议 https stackoverflow com a 8101458 246719执行此操作的方法是捕获父窗口上的模糊事件 但是 当用户单击 iframe 内的 svg 时 它不会获得焦点 根窗口也不
  • 如何设置 jQuery 可拖动的最小/最大左和最小/最大右

    我复制了一份JSbin来练习 JSbin链接在这里 https jsbin com gififikisa edit html css js output 实际站点链接在这里 http 79 170 40 181 emory com Proj
  • 使用 Sandcastles 将图像嵌入 CHM 帮助文件

    我正在使用 Sandcastles 为我的项目生成 CHM 帮助文件 我想要一个可以分发的独立 CHM 文件 最好是单独分发 我遇到的问题是嵌入图像appears该图像需要与 CHM 文件分开存在于用户系统上 当我查看 CHM 文件的来源时
  • Java将Html转换为图像

    我生成了一个包含我客户信息的 Html 以便他可以将它们附加到您的网站或电子邮件中 但有些客户要求我生成图像而不是 html 我使用下面的代码生成图像 运行顺利 但是 html 中包含的图像没有生成 当我在浏览器中打开 HTML 代码时 它
  • CSS过渡div晃动

    为什么当我使用位置绝对和百分比宽度时 当我将鼠标悬停在上面的 div 上时会出现此故障 有例子 我在更复杂的网站上遇到了这个故障 div class box text div div class container div box widt
  • 在 Bootstrap 3 中将容器类嵌套在容器流体类中?

    除了填充问题之外 为什么不建议将 container 嵌套在 container fluid 中 如果将子容器填充归零 如下面我的代码所示 则效果与拥有一个容器相同 此外 如今 不同的全宽和固定宽度布局似乎很常见 我知道文档说了什么 LIN
  • 如何使页面上的所有内容变大?

    如果我在浏览器中打开我的网站并按Ctrl 有几次 一切都变得更大 网站对我来说看起来更好 我可以通过在 HTML 代码中添加一些内容来实现相同的效果吗 以便用户默认看到更大的所有内容 而无需按Ctrl 我想让所有东西都变大 文本和图像 如果
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • 当内部图像缩放时,包裹 div 不会调整大小(窗口大小调整的结果)

    我希望我的图像随着窗口高度的变化而调整大小 同时保持包含的 div 收缩包裹图像 我尝试使用 div img src http akamaicovers oreilly com images 9780596806767 cat gif al
  • 通过jquery ajax()和serialize()提交html表单

    我想通过 jquery ajax 提交此表单 这是我所做的 但它不起作用 即表单正在提交并刷新页面 但我没有看到响应 即在同一页面上打印数组 HTML

随机推荐

  • iPhone 开发者的 IRC 频道? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想知道是否有一个好的 IRC 频道可以让 iPhone 开发人员聚在一起讨论代码等 人们已经在使用任何
  • 如何在Excel VBA中进行多重转置

    我有一个分散的项目列表 我需要将它们全部放在一列中 分散的项目可以放入空白单元格内的一列中 这是我的要求 第一列中的值不得更改位置 我有一个进行转置的代码 但它改变了第一列中值的位置 将所有内容放在一起 因此粉色的位置 第 9 个 变为第
  • Rails:保存后验证关联?

    我有一个User模型有很多roles 角色包含一个user id领域 我想要validate presence of 问题是 如果我在创建时为用户分配角色 验证将失败 因为未设置 user id 现在我do想要验证 user id 是否存在
  • 连接两个具有不同数据的相同表结构

    Edit After attempting the COALESCE method I m now seeing an issue where the data is repeating itself with the same data
  • 为 Ubuntu 中的现有文件创建新的 BitBucket 存储库

    我有一些文件想要添加到 BitBucket 上的新存储库中 如何使用 Ubuntu 命令行执行此操作 另一种方法是首先从 BitBucket 网站创建存储库 但我不知道如何将存储库克隆到非空目录中 更多详细信息布鲁斯的评论 https st
  • MySQL 查询当前周的yearweek 从周四开始,周三结束

    我有一个SQL设置语句以获取当前日历周的数据 默认情况下 这会抓取从周日开始到周六结束的数据 我希望改变这一点 以便日历周的开始是星期四 星期三结束 以下是我的发言 SELECT FROM transactions WHERE yearwe
  • 使用 mongo java 驱动程序执行查找时 Cosmos Db 回复消息长度错误

    使用 Mongo Java 驱动程序版本 3 4 2 尝试对包含大约 700 个文档的集合执行查找查询已开始引发以下异常 当集合较小时 这种情况不会发生 这些限制看起来是在连接过程中设置的 com mongodb MongoInternal
  • 聚合物服务和服务人员

    我正在尝试开始调试我的聚合物应用程序 我通过复制我的想法手工制作了它PolymerCLI Polymer init does 我不确定正在加载服务人员的是什么 开发的默认选项只做了一个console info 打电话说它已被禁用以进行开发
  • 在 R 中查找给定数据的“行方式”“众数”[重复]

    这个问题在这里已经有答案了 Unlike rowMeans and rowMedians 这给了我们计算出来的数字 mode x 给出数据的存储模式 我的问题 对于以下数据框 我如何计算row wise Mode Data Item A B
  • 如何在 OS X 上监视文件更改?

    我希望收到有关写入给定文件的通知 无需轮询 无需从文件中读取 也无需监视父目录并查看文件修改时间戳 我怎么做 我找不到一个简单的例子 所以我贡献我的想法以供将来参考 interface FileWatch property assign d
  • Delphi 中的 DataModule (dm) 是什么?

    在您的项目中使用 DataModule 的目的是什么 与普通的类或模块相比 它有什么特殊的属性吗 它通常用于什么约定 数据模块是一种非可视 表单 容器 可以包含非可视组件 通常是数据库组件 尽管可以添加任何组件 例如对话框和Indy htt
  • 数组初始化C

    这个初始化的意义是什么 char arr 10 0 我熟悉char arr 10 0 它将所有元素设置为零 并且char arr 10 1 2 它将前两个元素设置为 1 和 2 ascii 其余元素设置为 0 我对上面的格式不熟悉 快速测试
  • 将元组转换为 proplist

    如何从 MongoDB 转换元组 id lt lt vasya gt gt password lt lt 12ghd gt gt age undefined 到支柱列表 id lt lt vasya gt gt password lt lt
  • 为什么当我运行此测试时,这个 sinon 间谍没有被调用?

    我有一个骨干模型 class DateTimeSelector extends Backbone Model initialize gt bind change date updateDatetime bind change time up
  • 在 ASP.NET 中下载文件而不弹出窗口

    我正在使用代码下载文件 btnDownloadTemplate Attributes Add onClick window open StudyReport WordReportTemplate doc OpenTemplate resiz
  • 使用 selenium 在 Chrome 中“未知错误:无法读取 null 的属性‘scrollleft’”

    在 Chrome 中 当我单击按钮时 出现 未知错误 cannot read property scrollleft of null 他们是该页面中的 1 个输入字段 我可以输入值 因为只有按钮单击不起作用 此点击在 Firefox 中运行
  • 使用从 Azure AD 和 ADAL 获取的令牌访问本地 SharePoint

    The Goal 使用 OAuth 从基于 Apache Cordova 的移动应用程序通过 REST 请求访问本地 SharePoint 数据 到目前为止我已经尝试过的 1 Azure 移动服务 混合连接 AAD ADAL 与博文类似代表
  • Qt 中的测试用例在哪里?

    我已经阅读了 Qtestlib 手册和教程 并逐步了解了开发测试的过程 如果我是对的 Qt 已经开发了一些测试用例来测试其功能 谁能告诉我Qt源代码树中这些代码在哪里 如果我必须修改它们 测试用例 我可以这样做吗 提前致谢 尼夫 单元测试不
  • 使用 Hilt 注入 CoroutineWorker:无法实例化woker

    有人问过同样的问题 但它们对我不起作用 一开始我使用的是最新版本的工作管理器 即 2 7 alpha 3 但我降级了 因为它只兼容 android 12 预览版 sdk 错误仍然存 在 它无法实例化工作人员 因为这些依赖项包含在工作人员的构
  • 将 label 标签包裹在表单项周围还是使用 HTML 中的“for”属性更好?

    我知道您可以同时使用两者 但是使用其中一个比使用另一个更好吗 如果是这样 为什么 for 属性的示例