Highlighted

HTML5 Form Semantics

New Here ,
Mar 01, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

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

Views

147

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML5 Form Semantics

New Here ,
Mar 01, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

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

Views

148

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 01, 2018 0
LEGEND ,
Mar 01, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

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

TagDescription
<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
Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1
Adobe Community Professional ,
Mar 01, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1