Fieldset element should be used only in form?

Asked

Viewed 367 times

2

The element <fieldset> may only be used in forms for your organization and grouping of content or may be used anywhere in the code?

2 answers

3

There is what works and the right one. It is no mistake to use outside of a form, but it makes no sense to use outside.

This tag exists to give a better semantics to what is being done, including meets accessibility requirements. There are other ways to group elements, but this says that these elements are a group of fields and this is important for your SEO and make it more accessible.

Use to determine something that refers to all group fields. In addition to styling it could be done with another tag can do specific actions such as disabling all fields in this group.

If you want to make it right, just use inside a <form>.

Documentation.

Example that works and is not in form (do not do this at home):

fieldset {
  background-color: #D0D0D0;
  max-width: 300px;
  padding: 12px;	
}
<div class>Título</div>
<fieldset>
Não usei em formulário
</fieldset> 

Correct use:

fieldset {
  background-color: #D0D0D0;
  max-width: 300px;
  padding: 12px;	
}
<form>
   <fieldset>
      <legend>Endereço</legend>
      Tipo Logradouro: <input type = "text"><br/>
      Logradouro:<input type = "text"><br/>
      Número:<input type = "text">
   </fieldset>
</form>

I put in the Github for future reference.

3

Briefly should not be used outside a form, for the sake of semantics! It is assumed that the fieldset is a set of elements that make up part or a whole of a form. Use it outside a form breaks the semantics suggested by W3C

Many assistive technologies will use the element <legend> as if it were part of the label of each widget within the element <fieldset> corresponding. For example, some screen readers such as Jaws or NVDA, pronounce the content of the legend before pronouncing the label of each widget.

The fieldset needs an element legend inside. This may or may not be a problem for you, but for screen readers the absence of it will surely be an inconvenience...

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form

Although even using the fieldset out of a form no HTML validation problems, not indicated, since within it there should be inputs, and other form elements. https://validator.w3.org/nu/#textarea

inserir a descrição da imagem aqui


OBS:

If you want to group elements that are not form you can use ul/li, or tables, or dl/dd, or section/article and so on...

Browser other questions tagged

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