What functions are form tags in HTML5?

Asked

Viewed 781 times

10

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

Recently I had to do extensive work involving registration forms and I noticed that these tags are rarely used, or largely replaced by div that end up having the same 'Function', as of grouping a block of form data that would be made by <fieldset>.

Then my doubt would be:

  • Why these tags are little used (at least in what I researched not found much use)?
  • Is there any restriction/support (or lack of it) on the part of browsers? Which I find difficult, since they are implementations html5.
  • Besides the structural aspect, do they carry with them some function that we will hardly notice? As a behavior differentiated according to the browser, or in cases of accessibility/extra functions (if I was able to express myself well on this issue)?

'Cause so far I haven’t found anything that would show the real advantage of using those tags (either gross or with some reset CSS) or to create a div equivalent with its own CSS to achieve the same goal.

The only one I could find more about was <label>, normally used for breeding checkbox and radio with css customized.

Obs.:

My doubt was related to tags form due to my recent work based on this. But if there is a more comprehensive answer in that area, tags of html5, would be welcome too, because I know there are many tags little explored, such as tags of images, blocks, etc..

html html5
  • 3

    just one remark: the informed tags exist since HTML 4.01

  • A yes. I ended up getting lost amid the thoughts hahaha because in HTML5 there are less used tags yet. But well remembered.

2 answers

10


Working with patterns or not?

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

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

inserir a descrição da imagem aqui

Does Developer keep track of the past semantics? no, but it works ? yes. In some books of Html5 all these cited tags have their importance and their "why" to exist.

For example:

1 - <fieldset> It is indicated to group a set of fields of the form, one of its facilities is to divide 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> He walks side by side with fieldset to make the separation of sections.

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

4 - <optgroup> 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 range 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

  • 1

    Yes, well put. I see a lot of 'div' for everything you do. I also confess that before the service, I was unaware of many of the tags that exist, although I am already a fan of tags like Section, header, Nav and footer, many of them were unaware. Recommend some study reference for this?

  • @Celsomtrindade I left in the reply.

8

In fact it is possible to use div instead of these tags, but they give better semantics to what you’re doing.

This is good to document your project better from a development point of view and also to improve the interpretation of other software, such as search engines, accessibility and other specialists who may know how to treat these tags more specifically.

In addition, 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 of them has a specific advantage but I think an individual answer would leave the question very wide.

The low usage is mainly due to the fact that they are relatively new. And also due to ignorance on the part of the developers. Many think they add nothing.

Support is present in all newer browsers:

Other forms:

It is possible to use the html5shiv to fill the gap in older Internet Explorer.

  • The same logic applies to image tags, for example, or Section, right? I have been reading their theoretical basis on http://www.w3schools.com/ but, as I had not found anything about it, I was in doubt. Perhaps from what you have commented, negligence or ignorance of the vast majority. But in your opinion, the use of tags is the best way forward?

  • W3C is not the most recommended site to learn something about. It’s always better when they make sense. A div should be used for a division, which is something more generic. The same goes for all other tags, whenever a couber, should use. Just can not abuse, invent use for it. There can even divide more. Let’s assume that has a div and a fieldset in the same scope (obviously one will be inside the other). One may have certain style characteristics configured, and the other may have different characteristics. You can better organize the stylization, making it more flexible.

  • Right. I understand the logic. Thank you!

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.