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

Para tornar um formulário interativo, é necessário adicionar elementos de formulário. 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 parecem diferentes?

Com base no nome do elemento e no atributo type, os navegadores da Web mostram interfaces do usuário diferentes, regras de validação, e fornecer muitos outros recursos. Usar o controle de formulário adequado ajuda 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. 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 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 de rótulo corresponde ao atributo id na entrada.

Como capturar entradas 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 quanto ao atributo nome e tipo nesse exemplo?

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 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.

Tentar mudar 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ários, todos com recursos integrados úteis que funcionam em diferentes navegadores e plataformas. Com base no app type atributo, o navegador renderiza diferentes interfaces do usuário, mostra diferentes teclados na tela, usa regras de validação diferentes e muito mais. Vamos ver 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.

Existem vários outros tipos que você pode escolher. Vamos abordar isso em detalhes em um módulo futuro.

Permitir várias linhas de texto

Digamos que você precise de um campo em que 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 fornecer aos usuários uma lista de opções para seleção? 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>. Como acontece com todos os outros controles de formulário, você o conecta a um <label> usando o atributo id. e atribuir um nome exclusivo a ela usando o atributo name.

Entre as tags de início e término do elemento <select>, é possível 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 por humanos.

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é-selecione uma opção

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

Controles de formulário de agrupamento

Às vezes, você precisa agrupar controles de formulário. Use 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ê notou o elemento <legend> dentro do elemento <fieldset>? Para que você acha que ela é usada?

Se a resposta é "descrever o grupo de controles de formulário", acertou!

Cada elemento <fieldset> requer um elemento <legend>, assim como todos os controles de formulário precisam de um elemento <label> associado. O <legend> também precisa ser o primeiro elemento da <fieldset>. Após o elemento <legend>, você pode definir os controles de formulário que precisam fazer parte do grupo.

Envio de um formulário

Depois de aprender a adicionar controles de formulários e agrupá-los, talvez você se pergunte 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 clicar no botão Enviar, o navegador faz uma solicitação ao URL especificado no elemento <form> atributo de ação 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 <input>, use o atributo value.

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

Além disso, também é possível enviar um formulário usando a tecla Enter quando o campo de um 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 novamente.
for='color' no <label> e id='color' no <input>.
Correto!
id='color' no <label> e for='color' no <input>.
Tente novamente.
name='color' no <label> e for='color no <input>.
Tente novamente.

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

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

Como enviar um formulário?

Clicando em um elemento <button>.
Correto, essa é uma opção.
Usando a chave 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 opções possíveis para enviar um formulário.

Recursos