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ê vai 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 mostram interfaces de usuário diferentes, 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
Suponha 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 informar a cor favorita?
Para descrever 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.
Capturar 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 antes, o atributo id conecta o <input> ao <label>.
E o atributo "name" e "type" 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.
Se 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 mudar
o nome do controle de formulário para hill.
Se você fizer isso corretamente e enviar o formulário, hill vai aparecer no URL.
O tipo de entrada
Há 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. Confira como mudar o tipo.
Ao usar type="checkbox", o navegador renderiza uma caixa de seleção em vez de um campo de texto.
A caixa de seleção também vem com outros atributos.
Você pode definir o atributo checked para mostrar a caixa de seleção marcada.
Há vários outros tipos que você pode escolher. Vamos analisar isso em detalhes em um módulo futuro.
Permitir várias linhas de texto
Por exemplo, você precisa 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?
Essa é a finalidade 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 em 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 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.
Se você enviar o formulário usando <select> sem mudar a seleção,
a solicitação vai incluir color=orange. Mas como o navegador sabe qual opção usar?
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. Esse será o padrão, independente da ordem em que os elementos <option> forem definidos.
Agrupar controles de formulário
Às vezes, é necessário 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ê percebeu o elemento <legend> dentro do elemento <fieldset>? Para que você acha que ele é usado?
Se sua resposta for "para descrever o grupo de controles de formulário", você acertou!
Todo 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 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, 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 clica no botão Enviar,
o navegador faz uma solicitação ao URL especificado no atributo action
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 mesma aparência e comportamento de um <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 tecla Enter quando um campo de formulário está em foco.
Teste seu conhecimento
Teste seus conhecimentos sobre elementos de formulário
Como você conecta 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'.