HTML5 Form Semantics

[rosecoinc]

I'm building a long complex registration form, and I am wanting to get more clarification on using the HTML5 semantic tags within a form.

Is it advisable to even use HTML5 semantic tags in a form?

Some sites say forms aren't considered content, so they don't need such tags, like <section>.

I have some parts of the form contained in <fieldset> tags...

• Should I use the <legend> tag or a heading tag (like <h2>) to specify a title for that part of the form?
  Heading tags get included in the document structure outline, so I'm not sure if the legend tag is useful anymore. Plus it is a pain to style.
• Should I also enclose each <fieldset> in a <section> tag, or is that redundant?

I've searched various online tutorial sites for answers and only got myself more confused.

Thanks for any help!

Kim

[osgood_]

sierraplanet  wrote

I'm building a long complex registration form, and I am wanting to get more clarification on using the HTML5 semantic tags within a form.

Is it advisable to even use HTML5 semantic tags in a form?

Some sites say forms aren't considered content, so they don't need such tags, like <section>.

I have some parts of the form contained in <fieldset> tags...

• Should I use the <legend> tag or a heading tag (like <h2>) to specify a title for that part of the form?
  Heading tags get included in the document structure outline, so I'm not sure if the legend tag is useful anymore. Plus it is a pain to style.
• Should I also enclose each <fieldset> in a <section> tag, or is that redundant?

I've searched various online tutorial sites for answers and only got myself more confused.

Thanks for any help!

Kim

I would write a form like below :

<form name="feedback" method="post" action="process_form.php">

<h4>Personal Details</h4>

<p><label for="name">Name</label><br>

<input type="text" id="name"></p>

<p><label for="address">Address</label><br>

<input type="text" id="address"></p>

<h4>Contact Details</h4>

<p><label for="email">Email</label><br>

<input type="text" id="email"></p>

<p><label for="phone">Phone</label><br>

<input type="text" id="phone"></p>

</form>

[Nancy OShea · Accepted solution]

When appropriate, I use these HTML form tags.  On complex forms, I use fieldset and legend.

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>	Specifies a list of pre-defined options for input controls
<output>	Defines the result of a calculation

[Jon Fritz]

I'm in the "forms aren't content" camp.

If you use semantic tags, just make sure they're being used properly. <fieldset> and <h2> tags are much older than HTML5, and while they have semantic value, aren't really "HTML 5 Semantic Tags".

Look at the defined usage of the semantic tags like <section> or <article> over at W3C.org. If they make sense to use within the structure of your form, use them, if they don't, don't. There's nothing in HTML5 that says "YOU MUST USE THESE TAGS OR ELSE" for things like <section>, <article> or <caption>.

I doubt very much that any search engine is going to help or hurt you for using them within a <form>.