为什么 W3C 建议将输入元素包装在

标记中?

2024-01-05

我在网上看到了很多示例,其中表单的布局如下:

<form>
    <p><input></p>
</form>

令我惊讶的是,这也被描述在规格 http://www.w3.org/TR/html5/forms.html#the-form-element:

任何表单都以表单元素开始,其中放置 控制。大多数控件由输入元素表示,该元素由 默认提供单行文本字段。要为控件添加标签,请使用标签 使用元素;标签文本和控件本身位于 标签元素。表格的每个部分都被视为一个段落,并且是 通常使用 p 元素与其他部分分开。把这个 综上所述,以下是询问客户姓名的方式:

尽管本节是非规范的,但在我看来,这是不好的做法,而且不符合语义。我想目的是将输入放在自己的行上,但是这些元素的显示不应该使用 CSS 来控制吗?

W3C 建议以这种方式布局表单是否有原因?我错过了什么吗?


如果您以有意义(读:语义)的方式编写表单,您将希望文本流通向该元素:

<form>
 <p><label for="firstName">Please enter your first name:</label><input id="firstName" type="text" /></p>
</form>

更好的方法是将您的表单视为mad-libs https://en.wikipedia.org/wiki/Mad_Libs#Format script:

<form>
  <p>Hello. My <label for="firstName">name</label> is <input id="firstName" type="text" />...</p>
</form>

A pelement 并不是标记表单的唯一方法。如果要添加/编辑数据矩阵,则使用表在语义上是有效的。

在其他情况下,您可能not想要使用包装元素。这取决于什么content你想提供服务。担心一切造型after你已经把你的内容整理好了。

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

为什么 W3C 建议将输入元素包装在

标记中? 的相关文章

  • 如何覆盖 bootstrap 表 td 样式?

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td
  • PHP 共享标头而不使用服务器端脚本?

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 如何:带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • asp.net mvc html 属性没有值

    我正在尝试根据 HTML5 规范创建一个隐藏表单 其中隐藏属性在没有值的情况下使用 现在我不知道如何将其强制到 asp net mvc 中 上面的方法不能编译 Compiler Error Message CS0103 The name h
  • 如何在没有 AM/PM 的情况下使用 datetime-local?

    我想使用以下代码
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • Angular 5 - 使用对象进行表单控制

    我目前正在开发一个由 Django 支持的 Angular 应用程序 该应用程序的一部分是它需要显示成员列表 成员数组看起来有点像这样 name John Smith id 3 score set name Jane Doe id 7 sc
  • HTML5 历史 API

    我如何使用 HTML5 历史 api 我确实经历过https developer mozilla org en DOM Manipulated the browser history https developer mozilla org
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 使用流体网格系统在引导程序上对齐输入

    我正在创建一个表单 要求用户输入他们的姓名和电子邮件地址 表单的第一行对于姓名的每个部分都有两个并排的输入 第二行对于电子邮件地址有一个输入 其宽度应与第一行组合的宽度相同 我正在尝试使用流体网格系统 但无法将第二行与第一行对齐

随机推荐

  • 指定接口只能由引用类型实现 C#

    如果我在 C 中声明一个接口 有什么方法可以显式声明实现该接口的任何类型都是引用类型吗 我想这样做的原因是 无论何时使用接口作为类型参数 我都不必指定实现类型也必须是引用类型 我想要完成的示例 public interface IInter
  • 想要将 dataset.info() 结果存储到 Python 中的数据框中

    我在 Python 中创建了一个数据帧 并使用 info 函数查看其元数据 但无法将 info 结果存储到数据框中 有什么办法可以做到这一点 df2 pd DataFrame A pd Series range 1 4 B pd Times
  • ASP.NET MVC 模型在同一页面上绑定相关实体

    这个问题已经让我发疯了几个小时了 在我的域中 我有 2 个彼此相关的实体Sku and Item 每个 sku 可以有很多商品 public class Sku private readonly EntitySet
  • React-native - Firebase onAuthStateChanged 无法正常工作

    我无法在我的反应本机应用程序中保留 Firebase 会话 这个问题几乎与React Native Firebase 身份验证持久性不起作用 https stackoverflow com questions 46143273 react
  • Node.js 版本号如何工作以及如何确保兼容性? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 项目的版本
  • 环绕文本的边界框

    我想在 QML 周围画一个矩形Text使用自动换行的对象 TextMetrics http doc qt io qt 5 qml qtquick textmetrics html看起来这很理想 但它似乎不支持换行文本 我如何测量文本在文本中
  • opengl 和 GLSL 有什么区别?

    我最近开始使用 openGL 进行编程 我已经完成了创建基本基元的代码 并在 webGL 中使用了着色器 我已经在谷歌上广泛搜索了这个主题 但对我来说仍然不太清楚 基本上 这就是我想知道的 是否有任何事情可以在 GLSL 中完成而在普通 o
  • 一个浮点数可以在给定范围内表示多少个值?

    直觉告诉我 由于 32 位可以表示固定数量的不同值 因此浮点可以表示任何给定范围的固定数量的值 这是真的 转换处理方式能够表示的值的数量是否有任何损失 Say I pick a number in the range 1030 1035 O
  • 类型“AngularFireAuth”上不存在属性“auth”

    使用 AngularFire 时出现此错误 检查了我的进口 它们似乎是正确的 我尝试重新安装 AngularFire 但它仍然抛出此错误 角火有问题吗 import Injectable NgZone from angular core i
  • C++ 编译时检查是否可以使用某种类型的参数调用重载函数

    考虑一个重载函数 void f int void f long void f double void f MyClass 以及模板类中参数类型未知的方法 template
  • 如何防止 IE 缓存导致重复的 Ajax 请求?

    我们使用Dynamic Sc ript Tag配合JsonP机制来实现跨域Ajax调用 前端小部件非常简单 它只是调用搜索 Web 服务 传递用户提供的搜索条件并接收和动态呈现结果 Note 对于那些不熟悉使用 JsonP 方法的动态脚本标
  • 从 Android 应用程序发送 POST 请求到 Django 视图

    我正在尝试从 Android 设备读取 QRCode 并将提取的 ID 发送到使用 Django 构建的 Web 服务器 我按照教程进行操作here http hmkcode com android send json data to se
  • css中的字符串连接

    我想在css中实现以下目标 我如何以跨浏览器的方式做到这一点 url img icons attr type 10 png 我认为你不能 在里面content属性你可以通过用空格分隔来 连接 但在其他地方我认为没有这样的功能 这是一种耻辱
  • 无法将文件移动到已安装的网络共享文件夹

    我正在尝试将文件上传到办公网络共享文件夹 我有权让我的用户帐户访问共享文件夹 我使用 UNC 路径直接通过 move upload file 函数上传文件 但它不起作用 我收到此错误 警告 move uploaded file 17 105
  • 从多列中选择值到单列中

    我在数据库中有一个表 其中有 9 列 其中包含相同类型的数据 这些值是允许为空 我需要将每个非空值选择到一列值中 这些值不关心它们源自的行的标识 因此 对于看起来像这样的表 Id I1 I2 I3 1 x1 x2 x7 2 x3 null
  • AFNetworking 2 - 获取错误 json 正文 [重复]

    这个问题在这里已经有答案了 我用的是最新的AF网络对于我的应用程序 它与 REST API 服务器通信 当我得到一些500JSON 主体出现错误 如下所示 message my error message 我无法从以下位置检索此消息NSEr
  • 将导航抽屉添加到现有活动

    我正在编写一个应用程序 它已经包含很多代码 我决定要向主活动工具栏添加一个导航抽屉 但我不知道如何在不创建新的导航抽屉项目和复制的情况下做到这一点我的整个项目看起来工作量很大 是否有教程可以向现有项目添加导航抽屉 创建布局布局左菜单 xml
  • 将 Json 反序列化为 C# bool

    我需要帮助解决一个非常简单的问题 如何在不创建包装根对象的情况下将下面的 json 反序列化为 C bool 谢谢 f valid false 0 如果您正在使用Json Net http james newtonking com json
  • 我们如何才能使 __future__ 进口全球化?

    规格 Python 2 7 我正在开发一个具有多个模块的项目 我想激活所有模块中 future 模块的一些功能 我想在一个模块上导入我需要的所有功能 然后将该单个模块导入到每个其他模块 并使这些功能在所有模块中处于活动状态 或者达到这种效果
  • 为什么 W3C 建议将输入元素包装在

    标记中?

    我在网上看到了很多示例 其中表单的布局如下