p 与 ol 或 ul 的表单样式

2024-01-15

通常我使用无序列表标签来设计表单,例如

<fieldset>
    <ul>
        <li>
            <label for="txtName">Name</label>
            <input type="text" id="txtName" />
        </li>
    </ul>
</fieldset>

然而,我经常看到使用<p>标签代替,像这样:

<fieldset>
    <p>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
    </p>
</fieldset>

哪一个在语义上更正确?除了以下方法之外,不同的方法有什么优点或缺点?<p>风格更简洁?

编辑:显然在这里打开了一罐蠕虫 - 更多选择,啊! :) W3C 有推荐吗?

有趣的是,W3C 的建议似乎是最不优雅的解决方案:

<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>

遗憾的是,对于标记表单元素的最佳约定,没有更强有力的指导。


在我看来,一组表单控件既不是列表项也不是段落。当我标记表单时,我将标签/输入组包装在<div>s。如果您尝试标记div表单控件之间存在差异,那么不要害怕使用<div>.

<fieldset>
  <div class="field">
    <label for="txtName">Name</label>
    <input type="text" id="txtName" />
  </div>
  <div class="field">
    <label for="txtTitle">Title</label>
    <input type="text" id="txtTitle" />
  </div>
</fieldset>

从你给出的例子来看,<p>可能会“更好”地降级,因为如果 CSS 不可用,您将不会在项目旁边看到项目符号,并且控件组可能会间隔得相当好。

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

p 与 ol 或 ul 的表单样式 的相关文章

  • JavaScript 跨浏览器单击 HTML DOM 元素

    是否有可用的普通 JavaScript 跨浏览器函数能够触发 HTML DOM 元素 包括 div 等非表单元素 上的单击事件 大多数走这条路的人要么最终开发自己的事件管理系统 这并不难 但很烦人 要么在可用的功能范围内工作 如果所有浏览器
  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday
  • 可见性的替代方案:折叠在 IE 和 Chrome 上不起作用

    以下页面 table border 1 tr class cccc td one td tr table 仅适用于 Firefox IE 始终显示该行 而 Chrome 隐藏该行但显示其垂直空间 那么 如何仅使用 CSS 完全隐藏一行呢
  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • CSS 选择器用于选择最后两个子项,而不知道列表中有多少项

    我有一个无序列表 它有时包含 4 5 6 或 7 个项目 我想知道是否有一个 CSS 选择器来选择最后两项 我意识到 last child会给我最后一件物品 是否有 倒数第二个孩子 选择器 或者 孩子数量 2 选择器 HTML ul li
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 使用溢出时无法隐藏滚动条:auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • Google 再营销标签 - iframe 高度问题

    我注意到 Google 的再营销代码会在我的页面底部插入一个 iframe 问题是 iframe 弄乱了我的布局 它的高度为 13 像素 并且在底部留下了空白的白色垂直空间 我尝试用 css 隐藏它 但它在 IE9 中仍然可见 iframe
  • 如何将当前元素传递给 Knockout.js 绑定中的 Javascript 函数?

    因此 我尝试根据是否选中子复选框 使用 Knockout js 将类添加到元素 为此 我试图通过this作为我的函数的参数 目前 我的精简 DOM 结构如下 tr td td tr
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • xpath:选择中断标签之前和之后的文本节点

    考虑以下因素 混合 br and br text1 br text2 br text3 br text4 br text5 如何找到每个文本节点 我正在考虑符合 br 标签之前或之后的条件的东西 但不确定是否 br and br 在 xpa
  • 随机定位的 div,不重叠

    所有 div 都像我需要的那样 随机 放置 但它们偶尔会重叠 这只是一个机会问题 我怎样才能防止这种情况发生 理想情况下我能够设置它们之间的最小距离 我可以通过进一步开发当前的 javascript 来实现这一目标吗 我需要考虑完全不同的方
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互

随机推荐

  • 为什么要让用户在 PayuMoney 网关的 android SDK 中登录?

    我正在尝试集成适用于 Android 的 PayUMoney SDK 并成功将 SDK 添加到我的应用程序中 当用户单击支付按钮时 将打开登录页面 为什么要让用户登录 创建 payu 帐户 一旦用户按下支付按钮 支付选项就会打开 但事实并非
  • NSPredicate 中 ALL 、 ANY 和 SOME 运算符之间的区别

    我真的很难理解这 3 个 看起来像ANY and SOME做同样的事情 但我看不出有什么区别ALL 让我们有一个组列表 每个团体都有人类型的成员 每个人都有一个年龄 所有会员年龄 gt 30 意味着您将找到一个成员全部年龄超过 30 岁的群
  • Django unique_together 与可为空的外键

    我在使用 Sqlite 的开发机器中使用 Django 1 8 4 并且有以下模型 class ModelA Model field a CharField verbose name a max length 20 field b Char
  • 搜索自然语言句子结构

    存储和搜索自然语言句子结构树数据库的最佳方式是什么 Using OpenNLP 的 http incubator apache org opennlp 英语树库解析器 我可以对任意句子进行相当可靠的句子结构解析 我想做的是创建一个工具 可以
  • UserProfile 状态在 bot v4 中的用户之间保持不变

    当我有两个机器人实例时 如果我将机器人部署到 Azure 则可以是两个模拟器窗口或两个浏览器 输入的第一个名称对于所有其他实例都是持久的 实例一 https i stack imgur com WsPw7 jpg https i stack
  • 将spawn()的stdout/stderr重定向到Ruby中的字符串

    我想使用spawn 对于多个并发子进程 在Ruby 中执行外部进程 并将stdout 或stderr 收集到一个字符串中 这与使用Python 的子进程Popen communicate 可以完成的方式类似 我尝试将 out err 重定向
  • ReadableByteChannelImpl 如何处理中断

    我正在尝试使用Channels newChannel包装输入流以支持中断 我看到了关于这是否有效的相互矛盾的信息 包括 ReadableByteChannelImpl 中的注释 Not really interruptible In Rea
  • 带有字符串键的 Lua 表不能使用数字索引?

    我是 Lua 的初学者 我认为使用字符串键将值推送到表中也会自动执行数字索引 但我认为我错了 我的代码 local t t name John t age 30 print Name t name nAge t age 虽然这段代码运行良好
  • 使用 css 3d 转换后如何修复 Safari 5 Mac OS X 中的脆文本?

    当应用 css 3d 变换的元素之后 相对和绝对定位的元素触发奇怪的行为时 我遇到了问题 为了解决这个问题 我必须设置背景颜色 但是如果我需要透明度怎么办 这是重现该错误的最低限度 http jsfiddle net 8VABq 3 htt
  • 如何获取 DD-MM-YYYY 格式的日期

    我正在使用 Parse 数据库 我存储日期格式 使用控制台时我得到这种格式 Tue Jul 18 2017 15 46 47 GMT 0100 CET 我想获得这种格式 18 07 2017 有什么想法请 可以使用以下代码来完成 let t
  • 抓取屏幕分辨率并根据大小显示结果

    我正在尝试根据屏幕分辨率大小显示数据库的结果 我上周发布了一个关于如何获取宽度的问题 并且能够在此处的一些想法的帮助下提出这个jquery 但无法完成第二个方面 即根据大小显示结果
  • 您正在使用遗留实现。请更新您的代码:使用createWrapper() 和wrapper.useWrappedStore()。 nextjs 还原?

    我在使用 redux 工具包和 next js 时遇到错误 我面临着这个遗留警告 You are using legacy implementaion Please update your code use createWrapper an
  • 填充 NaN 值

    我有一个数据框 TIMESTAMP P ACT KW PERIODE TARIF P SOUSCR 2016 01 01 00 00 00 116 HC 250 2016 01 01 00 10 00 121 HC 250 2016 01
  • doc.save() 与 jspdf 抛出错误

    当我尝试使用 jsPDF 的 save 函数时 它抛出以下错误 ReferenceError saveAs 未定义 我只是尝试一个非常简单的例子 var doc new jsPDF doc text 20 20 Hello world do
  • 什么是类型和效果系统?

    The 维基百科文章关于效果系统 http en wikipedia org wiki Effect system目前只是一个简短的存根 我有一段时间想知道什么是效果系统 除了类型系统之外 是否还有其他语言还具有效果系统 可能的 假设的 符
  • 在运行时枚举 .NET 程序集资源

    我有一个资源程序集 其中包含使用构建的图像文件Resource or Content建立行动 这使得可以使用 Uris 访问这些文件 但是我找不到枚举此类资源的方法 如果我将构建操作设置为嵌入式资源可以使用以下代码枚举文件 string r
  • 使用 GADT 在 Haskell 中重新创建 Lisp 的“apply”

    作为练习 我正在尝试重新创建 Lispapply在哈斯克尔 我不打算将其用于任何实际目的 我只是认为这是一个更好地熟悉 Haskell 类型系统和一般类型系统的好机会 所以我也不是在寻找其他人的实现 我的想法如下 我可以使用 GADT 来
  • 如何访问NTAG213 NFC交互计数器?

    我正在开发一个 Android 应用程序 我需要查找 NFC 标签被读取的次数 我已经浏览了 NFC 论坛上的文档 对于 NTAG213 有一个名为 MIRROR CONF 的字段 使用该字段可以确定交互计数器是否启用 禁用以及计数器的值
  • 如何用java播放.wav文件

    我正在尝试用 Java 播放 wav 文件 我希望它执行以下操作 按下按钮时 会发出短促的蜂鸣声 我用谷歌搜索了一下 但大部分代码都不起作用 有人能给我一个简单的代码片段来播放 wav 文件吗 最后我设法做到了以下几点并且效果很好 impo
  • p 与 ol 或 ul 的表单样式

    通常我使用无序列表标签来设计表单 例如 fieldset ul li li ul fieldset