Is the section tag appropiate for grouping form elements?

Question

I'm currently using p tags to surround form groupings (e.g. label, input and error message)...

p tags are what I've used for years but I'm having a bit of an issue as p tags cannot contains divs etc... so I'm considering using the 'section' tag to break up the form "sections" :)...

I'm look for some feedback if u guys think the use of this tag in this context is semantically/functionally appropriate... Forms for me as a web dev are 90% of my day so Really appreciate your thoughts and feedback :)

FYI (though inconsequential) I'm using Laravel Form for the examples!

Before

<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>

After

<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>

Thanks for your feedback

Answer 1

The section element can be appropriate for grouping form elements, but certainly not for every input+label group. It’s a sectioning content element, which means that each section could be listed in the document’s outline. This is most likely not what you want.

A good case for section could be very long/complex forms, where each section possibly contains multiple fieldset elements. A rule of thumb for section use in general:

• you should use section if you provide a heading (h1-h6) for the content;
• you could use section if it would be appropriate to provide a heading for the content, but you don’t for some reason.

The p element is appropriate for grouping one or more input+label groups, as the second snippet in example 1 shows. As you want to include possible error messages, using a (meaningless) div element for the group, with p elements as children, seems to be appropriate:

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