Neste tutorial, você aprenderá como criar um formulário HTML para coletar a entrada do usuário.
O que é um formulário HTML?
Os formulários HTML são necessários para coletar diferentes tipos de entrada do usuário, como detalhes de contato como nome, endereço de e-mail, número de telefone ou detalhes como informações de cartão de crédito.
Os formulários contêm elementos especiais chamados controles, como caixas de entrada, caixas de seleção, botões de opção, botões de envio etc. Os usuários geralmente preenchem formulários modificando seus controles, como inserir texto, selecionar itens e assim por diante. e envie este formulário ao servidor web para processamento adicional.
A tag <form> é usada para criar formulários HTML. Aqui está um exemplo de um formulário de login simples:
<form>
<label>Nome de usuário: <input type="text"></label>
<label>Senha: <input type="password"></label>
<input type="submit" value="Enviar">
</form>As seções a seguir descrevem os diferentes tipos de controles que você pode usar em formulários.
Elemento de entrada
Este é o elemento mais comumente usado em formulários HTML.
Permite especificar vários tipos de campos de entrada do usuário com base no atributo type. Os tipos de elementos de entrada podem ser campos de texto, campos de senha, caixas de seleção, botões de opção, botões de envio, botões de redefinição, caixas de seleção de arquivo e vários novos tipos de entrada introduzidos no HTML5.
Os tipos de entrada mais comuns são descritos abaixo.
Campo de texto
Um campo de texto é uma área de uma linha que permite ao usuário inserir texto.
Um controle de entrada de texto de linha única é criado usando o elemento <input>, cujo atributo type tem o valor text. Aqui está um exemplo de uma entrada de texto de uma linha para obter um nome de usuário:
<form>
<label for="username">Nome de usuário:</label>
<input type="text" name="username" id="username">
</form>O código acima ficará assim, conforme imagem abaixo:
Nota: A tag <label> é usada para definir o rótulo do elemento <input>. Se você quiser que seus usuários insiram várias linhas, use <textarea> em vez disso.
Campo de senha
Os campos de senha são semelhantes aos campos de texto. A única diferença é que os caracteres no campo de senha são mascarados, ou seja, exibidos como asteriscos ou pontos. Isso é para evitar que outras pessoas leiam a senha na tela. Este também é um controle de entrada de texto de linha única criado com um elemento <input> cujo valor do atributo type é password.
Veja a seguir um exemplo de uma entrada de senha de uma linha para obter a senha de um usuário:
<form>
<label for="user-pwd">Senha:</label>
<input type="password" name="user-password" id="user-pwd">
</form>O código acima ficará assim, conforme imagem abaixo:
Botão de rádio em HTML
Os botões de opção são usados para permitir que o usuário selecione exatamente uma opção de um conjunto predefinido de opções. Ele é criado usando o elemento <input>, que tem um valor no atributo type de radio.
Veja a seguir um exemplo de botão de opção que pode ser usado para coletar informações de gênero de um usuário:
<form>
<input type="radio" name="genero" id="masculino">
<label for="male">Masculino</label>
<input type="radio" name="genero" id="feminino">
<label for="female">Feminino</label>
</form>O código acima ficará assim, conforme imagem abaixo:
Caixa de seleção (checkbox)
As caixas de seleção permitem que os usuários selecionem uma ou mais opções de um conjunto predefinido de opções. Ele é criado usando um elemento <input> com um valor de atributo type de checkbox.
Veja a seguir exemplos de caixas de seleção que podem ser usadas para coletar informações sobre as preferências do usuário:
<form>
<input type="checkbox" name="esporte" id="futebol">
<label for="soccer">Futebol</label>
<input type="checkbox" name="esporte" id="volei">
<label for="cricket">Vôlei</label>
<input type="checkbox" name="esporte" id="basquete">
<label for="baseball">Basquete</label>
</form>O código acima ficará assim, conforme imagem abaixo:
Nota: Se você quiser que um botão de opção ou caixa de seleção seja marcado por padrão, você pode adicionar o atributo check ao elemento de entrada, como <input type=”checkbox” selected>.
Atenção! Descubra os melhores cursos de programação neste guia especial: Cursos de Programação.
Caixa de seleção de arquivo com HTML
Os campos de arquivo permitem que os usuários naveguem em arquivos locais e os enviem como anexos com dados de formulário. Navegadores da Web como Google Chrome e Firefox apresentam um campo de entrada de seleção de arquivo com um botão de navegação, permitindo que o usuário navegue no disco rígido local e selecione um arquivo.
Isso também é criado usando um elemento <input> com o valor do atributo type definido como file.
<form>
<label for="file-select">Enviar:</label>
<input type="file" name="upload" id="file-select">
</form>O código acima ficará assim, conforme imagem abaixo:
Dica: Existem vários outros tipos de entrada. Confira a seção sobre novos tipos de entrada HTML5 para saber mais sobre os novos tipos de entrada introduzidos.
Área de texto (textarea)
Textarea é um controle de entrada de texto de várias linhas que permite aos usuários inserir várias linhas de texto. Os controles de entrada de texto de várias linhas são criados usando o elemento <textarea>.
<form>
<label for="address">Mensagem:</label>
<textarea rows="3" cols="30" name="msg" id="msg"></textarea>
</form>O código acima ficará assim, conforme imagem abaixo:
Caixa de seleção em HTML
Uma caixa de seleção é uma lista suspensa de opções que permite ao usuário selecionar uma ou mais opções da lista suspensa de opções. As caixas de seleção são criadas usando elementos <select> e elementos <option>.
Os elementos <option> dentro do elemento <select> definem cada item na lista.
<form>
<label for="cidade">Cidade:</label>
<select name="cidade" id="cidade">
<option value="belem">Belém</option>
<option value="londrina">Londrina</option>
<option value="riodejaneiro">Rio de Janeiro</option>
</select>
</form>O código acima ficará assim, conforme imagem abaixo:
Botões de envio e redefinição
Os botões de envio são usados para enviar dados de formulário para um servidor da web. Quando o botão enviar é clicado, os dados do formulário são enviados para o arquivo especificado no atributo de ação do formulário para processar os dados enviados.
O botão reset redefine todos os controles de formulário para os valores padrão. Experimente o exemplo a seguir digitando seu nome no campo de texto e clique no botão enviar para vê-lo em ação.
<form action="action.php" method="post">
<label for="nome">Primeiro nome:</label>
<input type="text" name="nome" id="nome">
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</form>O código acima ficará assim, conforme imagem abaixo:
Digite seu nome no campo de texto acima e clique no botão enviar para vê-lo em ação.
Nota: Você também pode criar botões usando o elemento <button>. Os botões criados com o elemento <button> funcionam de forma semelhante aos botões criados com o elemento input, mas oferecem possibilidades de renderização mais ricas ao permitir que outros elementos HTML sejam incorporados.
Controles de formulário de grupo
Você também pode usar o elemento <legend> para agrupar controles e rótulos logicamente relacionados em um formulário da web. Agrupar controles de formulário em categorias torna mais fácil para os usuários encontrarem controles que tornam o formulário mais amigável. Vamos tentar o seguinte exemplo para ver como funciona:
<form>
<fieldset>
<legend>Detalhes de contato</legend>
<label>Endereço de e-mail: <input type="email" name="email"></label>
<label>Número de telefone: <input type="text" name="telefone"></label>
</fieldset>
</form>O código acima ficará assim, conforme imagem abaixo:
Atributos comuns usados em formulários
A tabela a seguir lista os atributos de elemento de formulário mais usados:
| Atributo | Descrição |
|---|---|
name | Especifica o nome do formulário. |
action | Especifica a URL do programa ou script no servidor web que será usado para processar as informações enviadas via formulário. |
method | Especifica o método HTTP usado para enviar os dados ao servidor web pelo navegador. O valor pode ser get(o padrão) e post. |
target | Especifica onde exibir a resposta recebida após o envio do formulário. Os valores possíveis são _blank, _self, _parente _top. |
enctype | Especifica como os dados do formulário devem ser codificados ao enviar o formulário ao servidor. Aplicável somente quando o valor do atributo method for post. |
Existem vários outros atributos, para conhecê-los, veja a referência da tag .
Nota: O atributo name representa o nome do formulário na coleção de formulários. Seu valor deve ser exclusivo nos formulários do documento e não pode ser uma string vazia.
Dica: Todos os dados enviados pelo método get ficam visíveis na barra de endereços do navegador. No entanto, os dados enviados via correio são invisíveis para o usuário.
Leia também: HTML: guia sobre listas
