Question

我目前正在使用p标签来围绕表单分组（例如标签，输入和错误消息）......

p标签是我多年来一直使用的，但我有一点问题，因为 p标签不能包含div等 ...所以我正在考虑使用'section'标签打破表格“部分”：）...

如果您认为在此上下文中使用此标记在语义/功能上是合适的，我会寻找一些反馈...我作为网络开发的表单占我一天的90％所以非常感谢您的想法和反馈：）

仅供参考（虽然无关紧要）我正在使用Laravel Form作为示例！

之前

<p>
    <label>First Name</label>
    <input type="text" name="first_name" value="{{ Form::form_value('first_name', $user) }}">
    <span class="error_message">{{ $errors->first('first_name') }}</span>
</p>

<p>
    <label>Surame</label>
    <input type="text" name="surname" value="{{ Form::form_value('surname', $user) }}">
    <span class="error_message">{{ $errors->first('surname') }}</span>
</p>

后

<section>
    <label>First Name</label>
    <input type="text" name="first_name" value="{{ Form::form_value('first_name', $user) }}">
    <span class="error_message">{{ $errors->first('first_name') }}</span>
</section>

<section>
    <label>Surame</label>
    <input type="text" name="surname" value="{{ Form::form_value('surname', $user) }}">
    <span class="error_message">{{ $errors->first('surname') }}</span>
</section>

感谢您的反馈smile http://i2.minus.com/jOUK4SGJj8gGq.png

Answer 1

section element 可以适合分组表单元素，但肯定不适用于每个输入+标签组。它是一个分区内容元素，这意味着每个section都可以列在the document’s outline中。这很可能不是你想要的。

section的一个好例子可能是非常长/复杂形式，其中每个部分可能包含多个fieldset elements。 section一般使用的经验法则：

如果您为内容提供了标题（section - h1），则应使用h6;
如果为内容提供标题是合适的，您可以使用section，但由于某种原因，您不会这样做。

p element适用于对一个或多个输入+标签组进行分组，正如example 1中的第二个片段所示。由于您希望包含可能的错误消息，因此使用（无意义的）div元素作为组，p元素作为子元素，似乎是合适的：

<div>
  <p>
    <label>First Name</label>
    <input type="text" name="first_name" value="">
  </p>
  <p class="error_message"></p>
</div>

Answer 2

我认为<section>是正确使用的语义。您可以使用<fieldset>，但我认为这是针对多个输入的，或者您可以围绕<label>中的所有内容。

e.g。

<label>
  First Name
  <input type="text" name="surname" value="{{ Form::form_value('surname', $user) }}">
  <span class="error_message">{{ $errors->first('surname') }}</span>
</label>

否则，<p>标签完全正常，无论如何，表单的语义都不多。

section标签是否适合分组表单元素？

2 个答案: