Usamos formulários para capturar informações dos usuários e processar solicitações. Através de controles ou campos, os formulários podem solicitar uma pequena quantidade de informações, como um campo de buscas do Google faz, por exemplo.

Precisamos saber como criar formulários para adquirir a entrada do usuário. Por enquanto, vamos discutir como usar o HTML para marcar um formulário, quais elementos usar para capturar diferentes tipos de dados.

Criando um Formulário

Um dos elementos principais usados para obter uma entrada do usuário é o elemento input. Esse elemento usa o atributo type para definir qual tipo de informação deve ser capturada pelo input.

O valor de atributo de tipo mais popular é o text.

Outro elemento que é usado para capturar texto é o elemento textarea. Diferente do input, esse elemento pode aceitar textos maiores, ideal para quando queremos receber um texto com mais de uma linha.

Ele aceita apenas um tipo de valor, o atributo name.

Com botões de rádio, um usuário faz uma seleção de múltipla escolha. Assim, temos que definir o valor de entrada. Usando o atributo de value, podemos definir um valor específico para cada elemento input.

Parar cria-lo, usamos o input, e adicionamos o type radio. É necessário que todos os botões do conjunto tenham o mesmo name.

É possível também pré-selecionar um botão de opção para o usuário, podemos usar o atributo checked.

Há também o checkbox. Usamos os mesmos atributos e padrões do radio buttons, mas para usá-lo mudamos o valor do type para checkbox.

Com o checkbox, os usuários podem selecionar vários valores.

Mais alguma prática...

Para permitir selecionar uma opção em uma lista. Para cria-la usaremos os elementos select e option. O elemento select envolve todas as opções.

Cada opção é marcada usando o elemento option.

Cada elemento da lista fica em um option. Ao invés de checked, para pré-selecionar uma opção usamos o selected como atributo na opção que queremos fazer isso.

O atributo de valor é usado para especificar o texto que aparece no botão.

Os usuários clicam no botão enviar para processar dados depois de preencher um formulário. O botão enviar é criado usando o elemento input com um valor de atributo de tipo de envio.

O elemento button executa da mesma maneira que o elemento input com o valor de atributo de tipo de submit; mas ele também inclui tags de abertura e fechamento, que podem conter outros elementos.

Para permitir que os usuários adicionem um arquivo a um formulário, como anexar um documento a um e-mail, por exemplo, usamos o valor do arquivo para o atributo type.

Os labels fornecem legendas ou títulos, vinculando-os e criando uma forma acessível para todos os usuários e tecnologias assistivas, muito úteis para garantir acessibilidade.

Podemos incluir um atributo for, o valor dele deve ser o mesmo que o valor do atributo id no controle de formulário ao qual esse label corresponde.

O elemento também pode envolver controles de formulário, como botões de opção ou caixas de seleção. Nesse caso não precisamos usar os atributos for e id.

Usamos Fieldsets para agrupar os controles de formulário e os rótulos em seções organizadas. Assim como uma section, fieldset é um elemento de nível de bloco que envolve elementos relacionados dentro de um form, para melhor organização.

Legend funciona como um título para o fieldset, ele pode envolver uma descrição dos controles do fieldset.

Mais alguma prática...

Há ainda muitos atributos úteis que não vimos ainda, por agora, veremos mais alguns dos mais usados.

Para desabilitar um campo por exemplo, usamos o atributo disabled:

Para mostrar uma descrição do controle dentro do próprio campo input usamos o placeholder:

Para tornar o preenchimento do campo como obrigatório usamos o required: