Formulários de outro planeta

Form

<form>

O que é?

É um container estilo <section> e <footer>;

Elemento que definirá um fomulário.

Atributos básicos

Action. Todos os dados de dentro do form serão enviados para algum lugar;

Method. Vai definir somente POST ou GET, que são métodos de escrita de URL. O POST esconde algumas infos.

Action

Method

Lembrar:

NUNCA criar um form dentro de outro form!

Voltar ao índice

Fieldset legend

O que ele proporciona?

Agrupamento de campos
Mesmo propósito
Semântico
Acessibilidade

Atributos especiais

disabled
desabilita todos os elementos
não serão enviados ao submeter o formulário
form
permite linkar id de um formulário ao qual esse fieldset pertence
não precisa estar dentro do formulário
name
nome do grupo

nome do agrupamento
primeiro elemento dentro do fieldset

Dentro do formulário:

<form action=""> <fieldset> <legend>Contato</legend> <label for="">Nome</label> <input type="text"> </fieldset> </form>

Caso precise ficar fora, o fieldset carrega o id do form:

<form id="contato" action=""> </form>
<fieldset form="contato"> <legend>Contato</legend> <label for="">Nome</label> <input type="text"> </fieldset>

Contato

Voltar ao índice

Label

<label>

Pra que serve?

Serve para:

associar e identificar uma (ou mais) tag de entrada de dados
acessibilidade
poderei clicar para mudar o foco da entrada de dados

<label for="">Nome Completo:<input type="text"></label>

Nome Completo:

Atributos

para fazer a conexão entre este label e a tag de entrada de dados
é feita via id do input
só funciona com elementos específicos

button, input (not hidden), meter, output, progress, select, textarea

<label for="nome">Nome Completo:</label>
<input id="nome" type="text">

Nome Completo:

Voltar ao índice

Button

O que é?

Representa um botão
Usado para enviar formulários
É estilizado pelo user agent

Atributos comuns

type

submit; enviar o formulário
reset; limpar o form.
button; mesma função do submit.

autofocus; quando abre a página, o cursor vai direto em quem tiver autofocus (só pode ter um).
disabled
name; título da mensagem pra quem vai receber o form.
value; mensagem pra quem vai receber o formulário.
form; pra quando está fora do form. Funciona no mesmo padrão do label.

<form action="">
<input type="text" value="Digite aqui">
<button type="reset">Limpar</button>
</form>

Voltar ao índice

Datalist

O que é?

Lista de valores como sugestão a uma tag input;
Valores sugestivos e não obrigatórios;
Usuário poderá selecionar um dos valores, ou colocar um valor diferente da sugestão;

list

Recebe como valor o id de um datalist residente no mesmo documento.

Tipos de input suportados

text, search, url, tel, email, date, month, week, time, datetime-local, number, range e color.

Tipos de input não suportados

hidden, password, checkbox, radio, file, ou qualquer tipo de button.

User Agent

Verificar a compatibilidade com o browser https://caniuse.com

<datalist id="fuitsdata">
<option value="">brmaçã</option>
<option value="">brbanana</option>
<option value="">brmorango</option>
<option value="">brpera</option>
<option value="">bruva</option>
</datalist>

Voltar ao índice

Input

<input>

Características

Um dos mais usados em formulários
Aceita os mais diversos tipos de dados;
Um dos mais poderosos e complexos;
Elevado número de combinações;

Atributos comuns

type;
name;
id;
autocomplete; busca no browser dados que usei com frequência.
autofocus;
disabled;
readonly (aceito por quase todos); primo do disabled que não fica com aspecto opaco.
value;
form (aceito por quase todos); combinando com o id do form.
name;
required (aceito por quase todos); se torna obrigatório.
placeholder (aceito por: password, search, tel, text, url); texto substituível no background do input. Não consegue ser lido pelo leitor de tela, por isso o name e o value ajudam na acessibilidade.

Voltar ao índice

Password

Características

Colocar uma senha de maneira segura;
Esconde o que está sendo digitado no campo;
O estilo da apresentação do campo, depende do User Agent.

minlength / maxlength

O número mínimo e/ou máximo de caracteres para este campo

size

O número aceitável de caracteres que esse campo deverá conter.

pattern

Expressão regular para validar o que está sendo digitado no campo.

Altamente recomendado o uso de um padrão de segurança alta de senhas.

exemplo: queremos que a senha contenha caracteres hexadecimais com o limite de no mínimo 4 e no máximo 8 caracteres.

pattern="[0-9a-fA-F]{4,8}"

inputmode

poderá alterar o uso do teclado em smartphones;
exemplo: queremos que o cliente só adicione números;

inputmode="numeric"

autocomplete

on: permite a sugestão de: new password ou current password;
off: desabilita o autocomplete;
new password: poderá sugerir uma nova senha.

E outros...

placeholder;
readonly;
required.

Voltar ao índice

Email

Características

Espera que o usuário digite um email.

Irá validar ser o valor digitado é um email.

Atributos

placeholder;
readonly / disabled;
value;
required;
multiple; irá receber um ou mais emails, separado por vírgulas;
minleght/maxlenght
size;
datalist; uma lista que contenha valores do datalist que não forem compatíveis com o campo, não serão apresentados como sugestão;

pattern

Uso da expressão regular para validar o campo.

Exemplo: o usuário só poderá colocar email do domínio rocketseat.com.br

Voltar ao índice

URL

Características

Espera que o usuário digite uma url.

Irá validar se o valor digitado é uma url.

Atributos

placeholder;
readonly/disabled;
value;
required;
minlenght/maxlenght;
size;
pattern;
datalist;
spellcheck; habilitar a verificação ortográfica.

Voltar ao índice

File

Características

Usuário poderá escolher 1 ou mais arquivos para enviar no formulário.

Para envio dos arquivos o form deverá utilizar o method do tipo POST e o atributo enctype como "multipart/form-data".

Atributos

value;
accept; descreve que tipos de arquivos serão aceitos (exemplo: .doc, .docx, .pdf, audio/*, image/png, .png).
files;
multiple;

Voltar ao índice

Color

Características

Interface para selecionar cor.

Color picker.

Atributos

value: RGB. Se inválido, a cor preta será exibida.
datalist

Voltar ao índice

Checkbox

Características

Caixas que podem ser marcadas.

Selecionar um valor para ser enviado.

Se não selecionado, não será enviado nenhum dado.

Atributos

globais
value

valor que aquele campo contém
se não estiver presente, o padrão é 'on'

checked

para deixar o campo marcado por padrão

Múltiplos valores

Usaremos o atributo 'name' com o mesmo nome para os diversos campos.

HTML


                  <fieldset>

                  <legend>Choose your interests</legend>

                  <div>

                  <input type="checkbox" id="coding" name="interest" value="coding" checked>

                  <label for="coding">Coding</label>

                  </div>

                  <div>

                  <input type="checkbox" id="music" name="interest" value="music">

                  <label for="music">Music</label>

                  </div>

                  </fieldset>

Resultado

Choose your interests

Coding

Music

Voltar ao índice

Hidden

Características

Invisível ao usuário;
Será enviado com o formulário;
Não receberá foco;
Leitores de tela não percebem esse campo.

Voltar ao índice

Radio

Características

Projetado para selecionar uma única opção de um grupo de opções.

Atributos

checked

indica que o campo foi marcado.

value

valor que aquele campo contém.

HTML


                  <fieldset>

                  <legend>Bora tomar um café?</legend>

                  <label for="yep">sim</label>

                  <input type="radio" id="yep" name="coffee" value="yes">

                  <label for="nono">não</label>

                  <input type="radio" checked id="nono" name="coffee" value="no">

                  </fieldset>

Resultado

Bora tomar um café? sim não

Voltar ao índice

Textarea

Características

Mais de uma linha.

Útil para textos grandes.

Considera espaço quando a quebra de linha é feita no html pela tecla Enter (não quebrar a linha).

Atributos

id;
name;
rows e cols;
maxlegth e minlenght (máximo e mínimo de caracteres);
wrap (ultrapassa os limites da box e ativa barra de rolagem);
...outros comuns aos <input>s:

autocomplete, autofocus, disabled, placeholder, readonly, form, required.

Voltar ao índice

Select

Características

Controle que fornece um menu de opções.

Características do <option>

Contém as opções a serem selecionadas.

Atributo necessário: value.

Atributos

multiple;

Habilita a seleção de múltiplas opções.

size;

Quantas opções visíveis.

HTML


                  <label for="carselect">Qual modelo do carro?</label>

                  <select name="carmodel" id="carselect">

                  <option value="">Selecione o modelo</option>

                  <option value="fiat">Uno</option>

                  <option value="audi">A3</option>

                  </select>

Resultado

Qual modelo do carro?

Voltar ao índice

Optgroup

Características

Estará dentro do <select>.

Indicará um grupo dentro da janela de seleção.

Atributos

label;

HTML


                  <label>Please choose one or more pets:

                  <select name="pets" multiple size="4">

                  <optgroup label="4-legged pets">

                  <option value="dog">Dog</option>

                  <option value="cat">Cat</option>

                  <option value="hamster">Hamster</option>

                  </optgroup>

                  <optgroup label="Flying pets">

                  <option value="parrot">Parrot</option>

                  <option value="macaw">Macaw</option>

                  <option value="albatross">Albatross</option>

                  </optgroup>

                  </select>

                  </label>

Resultado

Please choose one or more pets:

Voltar ao índice

Search

Características

Para campos de busca.

É igual ao campo do tipo 'text', mas poderá ser um pouco diferente dependendo do user agent.

Atributos

list / <datalist>;
pattern; caracteres permitidos.
aria-label; é uma opção ao label.

HTML


                  <datalist id="searchterms">

                  <option value="">Mac</option>

                  <option value="">Windows</option>

                  <option value="">Linux</option>

                  </datalist>

                  <form action="">

                  <input type="search" name="q" list="searchterms" placeholder="Digite aqui" size="13" aria-label="Campo de pesquisa">

                  <button>Pesquisar</button>

                  </form>

Resultado

Voltar ao índice

Number

Características

Entrada de números.

Atributos

min/max;
step; de quanto em quanto ele pula.
datalist;

Voltar ao índice

Range

Características

Controle para selecionar um valor numérico.

Slider ou dial control.

Atributos

min/max;
step;

Voltar ao índice

Data e hora

HTML

<input type="date">

Resultado

HTML

<input type="datetime-local">

Resultado

HTML

<input type="week">

Resultado

Voltar ao índice

Estrutura

Tags de Entrada 1

Tags de Entrada 2

Form

Action

Method

Fieldset legend

Label

Button

Datalist

Input

Password

Email

URL

File

Color

Checkbox

HTML

Resultado

Hidden

Radio

HTML

Resultado

Textarea

Select

HTML

Resultado

Optgroup

HTML

Resultado

Search

HTML

Resultado

Number

Range

Data e hora

HTML

Resultado

HTML

Resultado

HTML

Resultado