HTML Básico – Formulários

Os formulários são excelentes formas de criar interatividade e coletar informações do usuário.

Os formulários HTML podem conter vários tipos de campos como caixas de texto, caixas de seleção, áreas de texto, lista de opções, botões, etc.

Os usuários deverão preencher com as informações solicitadas em cada campo e fazer o que chamamos de Submit, que é o envio dessas informações para um servidor processá-las.

Para criar esses formulários em uma página web, começamos com o elemento <form> e aqui está um exemplo de como seria:

<form>
    <label>Nome: <input type="text"></label>
    <label>Senha: <input type="password"></label>
    <input type="submit" value="Enviar">
</form>

Resultado:

Nome: Senha:

Elementos de Entrada

Um dos elementos mais comuns em formulários HTML, quer permitem que você especifique o tipo de campo através do atributo type.

Esses elementos podem ser do tipo campo de texto, senha, caixa, rádio, botão de enviar, botão de reset e caixa de seleção.

Alguns elementos de entrada foram introduzidos no HTML5, mas veremos mais detalhes a seguir.

Para criar um elemento de entrada, vamos utilizar o elmento <input>.

Campos de Texto

Os campos de texto são os elementos mais básicos e comuns em formulários, permitindo que o usuário insira textos.

Para criar uma caixa de texto simples usaremos o <input> com o atributo type com o valor text, como podemos exemplificar a seguir:

<form>
    <label for="usuario">Usuário:</label>
    <input type="text" name="usuario" id="usuario">
</form>

Resultado:

Usuário:

Observação: Note que o elemento <label> está definindo um rótulo para o elemento <input> através do atributo for que deve ter o mesmo valor do campo id do input.

Campo de Senha

Os campos de senha, na verdade, são bem semelhantes aos campos de texto, mas os caracteres mostrados exibem asteriscos ou pontos.

Basicamente, esse tipo de campo vai impedir de se ler a senha na tela enquanto você digita, e para criar esse campo, usamos no <input> o valor password no atributo type.

Aqui está um exemplo de uso:

<form>
    <label for="senha">Senha:</label>
    <input type="password" name="senha" id="senha">
</form>

Resultado:

Senha:

Botões de Rádio

Os Radio Buttons são usados geralmente para permitir que o usuário selecione apenas uma opção de um conjunto de valores.

Para criar botões de rádio, usamos o valor radio para o atributo type do elemento <input>, da seguinte forma:

<form>
    <input type="radio" name="sexo" id="masculino">
    <label for="masculino">Masculino</label>
    <input type="radio" name="sexo" id="feminino">
    <label for="feminino">Feminino</label>
</form>

Resultado:

Masculino Feminino

Nota: Repare no código acima que usamos o atributo name para definir o conjunto, ou seja, todos que tiverem o mesmo nome, fazem parte do conjunto.

Caixas de Seleção

Também chamado de checkbox, diferentemente dos botões de radio, são usados para permitir que várias opções sejam selecionadas.

Para criar esse conjunto de opções selecionáveis, usamos o valor checkbox no atributo type do elemento <input> da seguinte forma:

<form>
    <input type="checkbox" name="esportes" id="futebol" checked>
    <label for="futebol">Futebol</label>
    <input type="checkbox" name="esportes" id="basquete">
    <label for="basquete">Basquete</label>
    <input type="checkbox" name="esportes" id="volei">
    <label for="volei">Vôlei</label>
</form>

Resultado:

Futebol Basquete Vôlei

Nota: Definimos o conjunto através do atributo name, assim como nos botões de rádio.

Dica: Para pré-selecionar uma opção por padrão, basta usar o atributo (vazio) checked, como pode ser visto acima.

Seleção de Arquivo

Se você precisar que o usuário envie um arquivo em anexo ao seu formulário HTML, basta usar o valor file para o atributo type de um elemento <input>.

Isso vai fazer com que o navegador renderize um botão que permitirá o usuário localizar o arquivo localmente no dispositivo que esteja usando.

Aqui está um exemplo:

<form>
    <label for="documento">Documento:</label>
    <input type="file" name="upload" id="documento">
</form>

Resultado:

Documento:

Área de Texto

Também chamado de Textarea, é usado para criar uma caixa de texto com linhas e colunas para permitir que o usuário digite mais de uma linha de texto.

Para isso, usamos o elemento <textarea>, da seguinte forma:

<form>
    <label for="biografia">Biografia:</label>
    <textarea rows="3" cols="30" name="biografia" id="biografia">Sua biografia aqui...</textarea>
</form>

Resultado:

Biografia: Sua biografia aqui…

Listas Suspensas

Listas suspensas, menu dropdown ou selects, permitem que o usuário selecione um ou mais opções de uma lista suspensa de opções.

Essa caixa com um lista é criada usando o elemento <select> com a lista de opções usando o elemento <option>, da seguinte forma:

<form>
    <label for="estados">Estados:</label>
    <select name="estados" id="estados">
        <option value="rj">Rio de Janeiro</option>
        <option value="sp">São Paulo</option>
        <option value="mg">Minas Gerais</option>
        <option value="es">Espírito Santo</option>
    </select>
</form>

Resultado:

Estados: Rio de Janeiro São Paulo Minas Gerais Espírito Santo

Botões de Envio e Redefinição

Para que nossos formulários possam ser enviados, usamos um botão de enviar usando o valor submit para o atributo type.

Agora, para oferecer a opção de limpar os dados preenchidos, usamos o valor reset para no atributo type.

Outra coisa importante é que, se precisamos enviar esse formulário para um servidor web, usamos o atributo action com uma URL (relativa ou absoluta).

Além do atributo action, usamos o atributo method que pode ter dois valores: GET ou POST.

Esses métodos, como o nome já diz, indicam o método de envio do formulário.

O método POST passa os valores de forma “oculta”, enquanto o GET acaba enviando tudo que foi inserido no formulário como parâmetro de URL.

Um exemplo, seria algo assim:

<form action="urldoarquivo/arquivo.php" method="post">
    <label for="sobrenome">Sobrenome:</label>
    <input type="text" name="sobrenome" id="sobrenome">
    <input type="submit" value="Enviar">
    <input type="reset" value="Limpar">
</form>

Resultado:

Sobrenome:

Nota: Você também pode criar botões usando o elemento <button> que oferece até mais recursos como a incorporação de outros elementos HTML.

Agrupamento de Campos

Podemos agrupar elementos de formulários usando o elemento <fieldset> e até podemos definir rótulos para esses agrupamentos usando o elemento <legend>.

A ideia do <fieldset> é tornar os campos mais associativos, identificáveis e, desse modo, tornar os formulários mais amigáveis, digamos assim.

Ficaria da seguinte forma:

<form>
    <fieldset>
        <legend>Detalhes de Contato</legend>
        <label>E-mail: <input type="email" name="email"></label>
        <label>Telefone: <input type="text" name="telefone"></label>
    </fieldset>
</form>

Resultado:

Detalhes de Contato

E-mail: Telefone:

Atributos de formulários

Aqui está uma lista de alguns dos atributos mais usados em formulários HTML:

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 por meio do formulário.
method	Especifica o método HTTP usado para enviar os dados ao servidor da 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 apenas quando o valor do methodatributo é post.

Existem vários outros atributos que veremos mais adiante.

Crie o hábito de usar o atributo name nos formulários HTML, especialmente se haverá mais de 1 formulário na página web.

Navegação

<< HTML Básico – ListasHTML Básico – Iframes >>