tecnologias-web.github.io
Formulários HTML5
- Formulários HTML5
Introdução
Até agora só temos uma maneira para coletar informações do usuário: a barra de endereços do navegador. Hoje quando pensamos em web, pensamos na quantidade de interações e informações que colocamos em diversos formulários que preenchemos: cadastros, transferências bancárias, provas, etc.
O formulário, e seus subcomponentes, é responsável por coletar informações das mais diversas do usuário e mandá-las para o servidor.
Formulário
Por enquanto, a única informação que conseguimos coletar do nosso usuário é o recurso que ele deseja alcançar (via URL). Como podemos fazer para coletar outras informações, como por exemplo, um cadastro de cliente em uma loja?
Para isso o HTML possui um elemento chamado de formulário. Representado pela tag form, esta tag se comporta como uma DIV visualmente. Um formulário é composto basicamente de campos de coleta de dados (chamamos de inputs) e de etiquetas desses campos (chamamos de labels).
Além dos campos, um formulário deve ter um botão de submissão (vamos ver adiante). Podemos também dividir os campos do nosso formulário em categorias (ex: dados pessoais e dados de entrega), usando o fieldset.
Para usarmos o form precisamos definir as seguintes propriedades:
- action: para onde o formulário deve enviar os dados.
- method: como o formulário deve enviar os dados.
- enctype: como o formulário deve empacotar os dados.
- name: um nome para identificar o formulário no JS.
Ação de Formulário
URL do servidor que irá receber esses dados para processamento. Pode ser URL absoluta (https://SERVIDOR/novoCliente) ou apenas relativa se for o mesmo servidor (/novoCliente - preferível).
Método de Formulário
Define o método HTTP utilizado para enviar os dados. Os valores possíveis são GET e POST, sendo o POST o mais adequado.
Codificação de Formulário
Em geral, o formulário empacota os dados usando a codificação de URL (application/x-www-form-urlencoded). Essa maneira já converte caracteres diferentes antes de enviar.
Existe a opção multipart/form-data onde essa conversão não ocorre. Usamos essa opção quando há arquivos no formulário.
Campos de Formulário
O HTML5 apresentou vários novos campos a serem usados. Vamos ver primeiro os principais a serem utilizados. Praticamente todo campo no HTML é identificado pela tag input. Essa tag não possui tag de fechamento: <input name="nome" />
Os campos do HTML podem ser separados em:
- Coleta de texto (com exceção do tipo arquivo!).
- Coleta de opções.
- Botões de controle.
Os inputs possuem vários atributos, alguns que dependem do tipo inclusive. Vamos apresentar os mais importantes.
São dois atributos obrigatórios: name e type
- type: indica o tipo do atributo (ex: text ou checkbox)
- name: indica o nome do atributo que o conteúdo do input irá enviar. Por exemplo, no campo com nome primeiroNome, se digitarmos Yuri e enviarmos o formulário, o corpo da requisição vai como primeiroNome=Yuri.
Outras propriedades:
- value: indica um valor inicial ao campo, ou a uma seleção.
- readonly: indica que o campo está como leitura apenas.
- disabled: indica que o campo não pode ser usado/enviado.
- size: indica o tamanho do campo em caracteres (texto).
- maxlength: indica o limite de caracteres que o campo permite (texto).
- min e max: indica os valores máximo e mínimo do campo (número e data).
- multiple: indica que pode escolher mais de um (seleção).
- placeholder: coloca um texto explicativo dentro do campo.
- required: indica que o campo é obrigatório (validação).
Campo de Texto
Tipo padrão de campo, feito para coletar textos de uma única linha. Quando o input não declarar seu tipo, ele será um text.
Campo de Senha
Similar ao text, mas esconde o que está sendo digitado
Campo de Área de Texto
Essa tag define uma área de texto para ser escritas várias linhas de texto. Nesse caso, a tag possui abertura e fechamento.
Campo de Seleção de Opções
Essa tag define uma caixa de seleção para o usuário. As opções são escritas diretamente dentro do elemento. A tag possui abertura e fechamento: <select></select>
Dentro da tag vai a lista de opções que o usuário terá disponível. Cada opção tem que estar dentro da tag <option></option>. A tag option possui um atributo com o valor dela (value), caso seja diferente do texto da opção.
Caixa de Marcação de Opções
Ao invés de usar o select, o checkbox deixa todas as opções listadas na tela. O agrupamento de opções é feito pelo name dos inputs. O que é enviado para cada checkbox é o que estiver dentro da propriedade value.
Caso mais de um checkbox de um mesmo name seja selecionado, é enviado um vetor de valores para o servidor. O checkbox mesmo depois de selecionado pode ser “des-selecionado”.
Caixa de Marcação de Opção Única
Funciona de maneira similar ao checkbox, mostrando todas as opções, com a diferença de que apenas um pode ser selecionado (no mesmo grupo).
O agrupamento de opções é feito pelo name dos inputs. O que é enviado para cada radio é o que estiver dentro da propriedade value (padrão é on). O radio não pode ser “de-selecionado”.
Outros campos
Todos são variações do campo texto, inclusive quando o navegador não suportar o campo especificado, ele será renderizado como um campo texto comum.
Alguns desses novos campos são:
- email: campo texto que valida um e-mail.
- number: campo que aceita apenas números.
- url: campo texto que valida uma URL.
- datetime: campo que valida uma data com hora.
- color: campo texto que valida uma cor (hexadecimal).
Além da função semântica, esses novos campos também introduzem novos controles em navegadores com suporte (ex: datepicker ou colorpicker).
Etiquetas
É comum termos perto de cada campo um texto do seu significado (ex: a palavra E-Mail perto do campo de e-mail). Palavra soltas perto de campos não são automaticamente associados a eles, para que isso ocorra vamos usar a tag label.
Essa tag label serve apenas para conectar um texto de significado para um input qualquer (e apenas input). Para fazer essa conexão, usamos o atributo for do label ser igual ao atributo id do input.
Outro efeito do label associado a um campo é que ao clicar no label, ele passa o foco para o campo associado, facilitando a acessibilidade do seu site (principalmente para checkbox’s e radios).
Diferenças entre GET e POST
No formulário podemos usar tanto o método GET quanto o POST. Ambos vão enviar as mesmas informações ao servidor, que as entenderá de uma mesma maneira.
Como o GET colocar todos os dados coletados diretamente na URL, não é recomendado utilizar o GET quando essas informações são muito numerosas ou sensíveis (ex: senha).
O POST por sua vez, codifica a informação e coloca ela diretamente no corpo da requisição. Isso deixa um pouco mais segura a transmissão, além de não haver limite do tamanho da informação a ser transmitida.
Pontos principais
Atente para os tópicos a seguir. Eles devem ser estudados com muita atenção, pois representam os pontos mais importantes do capítulo.
-
O elemento form é o responsável por coletar e enviar as informações do usuário.
-
Existem diversos campos para coletar as mais diferentes informações do usuário.
-
O uso do método GET se torna inadequado para a coleta de informações, sendo recomendado o uso do POST.