Formulários

📽 Veja esta vídeo-aula no Youtube

Permitem a entrada de dados pelo usuário em uma interface gráfica semelhante a aplicações desktop, utilizando componentes comumente conhecidos pelos usuários como caixas de texto, checkboxes, combos e botões.

Marcação

Tag form

Elemento em nível de bloco que indica a presença de um formulário e deve envolver todos os componentes de entrada que serão enviados em conjunto na mesma requisição, bem como os botões de ação relacionados.

<form>
    <!-- Marcação do seu formulário -->
</form>

Atributos:

• action - indica o URL do recurso que processará os dados enviados (o padrão é a URL atual).
• method - indica o método de envio dos dados.
  • method="get" - padrão, envia os dados codificados junto à URL action, usando o verbo HTTP GET.
  • method="post" - envia os dados no corpo da requisição, usando o verbo HTTP POST.

Veremos mais sobre action e method em breve.

---

Componentes de entrada

Os prinicipais componentes de entrada usados em formulários serão estudados na sequência. O HTML possui especificação para muitos outros, alguns não implementados por alguns navegadores (como color, date e range) outros mais maduros mas com uso fora do escopo desse curso (como filee image).

De maneira geral, escrevemos nossos componentes dentro de um form, e o envio é controlado por botões de ação descendentes do mesmo form.

Podemos agrupar visualmente campos na tela usando fieldset, e criamos rótulos para campos usando label.

A maioria dos componentes de entrada são elementos em nível de linha, criados usando a tag input. Combos e listas são criados usando select e caixas de texto com múltiplas linhas usam textarea.

Sempre devemos criar um id para identificar cada elemento de entrada, bem como criar um name (se possível com o mesmo valor de id), usado para diferenciar os dados quando enviados para serem processados.

Os elementos que permitem digitação aceitam um valor no atributo placeholder para servir de ajuda ao usuário, ocupando o espaço de digitação quando não houver conteúdo.

Você pode desabilitar um elemento de formulário usando o atributo disabled, e torná-lo somente para leitura com readonly. O atributo required marca um campo como obrigatório.

---

Rótulos

Identificam um campo no formulário.

• Sempre use for para indicar o id do componente identificado.

<label for="nome_usuario">Digite o seu nome:</label>

---

Caixa de texto

Permitem a digitação livre de strings.

• Defina um valor inicial através do atributo value.
• Defina um limites de tamanho com minlength (mínimo) e maxlenght máximo.

Exemplo 1:

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

Exemplo 2:

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

Usar type="text" é opcional, pois é o valor padrão.

---

Caixa de texto numérica

Aceita somente números.

• Defina valores limites com min (mínimo) e max (máximo).

Exemplo 1:

<label for="numero_filhos">Filho(s)</label>
<input type="number" name="numero_filhos" id="numero_filhos">

Exemplo 2:

<label for="numero_filhos">Filho(s)</label>
<input type="number" name="numero_filhos" id="numero_filhos" value="0">

---

Caixa de senha

Esconde os valores digitados. Usado para entrada de senhas.

Exemplo 1:

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

Exemplo 2:

<label for="senha">Senha</label>
<input type="password" name="senha" id="senha" value="minha senha">

---

Checkbox

Entrada de valores boolean.

• Adicione o atributo checked para torná-lo pré-marcado.

Exemplo 1:

<input type="checkbox" name="concordo" id="concordo">
<label for="concordo">Li e concordo</label>

Exemplo 2:

<input type="checkbox" name="concordo" id="concordo" checked>
<label for="concordo">Li e concordo</label>

---

Caixa de texto com múltiplas linhas

Entrada de textos longos, possivelmente com quebra de linha.

• Use rows e cols para definir a quantidade padrão de caracteres em linhas e colunas.
• O conteúdo interno da tag textarea define seu valor inicial.

Exemplo 1:

<label for="comentario">Comentário</label>
<textarea name="comentario" id="comentario" cols="30" rows="5"></textarea>

Exemplo 2:

<label for="comentario">Comentário</label>
<textarea name="comentario" id="comentario" cols="30" rows="5">Achei muito bom!</textarea>

---

Combo box ou caixa de seleção

Permite que seja seleciona uma opção (option) disponível em uma lista (select).

• Use value para definir o valor de cada option.
• Use o atributo selected para marcar a opção pré-selecionada.
• Use size para criar uma lista “aberta” com o número de linhas indicado.

Exemplo 1:

<label for="cidade">Cidade</label>
<select name="cidade" id="cidade">
    <option value="">-- selecione --</option>
    <option value="ita">Itanhaém</option>
    <option value="mga">Mongaguá</option>
    <option value="pbe">Peruíbe</option>
</select>

Exemplo 2:

<label for="cidade">Cidade</label>
<select name="cidade" id="cidade">
    <option>-- selecione --</option>
    <option value="ita">Itanhaém</option>
    <option selected value="mga">Mongaguá</option>
    <option value="pbe">Peruíbe</option>
</select>

Exemplo 3:

<label for="cidade">Cidade</label>
<select name="cidade" id="cidade" size="5">
    <option value="ita">Itanhaém</option>
    <option value="mga" selected>Mongaguá</option>
    <option value="pbe">Peruíbe</option>
</select>

---

Radio e fieldset

Radios são componentes de grupo, onde somente um elemento de cada grupo pode ser selecionado por vez.

• Defina o mesmo name para radios do mesmo grupo.
  • Não use o mesmo id, já que ele deve ser único no documento.
• Use value para definir o valor de cada radio.
• Adicione o atributo checked para tornar um radio pré-marcado.

Você pode utilizar o agrupador visual fieldset com o rótulo legend para separar grupos de radios em seu formulário. Seu uso não é obrigatório, e também não é vinculado aos radios, podendo ser usado em qualquer situação.

• Use o elemento fieldset entre todos os elementos do grupo.
• Adicione um elemento legend no fieldset para indicar uma legenda.

Exemplo 1:

<fieldset>
    <legend>Possui habilitação?</legend>
    <input type="radio" name="habilitacao" id="habilitacao_s" value="s">
    <label for="habilitacao_s">Sim</label>
    <input type="radio" name="habilitacao" id="habilitacao_n" value="n">
    <label for="habilitacao_n">Não</label>
    <input type="radio" name="habilitacao" id="habilitacao_nr" value="nr">
    <label for="habilitacao_nr">Prefiro não responder</label>
</fieldset>

Exemplo 2:

<fieldset>
    <legend>Possui habilitação?</legend>
    <input type="radio" name="habilitacao" id="habilitacao_s" value="s">
    <label for="habilitacao_s">Sim</label>
    <input type="radio" checked name="habilitacao" id="habilitacao_n" value="n">
    <label for="habilitacao_n">Não</label>
    <input type="radio" name="habilitacao" id="habilitacao_nr" value="nr">
    <label for="habilitacao_nr">Prefiro não responder</label>
</fieldset>

---

Botões de ação

Permitem o acionamento do formulário.

• submit cria um botão de envio.
• reset cria um botão que volta os campos para seu valor inicial.
• Você pode utilizar qualquer tipo de conteúdo junto ao texto do botão.

Exemplos:

<button type="submit">Enviar</button>
<button type="reset">Reiniciar</button>

Não use input type="submit" ou "reset", pois são muito mais difíceis de estilizar.

Estilização

Os elementos podem variar muito de uma plataforma para outra, em seu visual e em sua experiência. Há uma capacidade limitada de estilização, portanto faça muitos testes em tudo que mudar.

Fontes geralmente são bem aceitas, porém devem ser sempre ajustadas pois são herdadas da plataforma, e não da folha de estilo do navegador.

As propriedades de box-model são bem suportadas, mas tem valores iniciais bem diferentes em cada componente. Considere utilizar box-sizing: border-box; e ajustar padding e margin, já que cada elemento pode ter um tipo de borda diferente dos demais.

Estilizar fieldset e legend pode ser bem complicado. Evite usar se possível.

Use a propriedade CSS outline: none; para remover o contorno que algumas plataformas deixam em torno de elementos com o foco do usuário.

Use a propriedade CSS cursor para definir diferentes cursores para um item:

• default - padrão (seta)
• none - sem cursor
• pointer - link
• help - ajuda
• wait - aguardando (ampulheta)
• text - cursor para seleção de texto
• not-allowed - clique não permitido

Pseudo-classes para itens de formulário:

• :focus - elementos com o foco do usuário
• :required e :optional - elementos obrigatórios e opcionais
• :valid e :invalid - elementos válidos e inválidos (em relação a required, min/max e minlenght/maxlength, por exemplo)
• :enabled e :disabled - elementos habilitados e desabilitados
• :read-only e :read-write - elementos somente para leitura ou não
• :checked - elementos selecionados (check e radio)