Templates de Formulários HTML

Um template de formulário HTML é um bloco de marcação de formulário pronto e reutilizável que você pode copiar em um projeto e adaptar. A maioria dos aplicativos web precisa dos mesmos tipos de formulários repetidamente — contato, login, cadastro, feedback — portanto, em vez de construir cada um do zero, você começa com um template limpo e correto e muda apenas os rótulos, campos e o endpoint de envio.

Trabalhar a partir de um template traz vantagens reais:

• Consistência — todos os formulários usam a mesma estrutura, portanto o estilo e a validação se comportam de forma previsível em todo o site.
• Velocidade — você pula o código repetitivo e se concentra nos campos que são realmente específicos do seu formulário.
• Acessibilidade por padrão — um bom template já vincula cada <label> ao seu controle, agrupa campos relacionados em um <fieldset> e usa os tipos de <input> corretos, garantindo uma experiência adequada para leitores de tela e usuários de teclado.
• Menos bugs — erros comuns (um rótulo que não aponta para nada, um name ausente, o tipo de input errado) já estão resolvidos.

Este capítulo fornece três templates limpos, válidos e prontos para copiar e colar — um formulário de contato, um formulário de login e um formulário de cadastro — além de uma referência rápida aos atributos que os fazem funcionar.

Atributos principais de formulários

Antes dos templates, veja os atributos que você encontrará em todos eles:

A regra mais importante: todo input precisa de um rótulo, e o for do rótulo deve ser igual ao id do input. É por isso que <p for="..."> é inválido — apenas <label> carrega o atributo for.

Template de formulário de contato

Um formulário de contato mínimo: um nome, um e-mail, uma mensagem e um botão de envio. Observe o campo type="email", que oferece validação de formato gratuita no navegador.

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact us</legend>

    <p>
      <label for="contact-name">Name</label>
      <input type="text" id="contact-name" name="name" required>
    </p>

    <p>
      <label for="contact-email">Email</label>
      <input type="email" id="contact-email" name="email" required>
    </p>

    <p>
      <label for="contact-subject">Subject</label>
      <input type="text" id="contact-subject" name="subject">
    </p>

    <p>
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="5" required></textarea>
    </p>

    <button type="submit">Send message</button>
  </fieldset>
</form>

O <textarea> é usado para entrada de múltiplas linhas. Ao contrário do <input>, ele não tem atributo value — seu conteúdo fica entre as tags de abertura e fechamento, e rows define sua altura visível.

Template de formulário de login

Um formulário de login é curto: um identificador (e-mail ou nome de usuário), uma senha e uma caixa de seleção opcional "lembrar de mim". O campo de senha usa type="password" para que os caracteres sejam ocultados.

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>

    <p>
      <label for="login-email">Email</label>
      <input type="email" id="login-email" name="email" autocomplete="username" required>
    </p>

    <p>
      <label for="login-password">Password</label>
      <input type="password" id="login-password" name="password" autocomplete="current-password" required>
    </p>

    <p>
      <label>
        <input type="checkbox" name="remember" value="yes"> Remember me
      </label>
    </p>

    <button type="submit">Log in</button>
  </fieldset>
</form>

Para uma única caixa de seleção, envolver o texto dentro do <label> é um padrão comum e válido — o rótulo fica então implicitamente associado ao controle que contém, portanto você não precisa de um par for/id. As dicas de autocomplete permitem que o navegador e os gerenciadores de senhas preencham as credenciais corretamente.

Template de formulário de cadastro

Um formulário de cadastro é mais longo e apresenta dois controles adicionais: um menu suspenso <select> e um grupo de botões de opção. Botões de opção que compartilham o mesmo name formam um grupo, portanto apenas um pode ser selecionado por vez.

<form action="/register" method="post">
  <fieldset>
    <legend>Create an account</legend>

    <p>
      <label for="reg-name">Full name</label>
      <input type="text" id="reg-name" name="fullname" required>
    </p>

    <p>
      <label for="reg-email">Email</label>
      <input type="email" id="reg-email" name="email" required>
    </p>

    <p>
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" autocomplete="new-password" minlength="8" required>
    </p>

    <p>
      <label for="reg-country">Country</label>
      <select id="reg-country" name="country" required>
        <option value="">Choose…</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="other">Other</option>
      </select>
    </p>

    <fieldset>
      <legend>Account type</legend>
      <p>
        <label>
          <input type="radio" name="account" value="personal" checked> Personal
        </label>
        <label>
          <input type="radio" name="account" value="business"> Business
        </label>
      </p>
    </fieldset>

    <p>
      <label>
        <input type="checkbox" name="terms" value="agreed" required> I agree to the terms
      </label>
    </p>

    <button type="submit">Register</button>
  </fieldset>
</form>

Alguns pontos que merecem atenção:

• O primeiro <option value=""> é um placeholder não selecionável. Como o <select> é required, o navegador bloqueia o envio enquanto essa opção vazia estiver selecionada.
• minlength="8" na senha impõe um comprimento mínimo sem nenhum JavaScript.
• O <fieldset> interno agrupa os botões de opção, e seu <legend> funciona como rótulo para o grupo inteiro — importante para usuários de leitores de tela.

Capítulos relacionados

Para aprofundar cada elemento usado acima:

• A tag <form> — o contêiner e seus atributos action/method.
• A tag <input> — cada type de input e seus atributos.
• A tag <label> — associando rótulos a controles.
• A tag <fieldset> — agrupando campos relacionados com um <legend>.
• A tag <textarea> — entrada de texto em múltiplas linhas.
• A tag <select> — menus suspensos e opções.
• A tag <button> — botões de envio e reset.

Para um guia mais amplo sobre como os formulários funcionam, consulte HTML Forms.

Prática