使用< br />与< p>< / p>与表单域的CSS相比，目前公认的桌面，移动和可访问性最佳实践是什么？ [英] Using <br/> versus <p></p> versus CSS for form fields, what is the current accepted best practice for desktop, mobile, and accessibility?

问题描述

我应该避免使用< br /> 来拆分行，以便在 < p为H.;< / p为H. ？何时可以使用< br /> （如果有的话）？

我称之为典型的桌面浏览器，但是其中一种或另一种在辅助功能和移动设备上工作得更好？

目前推荐的最佳做法是什么？ （这似乎是一个移动的目标。）

例如，当做这样的事情时：

使用< br /> 从输入中分离标签

 < label for =txtUsername>用户名< / label>< br />< input type =textid =txtUsernameautocomplete =offmaxlength =50spellcheck =false />  

使用< p>< / p> 将标签与输入分隔开来

lang =jsdata-hide =false>

< p> ;< label for =txtUsername>用户名< / label>< / p>< p>< input type =textid =txtUsernameautocomplete =offmaxlength =50spellcheck = 假/>< / p为H.

我搜索了一下，似乎并没有出现对此100％的共识，认为我会打到精彩的SO社区..谢谢！ 解决方案

在HTML5中， br 元素必须仅在换行符实际上是内容的一部分时使用。典型的例子 br 是合适的：在邮政地址和诗歌。

由于你的例子中的换行符没有意义（它似乎只是出于布局原因需要;请参阅下面的示例），您不能使用 br 。你应该使用CSS来代替（ display：block ）。
$ b

默认情况下， div 元素通常带有这个CSS声明，并且使用它（或者更具体的元素，比如如果合适的话， p ）允许没有CSS支持的用户代理（例如文本浏览器）以更易理解的方式显示内容（他们通常也会显示换行符if使用所谓的块级元素）。

---

该规范在示例中明确提到了一个类似的情况：

以下示例不符合规定，因为它们滥用 br 元素：

[...]

 < p>< label>名称：< input name =name>< / label>< br> 
< label>地址：<输入名称=地址>< / label>< / p> 
  

Question: Should I avoid using <br/> to break lines in favor of wrapping content in <p></p>? When is it OK to use <br/> (if ever)?

They both work fine in what I would call typical desktop browsers, but does one or the other work better with accessibility features and mobile devices?

What is the current recommended best practice? (It seems to be a moving target.)

For example, when doing stuff like this:

Using <br/> to separate label from input

<label for="txtUsername">Username</label><br/>
<input type="text" id="txtUsername" autocomplete="off" maxlength="50" spellcheck="false"/>

Using <p></p> to separate label from input

<p><label for="txtUsername">Username</label></p>
<p><input type="text" id="txtUsername" autocomplete="off" maxlength="50" spellcheck="false"/></p>

I've searched around a bit and there doesn't seem to be a 100% consensus on this, thought I would hit up the wonderful SO community.. Thanks!

解决方案

In HTML5, the br element must only be used if the line break is "actually part of the content". Typical examples where br is appropriate: in postal addresses and in poems.

As the line break in your example is not meaningful (it seems to be needed only for layout reasons; see also the example below), you must not use br. You should use CSS instead (display:block).

The div element typically comes with this CSS declaration by default, and using it (or more specific elements, like p, if appropriate) allows user-agents without CSS support (e.g., text browsers) to display the content in a more comprehensible manner (they’d typically also display line breaks if a so-called "block-level" element is used).

---

The spec explicitly mentions a similar case in an example:

The following examples are non-conforming, as they abuse the br element:

[…]

<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

这篇关于使用&lt; br /&gt;与&lt; p&gt;&lt; / p&gt;与表单域的CSS相比，目前公认的桌面，移动和可访问性最佳实践是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！