Atualize Seus Formulários com Validação Via CSS3 e HTML5

Portuguese (Português) translation by Hugo Carlos Borges Pinto (you can also view the original English article)

Vamos ver como criar um formulário funcional que valida os dados do usuário, no lado do cliente. Com isso feito, vamos cobrir embelezamento do formulário usando CSS, inclusive CSS3!

Passo 1: Conceitualização de Funcionalidade

Primeiro nós queremos conceituar como nosso formulário vai se parecer e como ele vai funcinoar. Para este exemplo, vamos criar um formulário de contato simples que pede as seguintes informações ao usuário:

Nome
Email
Website
Mensagem

Nós queremos nos assegurar que o usuário está digitando as informações corretamente. Para alcançar isto, nós vamos usar as novas técnicas de validação do HTML5 do lado do cliente. E os usuários que não possuiem HTML5? Você pode usar simplesmente uma validação no lado do servidor, mas isso está além do escopo deste artigo.

Passo 2: Conceituação do Formulário

Vamos ter uma idéia de como nós queremos que nosso formulário se pareça criando um mockup.

Como você pode ver, os seguintes elementos integram nosso formulário:

Título do Formulário Notificação de Campos Obrigatórios
Nomes do Formulário
Dados do Formulário Texto Temporário
Dicas de Campos do Formulário
Botão de Enviar

Agora que especificamos quais elementos compõe nosso formulário, nós podemos criar a marcação HTML.

Passo 3: Código HTML Básico

Vamos criar nossa marcação HTML básica do conceito de formulário que criamos.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 Contact Form</title>
	<link rel="stylesheet" media="screen" href="styles.css" >
</head>
<body>
</body>
</html>

Até este ponto, nosso arquivo HTML ainda vai aparecer em branco no navegador. Este é simplesmente o código básico para uma página HTML5.

Passo 4: Formulário HTML

Vamos criar o formulário HTML (nós vamos deixar o método de ação em branco por enquanto, já que a validação do lado do servidor não será incluída neste tutorial):

1	<form class="contact_form" action="" method="post" name="contact_form">
2	</form>

Passo 5: Elementos do Formulário HTML

Para manter o conteúdo de nosso formulário organizado e estruturado, nós vamos envolver nossos elementos de formulário (label, input, etc) em uma lista. Então vamos começar criando o cabeçalho e o primeiro elemento de entrada do formulário:

<ul>
    <li>
         <h2>Contact Us</h2>
         <span class="required_notification">* Denota campo obrigatório</span>
    </li>
    <li>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </li>
</ul>

Dicas de Formulário

Como vimos no nosso mockup, nós vamos ter dicas de formatação para os campos "email" e "website". Então, nós vamos adicionar nossas dicas dentro do campo input onde necessário, e dar a eles uma classe para que nós possamos estilizar depois.

<li>
	<label for="email">Email:</label>
	<input type="text" name="email" />
	<span class="form_hint">Proper format "name@something.com"</span>
</li>

Elementos de `Input` Restantes

Vamos seguir em frente e criar nossos elementos de formulários restantes, lembrando de envolver cada seção em um item list.

<li>
	<label for="website">Website:</label>
	<input type="text" name="website" />
	<span class="form_hint">Proper format "https://someaddress.com"</span>
</li>
<li>
	<label for="message">Message:</label>
	<textarea name="message" cols="40" rows="6" >
</li>
<li>
	<button class="submit" type="submit">Submit Form</button>
</li>

Passo 6: Adicionando o Atributo Temporário

Um dos primeiros melhoramentos que o HTML5 traz para formulários na web (um com o qual você provavelmente já está acostumado) é a habilidade de determinar textos temporários. Textos temporários são mostrados quando o campo de entrada está ou vazio ou fora de foco.

Vamos adicionar um atributo placeholder no nosso elemento input. Isso vai ajudar o usuário a entender o que eles devem digitar em cada campo.

<input type="text" name="name" placeholder="John Doe" />

<input type="text" name="email" placeholder="john_doe@example.com" />

<input type="text" name="website" placeholder="http://johndoe.com/" required/>

Dica Rápida: Estilize seu Texto `placeholder`

Aqui vai uma dica rápida, se você quer estilizar seu texto temporário, existem alguns prefixos de navegadores para lhe ajudar:

:-moz-placeholder {
	color: blue;
}

::-webkit-input-placeholder {
	color: blue;
}

Suporte para o atributo placeholder está bem estabelecido em navegadores modernos (exceto o IE9, desculpe). Se você realmente precisa ter esse suporte em todos os nvageadores, existem algumas soluções JavaScript que você deve conferir.

Passo 7: CSS Básico

Vamos adicionar um CSS básico para dar ao nosso formulário alguma estrutura. Eu vou lhes guiar pelas regras:

Remova o Estilo `:focus`

O Webkit adiciona automaticamente alguns estilos em elementos de entrada quando eles estão em foco. Como nós vamos adicionar nossos próprios estilos, nós queremos sobrescrever esses padrões:

1	*:focus {outline: none;}

Estilo de Tipografia

Vamos adicionar alguns estilos tipográficos aos nossos elementos de formulário:

body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}

.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}

.form_hint, .required_notification {font-size: 11px;}

Estilos de Lista

Vamos estilizar nossos elementos de lista para dar ao nosso formulário alguma estrutura:

.contact_form ul {
    width:750px;
    list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;
}
.contact_form li{
	padding:12px; 
	border-bottom:1px solid #eee;
	position:relative;
}

Também, vamos adicionar uma leve borda no topo e fundo da seção do formulário. Nós podemos conseguir isso utilizando os seletores :first-child e :last-child. Eles selecionam, como o nome indica, o primeiro e último elementos na lista <ul>.

Isso adiciona algumas seções visuais úteis ao nosso formulário. Tenha em mente que esses seletores CSS não são suportados em navegadores antigos. Como isto não é uma funcionalidade vital, nós vamos recompensar aqueles que usam navegadores modernos.

1	.contact_form li:first-child, .contact_form li:last-child {
2	border-bottom:1px solid #777;
3	}

Cabeçalho do Formulário

Vamos estilizar a seção do cabeçalho do nosso formulário. Isso inclue a tag heading e a notificação que informa ao usuário que o asterisco (*) indica um campo requerido.

.contact_form h2 {
	margin:0;
	display: inline;
}
.required_notification {
	color:#d45252; 
	margin:5px 0 0 0; 
	display:inline;
	float:right;
}

Elementos de Entrada do Formulário

Vamos estilizar todos os nossos elementos principais do formulário, aqueles utilizados para coletar informações do usuário.

.contact_form label {
	width:150px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
}
.contact_form input {
	height:20px; 
	width:220px; 
	padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

Agora, vamos adicionar alguns estilos CSS extras. Alguns desses são estilos CSS3 que recompensam usuários que usam navegadores modernos.

.contact_form input, .contact_form textarea { 
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
	background: #fff; 
	border:1px solid #555; 
	box-shadow: 0 0 3px #aaa; 
}
/* Button Style */
button.submit {
	background-color: #68b12f;
	background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
	background: -webkit-linear-gradient(top, #68b12f, #50911e);
	background: -moz-linear-gradient(top, #68b12f, #50911e);
	background: -ms-linear-gradient(top, #68b12f, #50911e);
	background: -o-linear-gradient(top, #68b12f, #50911e);
	background: linear-gradient(top, #68b12f, #50911e);
	border: 1px solid #509111;
	border-bottom: 1px solid #5b992b;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #9fd574;
	-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
	-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
	-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
	-o-box-shadow: 0 1px 0 0 #9fd574 inset;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
	opacity:.85;
	cursor: pointer; 
}
button.submit:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
	-moz-box-shadow: 0 0 10px 5px #356b0b inset;
	-ms-box-shadow: 0 0 10px 5px #356b0b inset;
	-o-box-shadow: 0 0 10px 5px #356b0b inset;
	
}

Passo 8: Adicionando um Pouco de Interatividade com CSS3

Vamos adicionar um pouco de interatividade. Nós vamos fazer com que o campo que esteja selecionado seja expandido adicionando algum padding.

1	.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
2	padding-right:70px;
3	}

Agora, para navegadores que suportam, vamos fazer a expansão do campo com uma transição suave usanod CSS3.

.contact_form input, .contact_form textarea { /* add this to the already existing style */
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s;
	transition: padding .25s;
}

Passo 9: O Atributo `required` no HTML5

Agora é a hora que todos estávamos esperando: ferramentas de manipulação de formulário do HTML5.

Adicionando o atributo required a qualquer elemento input/textarea vai dizer ao navegador que o valor é requerido antes que o formulário possa ser enviado. Então, um formulário não pode ser enviado se um campo required não foi preenchido.

Vamos em frente adicionar o atributo required a todos os nossos elementos de formulário (porque queremos que todos eles sejam preenchidos).

1	<input type="text" name="name" required />
2	<input type="text" name="email" required />
3	<input type="text" name="website" required />
4	<textarea name="message" cols="40" rows="6" required ></textarea>

Passo 10: Estilizando Campos `required`

Você provavelmente vai notar que, falando visualmente, nada aconteceu ao adicionar o atributo required. Nós vamos estilizar os atributos obrigatórios usando CSS. Para este exemplo, nós vamos adicionar um asterisco vermelho como uma imagem de fundo em cada campo requerido. Para alcançar isto, vamos primeiro adicionar um pouco de padding no lado direito do nosso input onde a imagem de fundo vai estar (isso vai prevenir que o texto seja sobreposto se a entrada do campo é uma frase longa):

1	.contact_form input, .contact_form textarea {
2	padding-right:30px;
3	}

Agora nós vamos usar o pseudo seletor CSS :required para selecionar todos os elementos de formulário com este atributo. Eu fiz um asterisco simples de 16x16 pixels no Photoshop que vai servir como um indicador visual de um campo requerido.

1	input:required, textarea:required {
2	background: #fff url(images/red_asterisk.png) no-repeat 98% center;
3	}

O que acontece quando o formulário é enviado?

Neste momento, navegadores diferentes fazem coisas diferentes quando um forumlário utilizando elementos HTML5 é enviado. Quando o formulário é enviado, a maioria dos navegadores vai evitar que o formulário seja enviado e vai mostrar uma "dica" para o usuário, fazendo com que o primeiro campo requerido e que esteja em branco seja marcado. Estilo visual e suporte para estes 'campos bolha' é bastante amplo. Tomara que estes comportamentos sejam padronizados no futuro.

Você pode conferir o suporte atual de navegadores ao atributo required no quirksmode.

Dica Rápida:

Você pode estilizar a mensagem em bolha um pouco no Webkit usando o seguinte:

1	::-webkit-validation-bubble-message {
2	padding: 1em;
3	}

Passo 11: Entendendo os Novos Atributos `type` do HTML5 e Validação no Lado do Cliente

Validação HTML5 funciona de acordo com o atributo type que é determinado dentro de um campo de formulário. Por anos o HTML somente suportou alguns tipos de atributos type, como type="text" mas com o HTML5 existem diversos novos tipos de entrada, incluindo email e url que nós vamos usar em nosso formulário.

Combinando nosso atributo type de entrada com o novo atributo required, o navegador pode agora validar as informações do formulário no lado do cliente. Se um navegador de usuário não suporta os novos tipos do atributo type, ele simplesmente vai recair para o padrão type="text". Isto na verdade é sensacional. Você essencialmente tem compatibilidade retroativa com todos os navegadores da Terra!

E se o navegador suporta os novos atributos type? Para navegadores de desktop não existem diferenças visuais (a não ser que seja especificado por regras customizadas de CSS). Um campo type="text" parece o mesmo que um campo type="email". Entretanto, para navegadores de dispositivos móveis, há uma diferença na interface do usuário.

Um Exemplo: O iPhone

O iPhone da Apple detecta os tipos de formulário e dinamicamente muda o teclado na tela disponibilizando caracteres relativos ao contexto. Por exemplo, todos os campos de email requerem os seguintes símbolos: "@" e ".". Então o iPhone mostra esses caracteres quando o tipo de entrada é especificado para email.

Passo 12: Alterando os Atributos `type`

Nossos campos de formulário já estão com o padrão type="text". Mas agora nós queremos mudar o tipo do atributo para nosso email e website para corresponder ao tipo previsto no HTML5.

1	<input type="email" name="email" placeholder="john_doe@example.com" required />
2	<input type="url" name="website" placeholder="http://johndoe.com" required/>

Passo 13: Validação HTML5

Como mencionado antes, a validação HTML5 é baseada no atributo type e é ativada por padrão. Não há necessidade de markup específico para ativar a validação. Se você deseja desligar a validação, você pode usar o atributo novalidate desta maneira:

1	<form novalidate>
2	<-- do not validate this form -->
3	<input type="text" />
4	</form>

Campo de Nome

Vamos olhar para nosso primeiro campo que pede o nome do usuário. Como descrito anteriormente, nós adicionamos o atributo type="text" e o atributo required. Isto informa ao navegador que este campo é obrigatório e que ele deve validar o campo como texto apenas. Enquanto o usuário digitar ao menos um caractere no campo, ele sará validado.

Agora nós vamos criar nosso próprio CSS para estilizar os campos de entrada que são considerados válidos e inválidos pelo navegador. Se você lembrar, nós usamos o :required no nosso CSS para estilizar os elementos de entrada com um atributo required. Agora, nós podemos estilizar nossos campos obrigatórios que são ou válidos ou inválidos adicionando :valid ou :invalid à nossa regra CSS.

Primeiro, vamos estilizar os campos que são inválidos. Para este exemplo, nós apenas queremos estilizar o formulário como inválido quando está em foco. Nós vamos adicionar uma borda vermelha, sombra vermelha e um ícone vermelho criado no Photoshop para indicar o campo inválido.

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
	background: #fff url(images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535
}

Agora, vamos criar as regras que indicam que o campo é válido. Nós vamos adicionar uma borda verde, uma sombra verde e um ícone verde de concluído criado no Photoshop. Isso vai ser aplicado a todos os campos válidos estejam eles em foco ou não.

.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
	background: #fff url(images/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}

Agora quando você foca em um campo do formulário, o estilo vermelho de inválido é mostrado. Assim que um único caractere foi digitado no campo, ele é validado e o estilo CSS muda para indicar o fato.

Campos de Email e URL

Nossos estilos CSS e regras de validação já são aplicadas ao campo de email porque nós determinamos os atributos type e required anteriormente.

Passo 14: Introduzindo o Atributo HTML5 `pattern`

Utilizando o atributo type="email" como exemplo, parece que a maioria dos navegadores valida aquele campo como *@* (qualquer caractere + o símbolo "@" + qualquer caractere). Isto obviamente não é muito limitante mas evita que os usuários digitem espaços ou valores que são totalmente incorretos.

No exemplo do atributo type="url", parece que o mínimo requerido para a maioria dos navegadores é qualquer caractere seguido de dois pontos. Então, se você digitar "h:" então o campo será validado. Isto não é muito útil mas evita que usuários digitem informações irrelevantes, como email ou endereço residencial. Agora, você pode ser mais específico com os valores de entrada na validação no lado do servidor; entretando, nós vamos ver como fazer isto no HTML5.

O Atributo `pattern`

O atributo pattern aceita uma expressão regular em JavaScript. Esta expressão é utilizada no lugar da expressão padrão do navegador para validar o valor do campo. Então, nosso HTML agora está assim:

1	<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http\|https)://.+" />

Agora nosso campo vai aceitar apenas valores que comecem com "http://" ou "https://" e um caractere adicional. Estas expressões regulares podem parecer confusas a princípio, mas uma vez que você dedica tempo para aprendê-las, seus formulários vão se abrir para um novo mundo.

Passo 15: Dicas em Campos do Formulário (CSS)

Agora vamos estilizar as dicas que informam ao usuário o formato que eles devem usar ao entrar as informações.

.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
}

Nós colocamos display:none porque nós estamos apenas mostrando as dicas quando o usuário focar no campo de entrada. Nós também colocamos nossas tooltips para ficar com a cor vermelha padrão para entrada inválida, porque elas sempre serão consideradas inválidas até a informação correta ser digitada.

Utilizando o Seletor `::before`

Agora nós vamos adicionar um pequeno triângulo às nossa caixas de dicas que ajudam a direcionar e guiar os olhos. Isso pode ser feito utilizando-se imagens, mas no nosso caso nós vamos fazer isto utilizando puramente CSS.

Por ser um elemento puramente de apresentação que não é vital para a funcionalidade da página, nós vamos adicionar um pequeno triângulo que aponta para a esquerda usando o pseudo seletor ::before. Nós podemos fazer isso utilizando uma das formas geométricas UNICODE.

Normalmente nós utilizaríamos o formato HTML Unicode para mostrar estas formas no nosso HTML (como mostrado na imagem acima). Contudo, porque nós vamos utilizar o seletor CSS ::before, nós temos que usar o código correspondente ao triângulo devidamente escapado quando usamos a regra content:"". Então nós apenas utilizamos posicionamento para colocá-lo onde queremos.

.form_hint::before {
	content: "\25C0"; /* left point triangle in escaped unicode */
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}

Usando o Seletor Adjacente `+`

Finalmente, nós vamos utilizar o seletor adjacente do CSS para mostrar e esconder as dicas de campos de formulário. O seletor adjacente (x + y) seleciona o elemento que é imediatamente precedido pelo primeiro elemento. Como nossas dicas vem logo após os campos de entrada no nosso HTML, nós podemos utilizar este seletor para mostrar/esconder as dicas.

.contact_form input:focus + .form_hint {display: inline;}

.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */

.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

Como você pode ver pelo CSS, nós também colocamos as dicas para mudar de cor de acordo com a borda do campo de entrada de acordo com a validade/invalidade dos valores inseridos.

Passo 16: Relaxe e Admire Seu Lindo Formulário HTML5

Vá em frente e dê uma olhada no seu produto final!

Conclusão

Como você pode ver, as novas ferramentas de formulário do HTML5 são bem interessantes! Tudo é compatível retroativamente então incorporar essas ferramentas no seu website não vai quebrar nada.

Validação via HTML5 está chegando próximo de substituir validação no lado do cliente ao ajudar usuários a preencher os formulários corretamente. Contudo, a validação HTML5 ainda não substitui plenamente a validação no lado do servidor. Por enquanto, é melhor utilizar ambos os métodos ao lidar informação submetida pelo usuário. Obrigado por ler!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!