What are the functions of form tags in HTML5?

Navigation
8

The question refers to tags not so commonly used, such as <fieldset> , <legend> , <label> and <optgroup> .

Recently I needed to do extensive work involving registration forms and I noticed that these tags are little used, or in large majority, replaced by div that end up having the same 'Function', as of group a data block of the form that would be done by <fieldset> .

Then my question would be:

  • Why these tags are rarely used (at least in what I researched I did not find much use)?
  • Is there any restriction / support (or lack thereof) on the part of browsers ? What I find difficult, since they are implementations html5 .
  • In addition to the structural aspect, do they carry some function that we can hardly perceive? How can I differentiate between the browser , or accessibility / extra functions (if I can express myself well in this)?

So far I have not found anything that shows the real advantage of using these tags (either raw or with some reset CSS) or creating a% equivalent with a CSS of its own to achieve the same goal.

The only thing I found most about it was div , usually used to create <label> and checkbox with radio customized.

Note:

My question was regarding form tags because of my recent work based on this. But if there is a more comprehensive response in this area, tags of css , would be welcome as well, as I know there are many tags not explored, such as tags of images, blocks, etc.

    
asked by anonymous 25.11.2015 / 19:54

2 answers

8

Working with patterns or not?

Not only in html like in other languages of the to solve certain types of problems of "n" different forms, but after all, is it advisable?

You can notice in several "HTML5" codes the use of div's for everything as it was in html4 instead of using a pattern like this:

DoesDeveloperfollowtheprevioussemantics?No,butdoesitwork?yea.Insomehtml5booksallthesetagshavetheirimportanceandtheir"why" to exist.

For example:

1 - <fieldset> It is indicated to group a set of form fields, one of its facilities is to split the form into several sections.

Example: 

<form method="post">
  <fieldset>
    <legend><b>1 - Passo</b>

    </legend>Name:
    <input type="text" size="20">
    <br>Email:
    <input type="text" size="20">
  </fieldset>
  <p></p>
  <fieldset>
    <legend><b>2 - Passo</b>

    </legend>Favorite Color: Red:
    <input type="radio">Blue:
    <input type="radio">Green:
    <input type="radio">
    <p>Favorite Toothpaste: Crest:
      <input type="checkbox">Close-Up:
      <input type="checkbox">Gleem:
      <input type="checkbox">
    </p>
  </fieldset>
  <p></p>
  <fieldset>
    <legend><b>3 - Passo</b>

    </legend>
    <br>
    <center>
      <input type="button" value="Enviar" onclick="alert('Stop clicking the buttons')">
    </center>
    <br>
    <br>
  </fieldset>
</form>

2 - <legend> It walks side by side with fieldset to split sections.

3 - <label> It acts as an extension of the element by expanding the clickable area, as you cited the click on the text of the label leaves a checkbox marked.

4 - <optgroup> It is used for group options within a select element.

When there are many options, a simple hierarchy layer can help the user in their choice. they would act as a title for the group.

Example: 

<select name="enemy">
  <optgroup label="Milky Way">
    <option value="Apophis">Apophis</option>
    <option value="Anubis">Anubis</option>
    <option value="Replicators">Replicators</option>
  </optgroup>
  <optgroup label="Pegasus galaxy">
    <option value="Wraith">Wraith</option>
    <option value="Genii">Genii</option>
  </optgroup>
</select>

Finally, the proper use of these tags that are rarely used go from each developer, if you value semantics and accessibility identifying and using certain tags can greatly improve the quality of the web application.

Recommended Reading: Dive Into HTML5 by Mark Pilgrim

    
25.11.2015 / 20:26
6

In fact, you can use div instead of these tags . But they give better semantics to what you're doing.

This is good for better documenting your project from a development point of view and also for improving the interpretation of other softwares, such as search engines, accessibility enhancers, and other specialized ones that can know how to handle these tags in a more specific way.

Moreover, if one day something changes in the way browsers work, having more accurate information can bring new benefits to the site without touching it.

Each one has a specific advantage but I think an individual answer would leave the question very wide.

Low usage is mainly due to the fact that they are relatively new. And also by unfamiliarity on the part of the developers. Many think they do not add anything.

Support is present in virtually all newer browsers:

Other ways:

You can use html5shiv to fill the gap in the older Internet Explorer.

    
25.11.2015 / 20:06
Subsequent Calls in Ajax How do you join data from another table