Curso de HTML / Organizar um formulário com fieldset, legend e autocomplete

Use fieldset para agrupar os controles de formulário relacionados e legend para indicar a pergunta do grupo. Para campos como nome ou e-mail de uma pessoa, um token autocomplete apropriado pode informar ao navegador quais informações o campo solicita.

Agrupe uma pergunta com fieldset e legend

Os rótulos individuais dos botões de opção descrevem as respostas, mas os usuários também precisam da pergunta à qual essas respostas pertencem. legend fornece esse nome de grupo. Compare as entradas de rádio e caixas de seleção, incluindo os controles não selecionados, em Escolher os tipos de entrada para e-mails, números, datas e escolhas.

<fieldset>
  <legend>Como entrar em contato?</legend>
  <label><input type="radio" name="contact" value="email"> E-mail</label>
  <label><input type="radio" name="contact" value="phone"> Telefone</label>
</fieldset>

Abra o exemplo em um navegador: uma borda e uma legenda podem aparecer por padrão. O CSS pode alterar essa exibição sem remover a relação. As duas entradas de rádio compartilham name="contact", então escolher uma apaga a outra. Use um fieldset separado para uma pergunta distinta e um nome de grupo de rádio diferente; caso contrário, selecionar uma resposta em uma pergunta pode apagar uma resposta em outra.

Descreva o objetivo de uma entrada com preenchimento automático

<form action="/contact" method="post">
  <fieldset>
    <legend>Informações de contato</legend>
    <label for="full-name">Nome completo</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">Endereço de e-mail</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">Enviar</button>
</form>

autocomplete="name" e autocomplete="email" descrevem os objetivos dos campos. Eles não definem um valor fixo nem enviam informações em nome do usuário. A presença de uma sugestão depende das configurações do navegador e das informações armazenadas. O atributo name é a chave do lado do servidor; o token autocomplete é uma indicação do uso pretendido da entrada. /contact é um caminho ilustrativo e requer um manipulador do lado do servidor. Um objetivo de preenchimento automático não substitui a associação de rótulo e ID descrita em Associe corretamente label e input.

Testar grupos independentes e objetivos de entrada

Salve como groups.html e selecione E-mail e Manhã. Ambas as seleções devem coexistir, pois os grupos usam valores diferentes do atributo name.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercício sobre os grupos</title>
</head>
<body>
  <h1>Responder a duas perguntas independentes</h1>
  <form id="groups-form" method="get">
    <fieldset>
      <legend>Meio de contato</legend>
      <label><input type="radio" name="contact" value="email" required> E-mail</label>
      <label><input type="radio" name="contact" value="phone"> Telefone</label>
    </fieldset>
    <fieldset>
      <legend>Momento da visita</legend>
      <label><input type="radio" name="visit" value="morning" required> Manhã</label>
      <label><input type="radio" name="visit" value="afternoon"> Tarde</label>
    </fieldset>
    <button type="submit">Verificar as duas respostas</button>
  </form>
</body>
</html>

Substitua temporariamente name="visit" por name="contact" nos dois botões de rádio do grupo de visita. Escolher uma resposta desmarca a resposta da outra pergunta: é o mesmo name que define o grupo de rádio. Restaure name="visit" após a comparação.

Escolha um token correspondente às informações solicitadas. autocomplete="postal-code" não valida o formato do código postal, e um navegador sem informações salvas pode não mostrar nenhuma sugestão.

Verificar agrupamento e preenchimento automático

Não coloque perguntas sem relação em um mesmo fieldset, e não espalhe uma pergunta de múltipla escolha sem um nome de grupo. Use os tokens autocomplete definidos em vez de palavras arbitrárias. Teste dois grupos de botões de rádio independentes: se a escolha de uma resposta no segundo limpar a do primeiro, os valores name provavelmente correspondem por engano. O preenchimento automático não valida as informações do usuário, e formulários que coletam dados pessoais sempre requerem práticas apropriadas de segurança e privacidade. Consulte a referência MDN autocomplete e a referência fieldset.