Formulários

Formulários são compostos por widgets. Os widgets podem ser campos de texto, checkboxes, radio buttons, etc. Os dados dos formulários geralmente são acessados e manipulados no servidor usando uma linguagem server-side, tal como PHP ou Python. Lá, deve ser feito não somente o acesso, como também a filtragem e validação dos dados, e quaisquer outras ações que devem ser feitas no formulário, que variam muito de acordo com o tipo do formulário. Essas ações podem ser, por exemplo, um envio de e-mail ou um cadastro de um usuário. Veja abaixo um exemplo de formulário:

<form method="POST" action="cadastro-usuario">
  <label>
    Nome de usuário
    <input type="text" name="nome_usuario" />
  </label>
  <label>
    Email
    <input type="email" name="email" />
  </label>
  <label>
    Senha
    <input type="password" name="senha" />
  </label>
</form>

O formulário acima é bem simples. Contém apenas três campos, que estão envolvidos em labels. Labels são explicadas em mais detalhes depois. Vamos nos concentrar no elemento <form>. Veja que ele contém os atributos method e action.

O atributo method define o método HTTP que será usado no formulário. Geralmente, esse método é POST, mas nem sempre. Exemplo: um formulário de busca deve usar o método GET. Geralmente, os dados são enviados para um servidor. O atributo action especifica a página para onde o usuário deve ser enviado quando o formulário for submetido.

Note que todos os campos tem o atributo name. Esse atributo é necessário, visto que os valores dos campos são acessados no servidor pelos valores definidos nesse atributo.

O atributo autocomplete ativa/desativa o autocomplete, enquanto o atributo novalidate indica que o formulário não deve ser validado na submissão.

O <fieldset> é usado para marcar grupos de campos de um formulário. Ele é uma ótima prática de acessibilidade e é muito usado em formulários complexos, para deixar o formulário mais organizado. Você marca a legenda com o elemento <legend>. Sempre que você tiver radio buttons, você deve colocá-los em um <fieldset>. Você também pode aninhar fieldsets. Veja o exemplo abaixo, com dados cadastrais separados de dados de acesso:

<form method="POST" action="cadastro-usuario">
  <fieldset>
    <legend>Dados cadastrais</legend>
    <label>
      Nome
      <input type="text" name="nome" />
    </label>
    <fieldset>
      <legend>Sexo</legend>
      <label>
        <input type="radio" name="sexo" value="Feminino" />
        Masculino
      </label>
      <label>
        <input type="radio" name="sexo" value="Feminino" />
        Feminino
      </label>
    </fieldset>
    <label>
      Senha
      <input type="password" name="senha" />
    </label>
  </fieldset>
  <fieldset>
    <legend>Dados de acesso</legend>
    <label>
      Nome de usuário
      <input type="text" name="nome_usuario" />
    </label>
    <label>
      Email
      <input type="email" name="email" />
    </label>
    <label>
      Senha
      <input type="password" name="senha" />
    </label>
  </fieldset>
<form>

Imagens e arquivos podem ser enviados usando o atributo enctype no formulário com o valor multipart/form-data:

<form method="post" enctype="multipart/form-data" action="upload.php">
  <input type="file" name="pic" />
  <input type="submit" value="Upload" />
</form>