Formulários e semântica

[eduardojmatos]

Pessoal, estamos redesenhando nossos forms aqui na GetNinjas, e queríamos aproveitar pra rever a semântica dos campos e etc..

Andei pesquisando um pouco e geralmente o que se faz é a divisão entre os campos ou é feita com <div> ou <p>. Outros exemplos, não se usa nenhum "wrapper" dos campos e labels.

A minha pergunta é mais em relação a como dividir melhor os itens do formulário, como dividi-los de forma semântica, contemplando o cenário de mensagens de erro, mensagens de ajuda ou tips, etc..

Seguem alguns exemplos de como pensei em organizar:

Usando <div>

  <form id="sample">
  <h1>Exemplo de formulário</h1>
  <fieldset> 
    <legend>Dados pessoais</legend> 
    <div class="field"> 
      <label>Nome
        <input id="name" name="name" type="text" placeholder="Digite seu nome completo" required> 
      </label>
    </div>
    <div class="field">
      <label>E-mail
        <input id="email" name="email" type="email" placeholder="Digite seu email" required> 
        <span>Opcional</span>
      </label>
    </div>
  </fieldset>
</form>

Exemplo com <p>

  <form id="sample">
  <h1>Exemplo de formulário</h1>
  <fieldset> 
    <legend>Dados pessoais</legend> 
    <p class="field"> 
      <label>Nome
        <input id="name" name="name" type="text" placeholder="Digite seu nome completo" required> 
      </label>
    </p>
    <p class="field">
      <label>E-mail
        <input id="email" name="email" type="email" placeholder="Digite seu email" required> 
        <span>Opcional</span>
      </label>
    </p>
  </fieldset>
</form>

Exemplo com nada

  <form id="sample">
  <h1>Exemplo de formulário</h1>
  <fieldset> 
    <legend>Dados pessoais</legend> 
    <label>Nome
      <input id="name" name="name" type="text" placeholder="Digite seu nome completo" required> 
    </label>
    <label>E-mail
      <input id="email" name="email" type="email" placeholder="Digite seu email" required> 
      <span>Opcional</span>
    </label>
  </fieldset>
</form>

---

* Lembrando que estou considerando apenas semântica
** O uso da classe field é pra que eu consiga fazer escopo dos elementos, via CSS

[mandado]

Acho que section talvez uma boa. Caso o formulário fosse dividido em "seção".

O que acha?

[eduardojmatos]

@mandado mas pensando em nível de "label+campo" será que section seria uma boa? Acho que section seria mais pra agrupar conteúdo que tenha ao menos um heading (header, h1, h*)

[felipefialho]

As diferentes divisões e grupos dentro dos fieldsets não deveriam carregar carga semântica, por isso considero usar <p> ou qualquer outro elemento semântico (incluido <section>) uma má ideia.

O ideal é usar <div> mesmo, por ser um elemento neutro.

Também não acho legal colocar o <input> dentro da <label> existindo o for para isso.

Algo como

<form class"form" id="sample">
  <h1 class"form__title">Exemplo de formulário</h1>
  <fieldset class="form__fieldset"> 
    <legend class="form__legend">Dados pessoais</legend>  
    <div class="form__group">
      <label class="form__label" for="name">Nome</label>
      <input class="form__control" id="name" name="name" type="text" placeholder="Digite seu nome completo" required>  
     </div>
     <div class="form__group">
        <label class="form__label" for="email">Email</label>
        <input class="form__control" id="email" name="name" type="email" placeholder="Digite seu email" required>   
    </div> 
  </fieldset>
</form>

[eduardojmatos]

@lfeh hum... faz sentido. Mas você não acha legal por um input dentro da label por algum motivo específico?

[felipefialho]

@eduardojmatos Nenhum na verdade, frescura pessoal mesmo. Sei lá, tem o for pra isso. 😸

[eduardojmatos]

@lfeh ah tá huhaua. É que os dois casos estão semanticamente corretos. Só coloquei como exemplo de não usar um wrapper extra, em favor da label.

Prefiro usar o for também, menos em elementos radio e checkbox.

[felipefialho]

@eduardojmatos hahaha, vamos nos apegar a discussão original invés do meu preciosismo 😹

Concorda com o que disse ai em cima?

[eduardojmatos]

@lfeh o for é pra isso sim, mas semanticamente ele pode agrupar elementos. Lendo alguns posts e documentação da W3C, não há uma regra explícita de usar um ou outro. Há até uma recomendação de, mesmo que você use um elemento nested de um <label>, o ideal é definir o atributo for.

[eduardojmatos]

Só pra referência: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form#The__element

[fdaciuk]

Concordo com o @lfeh: o uso de div faz mais sentido exatamente por não ter carga semântica, já que você apenas precisa agrupar alguns elementos.

Sobre colocar inputs dentro de label: gosto de usar como o @eduardojmatos comentou: radio e checkbox dentro de label, os outros casos, fora mesmo, usando o for.

E a ideia de usar radio e checkbox dentro é simplesmente por questões de usabilidade: é muito mais fácil aumentar a área de clique / toque com uma label - via CSS - para marcar o input xD

[eduardojmatos]

boa @fdaciuk

Resumindo então:

• Não é necessário dar significado a grupos de label+input dentro do form;
• Assim sendo, não é preciso usar uma tag semântica, e a div já faz o trabalho de agrupar os elementos sem ter que dar sentido a esse agrupamento.
• O label com children elements é ok para radio e checkbox, mas em volta de outros elementos, fica a critério do time decidir. Semanticamente, elementos (widgets de form) estarem nested ou não, é ok;
• Mesmo sendo nested de um label, é aconselhável o uso do for, principalmente por conta de acessibilidade.

O que acham? Só pra sair com uma resposta bacana :)

[akfzambrana]

@eduardomatos eu li este artigo uns anos atras, e acabei optando pela opção da dl pois é a segunda melhor opção

[akfzambrana]

E a ideia de usar radio e checkbox dentro é simplesmente por questões de usabilidade: é muito mais fácil aumentar a área de clique / toque com uma label - via CSS - para marcar o input xD

em todos os casos a gente utiliza o label somente com texto e sempre colocando o attributo for no label, assim você não precisa usar o label como "envelope"

[bernardodiasc]

Curto usar assim:

<label>
  <span>Nome<span>
  <input id="name" name="name" type="text" placeholder="Digite seu nome completo" required /> 
</label>

[eduardojmatos]

@akfzambrana eu li o artigo aqui, mas achei muito opinativo, sem muito argumento mais técnico.

One could argue the semantic accuracy of this approach, but I believe there is some semantic truth to this scenario. A definition term (the "Name") is defined by the user input. This method also remains accessible to assistive technologies by providing a label for the associated input field.

Muito "I believe" no texto. O lance da lista ele "acredita" ser mais semântico, mas não prova de forma argumentativa, principalmente quando ele cita que tendo a label já é ok pra acessibilidade.

Testando o Voice Over por exemplo, ele lê como se realmente fosse uma lista de termos, o que acaba confundindo o propósito do formulário.

Ainda não estou convencido em usar ol, ul ou dl heheh

[felipefialho]

@reinaldoferraz

Consegue dar uma ajuda aqui? 🐱

[eduardojmatos]

@ricardoruwer pois é, W3C tem umas convenções controversas às vezes, como aquela de classes semânticas

@andrewsfg somos 2. Um field não deveria ser envolvido por um parágrafo né? heheh

[andrewsfg]

@eduardojmatos , como um leitor de tela e um robô do Google, por exemplo, faria a leitura disso? Um texto corrido? Fiquei curioso hahaha

[eduardojmatos]

@andrewsfg ele encara como um texto e item de formulário... Pra eu não faz sentido ainda heheh

[reinaldoferraz]

Também não me agrada o uso de p para separar blocos de formulário, mas realmente, a documentação define que cada parte do formulário é definido como um parágrafo.

Interessante também pontuar que o W3C vem desencorajando o uso de div, recomendando procurar elementos com mais significado. Talvez por isso mesmo sugiram o uso do p como separador de campos.
https://www.w3.org/TR/html5/grouping-content.html#the-div-element

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

[felipefialho]

Entendo @reinaldoferraz, pensando por esse lado faz sentido.

Mas sempre imaginei que as divisórias do formulário não deveriam carregar carga semântica...

[bernardodiasc]

Até que faz sentido se pensar na representação:

<p>
  <label>
    <span>Nome:<span>
    <input id="name" name="name" type="text" placeholder="Digite seu nome" required /> 
  </label>
</p>
<p>
  <label>
    <span>Sobrenome:<span>
    <input id="surname" name="surname" type="text" placeholder="Digite seu sobrenome" required /> 
  </label>
</p>

<p>
  <span>Nome:<span>
  <span>Fulano</span>
</p>
<p>
  <span>Sobrenome:<span>
  <span>Silva Sauro</span>
</p>

[kvnol]

Sempre compartilhei do mesmo pensamento do @lfeh, sempre utilizei div para as divisórias. Eu já utilizei ul mas nunca p por conta da semântica da tag.

E, olhando num todo, não temos uma tag específica para isso. Por isso, por enquanto, continuarei utilizando a div.

[dionarodrigues]

Também sempre utilizei <div> para fazer essas separações e não adicionar significado semântico para elas, assim como o @lfeh e o @kvnol . E @eduardojmatos , realmente, pesquisando encontrei muitos exemplos utilizando o <p>, inclusive em todos os exemplos da W3C que eu vi. isso também não me agrada @reinaldoferraz . Será que surgirá um novo elemento para fazer esse wrapper?

Outro ponto que me chamou a atenção foi o uso do <input> dentro da <label> - o que também não me agrada, uma vez que há o attr "for" para fazer essa relação, além de facilitar o desenvolvimento do famoso efeito "float label".

[reinaldoferraz]

Com relação ao <label> que o @diogorodrigues aponta, a documentação HTML5 mostra o elemento <input> implícito no <label>, sem a necessidade de relação com o atributo "for". https://www.w3.org/TR/html5/forms.html#the-label-element

Ambos os casos são válidos:

• <label for="name">Nome</label><input type="text" id="name">
• <label>Nome <input type="text" id="name"></label>

https://www.w3.org/WAI/tutorials/forms/labels/

No passado recomendavam não usar <label> implícito pois tecnologia assistivas antigas davam suporte, mas hoje isso está amplamente suportado. Mesmo assim, prefiro relacionar o <label> com o atributo "for"

Inclusive a iniciativa de acessibilidade do W3C defende que, independente do tipo de uso (implícito ou não), deve-se utilizar o elemento <label> nos formulários.

[lorenamelor]

Estava lendo um pouco estes dias e vi uma explicação que achei bem relevante

Exemplo 1

<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>

Exemplo 2

<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>

O exemplo 1 não é errado, mas pode causar uma certa confusão nos leitores de tela. Eles podem ler algo como "name, editar texto, estrela"

E no exemplo 2 o leitor vai interpretar com maior clareza, algo como "name, estrela, editar texto"

O que vocês acham disso?

[lorenamelor]

Um dúvida que gostaria de colocar nesta questão de separação é: O que vocês acham sobre estruturar um grupo de radio buttons utilizando

e , como no exemplo abaixo?

<fieldset>
  <legend>What is your favorite meal?</legend>
  <ul>
    <li>
      <label for="soup">Soup</label>
      <input type="radio" id="soup" name="meal" value="soup" checked>
    </li>
    <li>
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="meal" value="curry">
    </li>
    <li>
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="meal" value="pizza">
    </li>
  </ul>
</fieldset>

[reinaldoferraz]

Confesso que o uso de <abbr> para definir os campos obrigatórios não me agrada devido a sua semântica (apesar de existirem exemplos na própria documentação do W3C).

O problema está no comportamento do elemento <abbr> com leitores de tela, que não parece ser bom. Achei um artigo bem interessante onde são testadas combinações de leitores de tela e navegadores usando <abbr> e o atributo title (https://www.powermapper.com/tests/screen-readers/labelling/acronym-abbr-title/). O resultado é bem ruim.

O que eu recomendaria seria usar o atributo aria-label="required". Esse atributo é muito mais acessível e amplamente suportado por navegadores e leitores de tela.

[kvnol]

Como o tópico ressuscitou depois de 4 anos, uma estrutura que uso atualmente e que estou bem feliz é essa:

<form class="form">
  <div class="form-control">
    <div class="form-control__wrap">
      <input type="text" id="name" placeholder="name" class="form-control__input">
      <label class="form-control__label" for="name"></label>
    </div>
    <div class="form-control__message">
      <p>Preencha o nome completo</p>
    </div>
  </div>

  <div class="form-control">
    <div class="form-control__wrap">
      <input type="email" id="email" placeholder="email" class="form-control__input">
      <label class="form-control__label" for="email"></label>
    </div>
    <div class="form-control__message">
      <p>E-mail inválido</p>
    </div>
  </div>

  <div class="form-control">
    <div class="form-control__wrap">
      <button class="button" type="submit">Enviar</button>
    </div>
  </div>
</form>

[ninetails]

Em forms que não tem um visual muito rebuscado, gosto de usar a seguinte estrutura:

<form>
  <fieldset>
    <legend>The Legend of Female Link</legend>

    <dl>
      <dt><label for="...">Label</label></dt>
      <dd><input /></dd>
      <dt><label for="...">Label</label></dt>
      <dd><input /></dd>
      <dt><label for="...">Label</label></dt>
      <dd><input /></dd>
      <dt class="visuallyhidden">Actions</dt>
      <dd><button>Enviar</button></dd>
    </dl>
  </fieldset>
</form>

Sobre o required, idem o que o @reinaldoferraz comentou. Além do aria-required="true" no input, se for mesmo necessário deixar visualmente explícito: adicionar via :after do css usando content: "*". Ou se precisar mesmo de um elemento: <i aria-hidden="true">*</i>