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