What tag do you put the form in?

Question

I created a page and within this page has a form. So far, everything ok. But I put the form inside that tag? Semantically speaking, within a Section, an article, a Section and an article, or a div? I’m still a little confused with the semantics when I leave the usual. I Googled, but I didn’t get satisfactory answers.

section
form
form
/section

or

article
form
/form
/article

or

section
article
form
/form
/article
/section

or

div
form
/form
/div

Answer 1

In the W3C documentation there is apparently no reference to the semantic structure from which the form should be on the page. Already in the Mozilla documentation they put in fact the section within the form!

But the most important point, and that both the W3C and Mozilla address is the semantic structure of the form in itself.

See the model proposed by Mozilla below:

Here you’ll see that we are wrapping the contact information Fields Inside a distinct <section> element.

OBS: Try to count how many <div> exist in this model!

h1 {
    margin-top: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

form {
    margin: 0 auto;
    width: 400px;
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

div+div {
    margin-top: 1em;
}

label span {
    display: inline-block;
    width: 120px;
    text-align: right;
}

input, textarea {
    font: 1em sans-serif;
    width: 250px;
    box-sizing: border-box;
    border: 1px solid #999;
}

input[type=checkbox], input[type=radio] {
    width: auto;
    border: none;
}

input:focus, textarea:focus {
    border-color: #000;
}

textarea {
    vertical-align: top;
    height: 5em;
    resize: vertical;
}

fieldset {
    width: 250px;
    box-sizing: border-box;
    margin-left: 136px;
    border: 1px solid #999;
}

button {
    margin: 20px 0 0 124px;
}

label {
  position: relative;
}

label em {
  position: absolute;
  right: 5px;
  top: 20px;
}

<form method="post">
        <h1>Payment form</h1>
        <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
        <section>
            <h2>Contact information</h2>
            <fieldset>
              <legend>Title</legend>
              <ul>
                  <li>
                    <label for="title_1">
                      <input type="radio" id="title_1" name="title" value="M." >
                      Mister
                    </label>
                  </li>
                  <li>
                    <label for="title_2">
                      <input type="radio" id="title_2" name="title" value="Ms.">
                      Miss
                    </label>
                  </li>
              </ul>
            </fieldset>
            <p>
              <label for="name">
                <span>Name: </span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
              <input type="text" id="name" name="username">
            </p>
            <p>
              <label for="mail">
                <span>E-mail: </span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
              <input type="email" id="mail" name="usermail">
            </p>
            <p>
              <label for="pwd">
                <span>Password: </span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
              <input type="password" id="pwd" name="password">
            </p>
        </section>
        <section>
            <h2>Payment information</h2>
            <p>
              <label for="card">
                <span>Card type:</span>
              </label>
              <select id="card" name="usercard">
                <option value="visa">Visa</option>
                <option value="mc">Mastercard</option>
                <option value="amex">American Express</option>
              </select>
            </p>
            <p>
              <label for="number">
                <span>Card number:</span>
                <strong><abbr title="required">*</abbr></strong>
              </label>
                <input type="text" id="number" name="cardnumber">
            </p>
            <p>
              <label for="date">
                <span>Expiration date:</span>
                <strong><abbr title="required">*</abbr></strong>
                <em>formatted as mm/yy</em>
              </label>
              <input type="text" id="date" name="expiration">
            </p>
        </section>
        <section>
            <p> <button type="submit">Validate the payment</button> </p>
        </section>
    </form>

Counted how many <div> had? That’s right ZERO! Noticed how the form is assembled in a thorough and 100% semantic way. This has to be the main concern.

Final words:

So where the form is in the structure doesn’t matter much. If your form is the main subject of the page <h1> on it and place it higher up on the page, as screen readers start from top to bottom. If you can do a basic test, try to navigate on your screen by pressing the TAB to see how the focus is changing. If you need to make corrections using the tabindex (read more about tabindex here)

• Documentation W3C: https://www.w3.org/TR/html401/interact/forms.html
• Documentation Mozilla: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form

---

Additional information on accessibility

According to ai W3C WAI and Webaim you can and should use aria-labelledby in building the form to help screen readers. You can find out more here https://www.w3.org/WAI/tutorials/forms/instructions/#using-Aria-labelledby

EX: <input type="password" name="password" id="password" aria-describedby="password">

Also, you can also use the role to interact better with screen readers. Basic form hints mozilla In this documentation you can find out more.

EX: Check out the role in Ction and in aria-required in the input

<form>
    <section role="form">
      <label for="name">* Name:</label>
      <input type="text" value="name" id="name" aria-required="true"/>
    </section>  
</form>

Important: If you have a div that semantically is not a buttom, but plays the role of buttom, because it can be clicked etc, it is essential that you use these attributes of role and aria for screen readers to identify this "component" as something clickable and active Aria! Full documentation W3C ARIA, there’s everything about the roles and the arias https://www.w3.org/TR/aria-in-html/ (2017)

EX: Once again note the role in Ction and in aria-checked

<div role="checkbox" aria-checked="false" tabindex="0">
    Escolher esse
</div>

You can still work your way better using the microdatas Schema by example and placing itemscope itemtype itemprop in the elements. Here is a template for Localbusiness http://schema.org/LocalBusiness