Bom vamos lá com mais um pouquinho de HTML5, nesse pequeno post pretendo demonstrar através de um simples formulário de contato algumas das facilidades que o HTML5 proporciona ao desenvolvedor, é óbvio que coisas muito mais interessantes estão por vir, algumas já estão aí, mas não funcionam corretamente na maioria dos browsers e suas diversas versões.
Um dos principais objetivos do HTML5 é facilitar o desenvolvimento, disponibilizar mais recursos e evitar a necessidade de inserção de scripts e códigos avulsos.
Para uma pequena demonstração vou utilizar um simples formulário de contato (muito utilizado em websites) contendo os campos: Nome, E-mail e Comentário. Para esse caso todos os campos são de preenchimento obrigatório e o campo e-mail precisa ter um sintaxe válida.
A validação de todos esses campos inclusive o campo e-mail será feita utilizando HTML5, os mais saudosistas podem até sentir falta da validação com Javascript, PHP, etc (sic). Mas o fato é que com HTML5 setando apenas algumas propriedades dos inputs, tudo isso se resolve, otimizando em muito o desenvolvimento.
Um dos principais objetivos do HTML5 é facilitar o desenvolvimento, disponibilizar mais recursos e evitar a necessidade de inserção de scripts e códigos avulsos.
Para uma pequena demonstração vou utilizar um simples formulário de contato (muito utilizado em websites) contendo os campos: Nome, E-mail e Comentário. Para esse caso todos os campos são de preenchimento obrigatório e o campo e-mail precisa ter um sintaxe válida.
A validação de todos esses campos inclusive o campo e-mail será feita utilizando HTML5, os mais saudosistas podem até sentir falta da validação com Javascript, PHP, etc (sic). Mas o fato é que com HTML5 setando apenas algumas propriedades dos inputs, tudo isso se resolve, otimizando em muito o desenvolvimento.
Let's Code
Bom em primeiro lugar vamos definir a nossa página como HTML5, utilizando a notação a seguir:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Contato HTML5-Validações Exemplo</title>
</head>
Com a notação acima definimos a página como HTML5 : <!DOCTYPE HTML>
Definimos a linguagem que será utilizada : <html lang="pt-br">
E também a codificação de caracteres do documento: <meta charset="UTF-8">
Com isso já temos o suficiente para que nossa página possa ser executada com HTML5, no idioma e codificação de caracteres da nossa vontade.
Para definirmos os campos como obrigatórios basta definir a propriedade dos inputs required para true :
required = "true"
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Contato HTML5-Validações Exemplo</title>
</head>
Com a notação acima definimos a página como HTML5 : <!DOCTYPE HTML>
Definimos a linguagem que será utilizada : <html lang="pt-br">
E também a codificação de caracteres do documento: <meta charset="UTF-8">
Com isso já temos o suficiente para que nossa página possa ser executada com HTML5, no idioma e codificação de caracteres da nossa vontade.
Para definirmos os campos como obrigatórios basta definir a propriedade dos inputs required para true :
required = "true"
Isso já é suficiente para tornar os campos de preenchimento obrigatório. Lembrando que com HTML5 a propriedade maxlenght também está disponível para os campos do tipo textarea.
Para a validação do campo e-mail a única mudança é em relação a definição do type do nosso input, com essa mudança o HTML5, já fará o trabalho de validação , ou seja, já sabe que ali é requerido um campo que contenha um endereço de e-mail válido ao menos quanto a sintaxe.
type = "email"
Para a validação do campo e-mail a única mudança é em relação a definição do type do nosso input, com essa mudança o HTML5, já fará o trabalho de validação , ou seja, já sabe que ali é requerido um campo que contenha um endereço de e-mail válido ao menos quanto a sintaxe.
type = "email"
Lembrando que cada navegador exibirá uma mensagem personalizada para a validação dos campos, essa mensagem também será exibida de acordo com o idioma utilizado no navegador que estiver acessando o formulário:
Essas validações foram testadas nos navegadores Chrome, Mozilla Firefox, IE 9. Existem outros tipos de input como: date, datetime, number, search que facilitarão em muito o desenvolvimento, mas que ainda não são suportados por todos os navegadores. (Veja mais em: http://www.w3schools.com/html/html5_form_input_types.asp).
Segue abaixo o arquivo com o código para download:
Segue abaixo o arquivo com o código para download:
contato.html |
Bom é isso aí, um exemplo simples e prático, mas que pode facilitar em muito o dia a dia do desenvolvedor. Feito isso é só utilizar sua linguagem preferida para fazer o envio dos dados. Até a próxima.
Hands On!
Daniel Paulo de Assis
Hands On!
Daniel Paulo de Assis