Um formulário é um elemento em HTML porque é o que nos permite inserir dados e, portanto, interagir também com a web e seu banco de dados, o que requer controles do ponto de vista da segurança, pois de um formulário podemos enviar arquivos a um servidor, para processar um pedido ou pagamento, selecionando diferentes elementos e controles de um formulário, que será processado por um evento javascript ou por alguma outra linguagem de programação da web.
Muitas vezes, os desenvolvedores devem usar diferentes bibliotecas para poder realizar tarefas em formulários a fim de controlar eventos e em alguns casos devemos recorrer a alguns métodos de código indesejáveis para enviar dados, controlar o que é inserido, evitar injeções de código ou ataques XSS.
Se quisermos realizar todos esses controles e eventos, podemos encontrar um grande número de arquivos javascript que aumentam consideravelmente o peso da web em kb e tornam a página mais lenta. Também é inseguro porque se alguém desabilitar o uso de Javascript todos os controles irão parar de funcionar.
Os elementos de formulários e atributos em HTML5 fornecer um maior grau de controle e marcação semântica do que sua versão anterior, atributos e propriedades foram adicionados que eliminam a necessidade de realizar controles externamente por meio de scripts. Os recursos de formulários em HTML5 fornecem melhor controle e não dependem de o Javascript estar habilitado ou desabilitado em seu navegador.
Atributos de formulário HTML5 - espaço reservado
Por meio do propriedade placeholder Podemos indicar um exemplo do tipo de dado a ser cadastrado, o que nos permite fornecer informações ao usuário para servir de guia. Este texto que indicamos dentro do controle desaparecerá depois que o usuário inserir um caractere.
O atributo placeholder só pode ser usado em caixas de texto ou áreas de texto.
Padrões com expressões regulares em formulários
O atributo pattern nos permite definir nossas regras para validar os dados que o usuário insere usando expressões regulares. Uma expressão regular é uma sequência de caracteres que define um padrão de dados, por exemplo, o padrão [a-z] indica que o usuário só pode inserir letras minúsculas ou o padrão [0-9] indica que apenas números podem ser inseridos.
O HTML5 permite que você use padrões, portanto, se os caracteres inseridos não corresponderem ao padrão definido automaticamente, um erro será gerado.
Vamos a defina algumas regras com padrões e folhas de estilo alterar a cor da borda caso ocorra o evento inválido, ou seja, o que é inserido pelo usuário não está de acordo com o que está definido em um determinado padrão.
Criamos um arquivo Example01.html e escrevemos o seguinte código:
Padrões com Expressões Regulares
Do utilizador
Chave:
E-mail:
Encontro: Data
Preço
Se enviarmos o formulário, ele validará cada campo em relação ao padrão definido e se não for preenchido mostrará a mensagem que definimos na tag title, também utilizará os estilos definidos na regra e nas propriedades CSS da classe inválida que o HTML5 usa.
Por exemplo, inserimos um e-mail incorreto:
Também inserimos uma data incorreta e vemos que não permite o envio do formulário. Se quisermos melhorar ou adicionar um efeito visual, podemos usar CSS para adicionar um ícone de fundo no controle onde ocorre a falha. Por exemplo, adicionamos os seguintes estilos de css aos que já tínhamos, mudamos a entrada para input [type = 'text'] para que as folhas de estilo afetem apenas as caixas de texto e não o botão.
Usamos os seguintes ícones:
Ao lado de cada controle, adicionamos a propriedade necessária, por exemplo:
Ao executar o exemplo podemos ver que se enviarmos o formulário com os campos vazios, eles nos mostrarão os campos obrigatórios e válidos.
A vantagem dos padrões é que não usamos JQuery ou qualquer outro tipo de validação e se esta opção for desativada no navegador, as restrições e regras que definirmos continuarão a funcionar. Isso não significa que, ao enviar o formulário, evitemos controles no processamento dos dados, seja para salvá-los em um banco de dados, enviá-los por correio ou realizar qualquer operação.
Formulário com vários envios
Algo que era complexo de fazer é envie o mesmo formulário para duas páginas diferentesSuponhamos um único formulário de login que, ao clicar em um botão, irá para diferentes páginas onde as consultas e o processo de informação mudam. Isso é feito definindo o propriedade de formação, onde indicamos outra opção de processamento para a ação por padrão.
Formulário com vários envios
Do utilizador:
Chave:
Não há dúvidas de que a interação com esses tipos de propriedades e atributos facilita muito o desenvolvimento de sites, sem a necessidade de utilizar bibliotecas externas e complexos códigos javascript.
Como designers e desenvolvedores, geralmente achamos que um script tem uma certa monotonia para estruturar html e validar, especialmente para escrever regras de validação e então mostrar ao usuário quando há uma falha. O HTML 5 apresenta esses novos atributos, tipos de entrada e outros elementos para que tenhamos que escrever menos código e nos concentrar mais na semântica do que na sintaxe.
Essas regras funcionam em todos os navegadores, independente do sistema operacional e não precisamos usar outras bibliotecas ou hacks para nos adaptarmos a diferentes sistemas ou dispositivos. Vimos vários atributos de formulário que ajudam a melhorar a experiência do usuário e economizar tempo de desenvolvimento. Existem alguns atributos que ainda não funcionam em todos os navegadores.
