Para tornar um formulário interativo, é necessário adicionar elementos a ele. 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ê encontra dois elementos <input>, <input type="text"> e <input type="file">. Por que elas são diferentes?
Com base no nome do elemento e no atributo type, os navegadores mostram diferentes interfaces do usuário, usam regras de validação diferentes e oferecem 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 dele.
Para isso, adicione um elemento <input> ao formulário.
Mas como o usuário sabe que precisa preencher a cor favorita?
Para descrever os controles de formulário, use um <label> para cada controle.
<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 a entrada do usuário
Como o nome sugere, o elemento <input> é usado para coletar informações 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 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 será incluído na solicitação.
Digamos que você tenha nomeado um controle de formulário como mountain e o usuário tenha inserido Gutenberg.
A solicitação inclui essas informações como mountain=Gutenberg.
Tente mudar
o nome do controle de formulário para hill.
Se você fizer isso corretamente e enviar o formulário, o hill vai aparecer 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
regras de validação diferentes e muito mais. Vamos conferir como mudar 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 tem outros atributos.
É possível definir o atributo checked para mostrar que ele está marcado.
Há 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 se eles pudessem inserir várias linhas de texto?
Esse é o objetivo do elemento <textarea>.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Escolher em uma lista de opções
Como você oferece aos usuários uma lista de opções para selecionar?
Para isso, use um elemento <select>.
<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 todos os outros controles de formulário, conecte-o a um <label> com o atributo id
e atribua um nome exclusivo usando o atributo name.
Entre as tags de início e fim 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 option é o valor legível por humanos.
Se você enviar o formulário usando esse <select> sem mudar a seleção,
a solicitação 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 atributoselected. - O usuário escolhe outra opção.
Pré-selecionar uma opção
Com o atributo selected, é possível pré-selecionar uma opção.
Isso se torna o padrão, independentemente da ordem em que os elementos <option> são definidos.
Agrupar controles de formulário
Às vezes, você precisa agrupar controles de formulário. Para isso, use o elemento <fieldset>.
<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 ele é usado?
Se sua resposta for "descrever o grupo de controles de formulário", você acertou!
Cada elemento <fieldset> requer um elemento <legend>,
assim como cada controle de formulário precisa de um elemento <label> associado.
O <legend> também precisa ser o primeiro elemento no <fieldset>.
Depois do elemento <legend>, é possível definir os controles de formulário que devem fazer parte do grupo.
Enviar um formulário
Depois de aprender a adicionar controles de formulário 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 para o URL especificado no
atributo action
do elemento <form>
com todos os dados dos controles do formulário.
Também é possível usar um elemento <input> com type="submit" em vez de um elemento <button>.
A entrada tem a mesma aparência e comportamento de uma <button>. Em vez de usar um elemento <label> para descrever
o <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 de 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>.for='color' no <label> e id='color' no <input>.id='color' no <label> e for='color' no <input>.name='color' no <label> e for='color no <input>.O que você usa para um controle de formulário de várias linhas?
<input> com type='multi-line'.<text><textarea><input> com type='long'.Como enviar um formulário?
<button>.Enter.<input> com type='submit'.