6

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 smile

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Bill Jobs
  • 451
  • 1
  • 4
  • 8
  • Why do you need an element around the label, input, span triples at all? What is the additional information that you are trying to convey? – Alohci Feb 08 '13 at 00:35
  • I don't know why Bill is using an element around his "triples", but many frameworks like Bootstrap require one for styling purposes. I came here looking for a non-generic element I can use here, in fact. – trysis Jul 31 '15 at 20:15

2 Answers2

3

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>
unor
  • 92,415
  • 26
  • 211
  • 360
0

I don't think <section> is the correct semantics to be using. You could use <fieldset>, but I think that's for multiple inputs or you could possibly surround everything in a <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>

Otherwise, a <p> tag is perfectly fine, there's not much semantics to a form anyway.

Michael Johnston
  • 2,364
  • 2
  • 27
  • 48
  • 3
    But a paragraph surely can't be appropriate as these are not paragraphs... + label has to be the most unappropriate wrap ever although twitter bootstrap advocates it... form section ->
    ???
     – Bill Jobs Feb 08 '13 at 00:24
  • 1
    I would personally use `
    `, though it might not be the most pretty, you can style it. Your form probably has a broader semantic meaning than individual inputs, and a `
    ` could convey that. For structure, `

    ` or even `
    ` works. Here's the W3C wiki for fieldset and section. http://www.w3.org/wiki/HTML/Elements/fieldset http://www.w3.org/wiki/HTML/Elements/section

     – Michael Johnston Feb 08 '13 at 00:42
  • If you have _multiple_ input/label element groups that are related, use `fieldset` otherwise, just use `div` or `li`. – steveax Feb 08 '13 at 01:24