Formulários

Formulários são métodos de enviar dados ou ações/comandos para o site, aplicação ou navegador. Em HTML5 se usam os denominados inputs para enviar tais dados de formas diferentes.

Label

O label é uma tag usada para mesclar outras tags ao input, com o intuito de criar uma relação entre elas e melhorar a experiência do usuário. Por exemplo, ao clicar na palavra "Username", o foco é redirecionado ao input de texto para inserir o nome de usuário. Isso pode ser usado com textos, imagens, divs e muitas outras tags.

Username:

Inputs

Em suma, os principais tipos de inputs estão descritos a seguir, divididos em categorias.

Inputs de Texto

Text

Como o nome já diz, é usado para escrever textos, mas seu uso mais comum é para campos de preenchimento de informações como Nome de Usuário, Cargo, Nome da Empresa, Endereço, etc.

Password

Tem o mesmo princípio que o input de texto, porém com foco para escrever senhas, o navegador além de identificar o campo como uma senha de validação, também esconde automaticamente os caracteres que são preenchidos no campo.

E-mail

Inserção de e-mail. Por padrão não tem muita validação, pode-se fazer uso de expressões regulares para melhorar seu uso.

Inputs de Número

Number

É usado para inserir números, seus principais usos são informações como CPF, CEP, Carteira de Trabalho, etc.

Date

Bem objetivo, serve para a inserção exclusiva de datas, incluindo dia, mês e ano.

Datetime-Local

Também usado exclusivamente para a inserção de datas, porém inclui o horário. Existem outros tipos de inputs de data mais específicos, como time (hora), month (mês) e week (semana).

Telefone

Usado exclusivamente para inserir dados de número de telefone, seja fixo, celular ou afins. Por padrão não tem muita validação, então é preciso fazer uso de expressões regulares para definir uma numeração válida. O exemplo a seguir exige que o número contenha o DDD entre parênteses () e um traço (-) antes dos últimos 4 dígitos.

Inputs de Botão

Button

Um botão simples, não possui uso por si próprio então precisa que um script defina o que o botão fará.

Submit

Botão com o intuito de enviar as informações do formulário para o receptor, geralmente um banco de dados.

Reset

Botão que apaga as informações preenchidas no formulário.

Inputs de Marcação

Checkbox

Botões de marcar e desmarcar, útil para formulários que peçam mais de uma alternativa por questão.

Radio

Botões de marcar, útil para escolher apenas uma alternativa. É preciso que esses botões tenham o mesmo name para representarem que são da mesma questão e assim serem usados corretamente.

Inputs Específicos

Color

Permite a inserção de uma cor escolhida pelo usuário.

Range

Altamente usado em sites que possuem algum nível de satisfação do cliente. Usado para definir um valor dentre o mínimo e o máximo permitido (que pode ser alterado).

File

Permite o usuário enviar arquivos de qualquer tipo e formato para o site.

Atributos

Atributos são algumas características que podem ser implementadas nos inputs, com o intuito de ajudar o usuário em sua interação. A seguir são listados alguns dos principais atributos:

• required: Define o input como de preenchimento obrigatório no formulário.
• minlength: Define o número mínimo de caracteres no input.
• maxlength: Define o número máximo de caracteres no input.
• size: Define o tamanho visual do input.
• placeholder: Texto com pouca opacidade que aparecerá no campo de texto do input, geralmente para dar informações adicionais do que deve ser preenchido.
• autocomplete: Ajuda o navegador a autocompletar o campo com uma definição de que informação deve ser preenchida.
• min: Número mínimo em um input de número.
• max: Número máximo em um input de número.
• step: Contagem de "passos" que um número pode pular em um input de número.
• value: Valor padrão do input, que já é inserido assim que a página é carregada.
• pattern: Cria um padrão de preenchimento do input através de expressões regulares.

Inserção de Dados sem Input

Existem algumas tags para a inserção de dados que não necessariamente são inputs, como os casos a seguir.

Select*

Uma tag que permite escolher uma opção dentre uma lista predefinida.

Datalist

Uma tag que permite escolher opções dentre uma lista, porém também é possível preencher com seus próprios dados.

Textarea*

Cria uma área para inserção de texto.

*: Para usar essas tags em um formulário, é recomendado mudar o método do mesmo para POST.

Métodos

Método é o modo como o formulário envia as informações para o banco de dados. Em HTML5 existem duas formas:

• GET: Cria uma sequência de consulta (query string) e a acrescenta à URL do script no servidor que manipula a solicitação. (Esse método tem um limite de 3k bytes de envio de dados)
• POST: Cria um par nome/valor que são passados no corpo da mensagem de pedido HTTP. (Esse método não possui limite de dados a serem enviados)

Output

Uma tag com o propósito contrário do input, ou seja, em vez de receber dados, ele demonstra dados. Os dados que estão em um output não serão enviados para o registro do formulário, apenas serve para uma demonstração ao usuário. Usado junto com scripts.