Ajudar os usuários a inserir dados em formulários

Para tornar um formulário interativo, adicione elementos. Há controles para inserir e selecionar dados, elementos que descrevem controles, elementos que agrupam campos e botões para enviar um formulário.

O que são elementos de formulário?

Você verá dois elementos <input>, <input type="text"> e <input type="file">. Por que eles são diferentes?

Com base no nome do elemento e no atributo type, os navegadores mostram interfaces do usuário diferentes, usam regras de validação distintas e oferecem vários outros recursos. Usar o controle de formulário adequado ajuda você a criar formulários melhores.

Rótulos para elementos de formulário

Digamos que você queira adicionar uma entrada em que o usuário possa inserir a cor favorita dele. Para isso, você precisa adicionar um elemento <input> ao formulário. Mas, como o usuário sabe que precisa preencher a cor favorita dele?

Para descrever os controles de formulário, use um <label> para cada controle de formulário.

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

O atributo for no elemento do rótulo corresponde ao atributo id na entrada.

Como capturar a entrada do usuário

Como o nome sugere, o elemento <input> é usado para coletar entradas dos usuários.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

Como mencionado anteriormente, o atributo id conecta o <input> ao <label>. E os atributos de nome e tipo neste exemplo?

O atributo name

Use o atributo name para identificar os dados que o usuário insere com o controle. Se você enviar o formulário, esse nome vai ser incluído na solicitação. Digamos que você nomeou um controle de formulário como mountain e o usuário inseriu Gutenberg. A solicitação inclui essas informações como mountain=Gutenberg.

Tente alterar o nome do controle de formulário para hill. Se você fizer isso corretamente e enviar o formulário, hill ficará visível no URL.

O tipo de entrada

Existem diferentes tipos de controles de formulário, todos com recursos integrados úteis que funcionam em diferentes navegadores e plataformas. Com base no atributo type, o navegador renderiza diferentes interfaces do usuário, mostra diferentes teclados na tela, usa diferentes regras de validação e muito mais. Vamos conferir como alterar o tipo.

Ao usar type="checkbox", o navegador agora renderiza uma caixa de seleção em vez de um campo de texto. A caixa de seleção também vem com atributos adicionais. Você pode definir o atributo checked para que ele apareça como marcado.

Há vários outros tipos para escolher. Vamos conferir mais detalhes em um módulo futuro.

Permitir várias linhas de texto

Digamos que você precise de um campo onde um usuário possa escrever um comentário. Para isso, não seria ótimo inserir várias linhas de texto? Essa é a finalidade do elemento <textarea>.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

Escolher de uma lista de opções

Como você oferece aos usuários uma lista de opções? Use um elemento <select> para fazer isso.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

Primeiro, adicione um elemento <select>. Assim como acontece com todos os outros controles de formulário, você o conecta a um <label> com o atributo id e atribui um nome exclusivo usando o atributo name.

Entre as tags inicial e final do elemento <select>, você pode adicionar vários elementos <option>, cada um representando uma seleção.

Cada opção tem um atributo value exclusivo para que você possa diferenciá-las ao processar os dados do formulário. O texto dentro do elemento de opção é o valor legível.

Se você enviar o formulário usando este <select> sem mudar a seleção, a solicitação vai incluir color=orange. Mas como o navegador sabe qual opção deve ser usada?

O navegador usa a primeira opção da lista, a menos que:

  • Um elemento <option> tem o atributo selected.
  • O usuário escolhe outra opção.

Pré-selecionar uma opção

Com o atributo selected, é possível pré-selecionar uma opção. Esse será o padrão, independentemente da ordem em que os elementos <option> são definidos.

Como agrupar controles de formulário

Às vezes, é necessário agrupar controles de formulários. Você pode usar o elemento <fieldset> para fazer isso.

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

Você percebeu o elemento <legend> dentro do <fieldset>? Para que você acha que ele é usado?

Se sua resposta for "descrever o grupo de controles de formulário", acertou!

Cada elemento <fieldset> requer um elemento <legend>, assim como todo controle de formulário precisa de um elemento <label> associado. O <legend> também precisa ser o primeiro elemento da <fieldset>. Após o elemento <legend>, é possível definir os controles do formulário que vão fazer parte do grupo.

Como enviar um formulário

Depois de aprender a adicionar controles de formulários e agrupá-los, você pode se perguntar como um usuário pode enviar um formulário.

A primeira opção é usar um elemento <button>.

<button>Submit</button>

Depois que um usuário clica no botão Enviar, o navegador faz uma solicitação ao URL especificado no atributo de ação do elemento <form> com todos os dados dos controles do formulário.

Você também pode usar um elemento <input> com type="submit" em vez de um elemento <button>. A entrada tem a aparência e o comportamento de uma <button>. Em vez de usar um elemento <label> para descrever a <input>, use o atributo value.

<input type="submit" value="Submit">

Além disso, um formulário também pode ser enviado usando a chave Enter quando um campo do formulário está em foco.

Teste seu conhecimento

Teste seus conhecimentos sobre elementos de formulário

Como conectar um <label> a um controle de formulário?

for='color' no <label> e name='color' no <input>.
Tente de novo.
for='color' no <label> e id='color' no <input>.
Correto!
id='color' no <label> e for='color' no <input>.
Tente de novo.
name='color' no <label> e for='color no <input>.
Tente de novo.

O que você usa para um controle de formulário com várias linhas?

Elemento <input> com type='multi-line'.
Tente de novo.
O elemento <text>
Tente de novo.
O elemento <textarea>
🎉
Elemento <input> com type='long'.
Tente de novo.

Como você pode enviar um formulário?

Clicando em um elemento <button>
Correto, essa é uma opção.
Uso da tecla Enter.
Correto, essa é uma opção.
Clicando em um elemento <input> com type='submit'.
Correto, essa é uma opção.
Todas as alternativas acima.
Correto. Todas as respostas são possíveis alternativas para envio de um formulário.

Recursos