HTML5 traz todos os artigos que o Tutsup cria relacionado a nova maneira de utilizar a linguagem de marcação HTML, o HTML5 em si. Aprenda mais a respeito agora.

Sempre que publicamos formulários em qualquer tipo de site, nossa primeira preocupação é com a validação dos dados, tanto para front quanto back-end. Com a introdução do HTML5 e a grande adoção dos navegadores de ponta à nova tecnologia, atualmente está muito mais fácil trabalhar com formulários para desenvolvedores front-end.

Existem novos tipos de inputs e novos atributos nos formulários HTML5 voltados para a validação de dados. Além disso, o melhor da história é que você não vai precisar ficar bolando planos mirabolantes com JavaScript para não frustrar o usuário final. A validação será realizada pelo próprio HTML5, nativamente.

Vamos ver como isso funciona na prática.

O atributo required

Todos os formulários que criei até hoje, em todas as minhas aplicações, têm campos com preenchimento obrigatório. O atributo required está aqui para facilitar sua vida nesse sentido.

Ele simplesmente não envia o formulário se o usuário não preencher o campo.

Veja um exemplo:

<form action="" method="post">
  <p>Nome: <br> <input type="text" name="nome" required></p>
  <p>Sobrenome: <br> <input type="text" name="sobrenome" required></p>
  <p>Idade: <br> <input type="text" name="idade" required></p>
  <p><input type="submit" Value="Enviar"></p>
</form>

Como você pode ver, basta incluir o atributo "required" e pronto, o navegador fará sua tarefa.

required

Cada navegador trata a informação (Por favor, preencha este campo) à sua maneira, mas uma coisa é certa, o formulário não será enviado enquanto o campo não for preenchido.

Novos tipos de inputs

Se você já desenvolve a bastante tempo, sabe que o único tipo de input de texto que tínhamos era o "text" (texto). Porém, com HTML5, agora temos dezenas de novos tipos de inputs, como email, url, number, tel, color, date.

Por exemplo:

<form action="" method="post">
  <p>regexp: <br> <input type="text" name="regexp"pattern="[A-Z-a-z0-9]{10}" required></p>
  <p>email: <br> <input type="email" name="email" required></p>
  <p>url: <br> <input type="url" name="url" required ></p>
  <p>number: <br> <input type="number" name="number" required></p>
  <p>tel: <br> <input type="tel" name="tel" required></p>
  <p>date: <br> <input type="date" name="date" required></p>
  <p>datetime: <br> <input type="datetime" name="datetime" required></p>
  <p>datetime-local: <br> <input type="datetime-local" name="datetime-local" required></p>
  <p>month: <br> <input type="month" name="month" required></p>
  <p>week: <br> <input type="week" name="week" required></p>
  <p>color: <br> <input type="color" name="color" required></p>
  <p>time: <br> <input type="time" name="time" required></p>
  <p>search: <br> <input type="search" name="search" required></p>
  <p>range: <br> <input type="range" min="0" max="5" value="1" name="range" required></p>
  <p><input type="submit" Value="Enviar"></p>
</form>

Alguns desses tipos, como "date", por exemplo, ainda não são suportados por todos os navegadores.

Além disso, dependendo do tipo de input, seu estilo pode ficar um pouco diferente dos demais textos que conhecemos, veja um exemplo do formulário acima aqui.

novos inputs

Você pode ver como utilizar todos os tipos de inputs HTML5 aqui.

Placeholder

Outro ponto que sempre utilizei a minha vida toda como desenvolvedor, foi um texto que fica dentro do input indicando o que o usuário deve digitar (Isso se chama placeholder), por exemplo:

<p>email: <br> <input type="email" placeholder="digite seu email" name="email" required></p>

Uma mensagem de texto aparece dentro do input antes que o usuário comece a digitar.

placeholder

Quando ele digita qualquer coisa, o texto desaparece, dando lugar ao que ele está digitando.

Não se esqueça do back-end

Normalmente, foco mais na validação utilizando PHP, ou qualquer outra linguagem de back-end, pois, é lá que os dados precisam ser tratados. A utilização de HTML5 (ou JavaScript, como antigamente), é simplesmente para que o seu usuário final tenha uma experiência legal com seu site, com mensagens, cores e tudo indicando o que ele deve fazer.

Por este motivo, nunca trate apenas do estilo e das coisas que você vê. Além de tratar os valores no front-end com qualquer ferramenta, nunca se esqueça de validar os dados que vão para o servidor também.

E o CSS?

Para estilizar os inputs com determinados atributos, basta fazer o seguinte:

required

Para o atributo required, basta adicionar a pseudo classe :required, veja:

input:required{
  border:1px solid blue;
}

required inválido

Se o campo for enviado e estiver inválido, utilize as pseudo classes :invalid ou :valid, veja:

input:required:invalid, input:focus:invalid { 
  background: red;
}
input:required:valid { 
  background: blue;
}

Claro que você vai escolher um estilo adequado, já que meu exemplo acima é extremamente horrível.

Placeholder

Já criamos um tutorial bem detalhado como estilizar placeholders aqui no tutsup. Veja em:

Concluindo

Claro que não cobri tudo o que você pode saber sobre os formulários HTML5, porém, na maioria das vezes, é o que eu utilizo em minhas próprias aplicações.

Conforme descrevi ao longo do artigo, a preocupação maior é com o back-end (PHP, por exemplo), o front-end (HTML5, por exemplo) é para melhorar a experiência do usuário final.

Saiba mais no site da W3C.

Algo a declarar?

Estilizar placeholder de inputs é relativamente simples, porém, existem alguns truques que devem ser seguidos para que a solução funcione corretamente em todos os navegadores.

Primeiramente, vamos falar da maravilha que o placeholder faz quando tratamos de formulários e inputs.

Provavelmente você deve se lembrar de ter visto dicas que ficam dentro dos inputs como texto, e, assim que você começa a digitar, o texto simplesmente desaparece, dando lugar ao conteúdo requerido por tal input.

Por exemplo, se tentarmos acessar o site outlook.com da Microsoft sem ter feito login, veja como os campos e-mail e senha aparecem:

Input do site Outlook.com

E se eu digitar meu e-mail e senha, aquele texto de exemplo simplesmente desaparece:

Input do site Outlook.com Preenchido

Antigamente, tínhamos que escrever algumas linhas de código Javascript (um tanto confusas) para que isso funcionasse perfeitamente. Atualmente, isso pode ser feito com um simples atributo, o placeholder.

<input type="email" class="input-class" placeholder="Digite seu e-mail" required>

Perceba o atributo placeholder, que exibe o texto "Digite seu e-mail". Ele faz a mesma coisa que o exemplo anterior, simplesmente desaparece quando o usuário começa a digitar o texto.

O problema é: "Como estilizar placeholder de inputs?".

A solução é simples, veja:

/* Chrome, Safari, Opera */
::-webkit-input-placeholder {}

/* Firefox 18- */
:-moz-placeholder {}

/* Firefox 19+ */
::-moz-placeholder {}

/* IE10+ */
:-ms-input-placeholder {}

Infelizmente temos que utilizar os prefixos dos navegadores, e pior, não da para agrupar em uma única regra, pois, se um navegador não reconhecer uma das regras, ele vai pular todo o trecho de código.

Veja um exemplo real.

O HTML

<input type="text" class="input-class" placeholder="Name" required>
<input type="text" class="input-class" placeholder="Surname" required>
<input type="email" class="input-class" placeholder="Email" required>
<input type="text" class="input-class" placeholder="Phone" required>

O CSS

.input-class {
  padding: 5px;
  text-transform: uppercase;
  width: 150px;
  border: 1px solid #6db5f1;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  margin: 10px auto;
  display: block;
}

.input-class:focus {
  box-shadow: 0 0 5px #6db5f1;
  width: 250px;
}

.input-class::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: #6db5f1;
  font-style: italic;
}

.input-class:-moz-placeholder { /* Firefox 18- */
  color: #6db5f1;
  font-style: italic;
  opacity: 1;
}

.input-class::-moz-placeholder {  /* Firefox 19+ */
  color: #6db5f1;
  font-style: italic;
  opacity: 1;
}

.input-class:-ms-input-placeholder { /* IE10+ */ 
  color: #6db5f1;
  font-style: italic; 
}

O exemplo acima deverá retornar o mesmo que o Codepen abaixo:

Codepen1

Veja também que para o Firefox, precisamos configurar a opacidade para 1, pois, caso não faça isso, a cor que você escolher vai ficar um pouco mais apagada.

opacity: 1;

Espero ter sido útil.

Com dúvidas sobre como criar seus sites com a nova estrutura HTML5? Não se preocupe, vamos falar exatamente sobre isso. Além da estrutura, também vou passar um método para a criação de microdata (schema.org), o que vai melhorar a pontuação de SEO do seu site.

Então vamos lá.

Estrutura HTML5

Antigamente, quando íamos criar nossos templates HTML, fazíamos algo parecido com o trecho abaixo:

<body>
	<div class="main">
		<div class="header"></div>
		<div class="menu"></div>
		<div class="article"></div>
		<div class="sidebar"></div>
		<div class="footer"></div>
	</div>
</body>

Ou seja, uma série de DIVs, uns dentro dos outros, que são diferenciados por classes ou IDs.

Atualmente já temos tags com nomes corretos para cada uma das áreas, veja o mesmo exemplo acima em HTML5.

<body>
	<main role="main">
		<header class="header"></header>
		<nav class="menu"></nav>
		<article class="article"></article>
		<aside class="sidebar"></aside>
		<footer class="footer"></footer>
	</main>
</body>

Isso melhora drasticamente a semântica do nosso HTML.

Mas vamos entender melhor o que cada classe faz.

  • <main> – Essa é a tag principal do seu site, ou seja, deve ser utilizada apenas uma vez apontando para o conteúdo principal da página. Nada que repete em todas as páginas do site deve ser incluído nessa tag, como logos, nome do site, navegação e coisas do tipo. Em um blog, essa tag representaria o conteúdo do artigo principal, que é diferente para cada página.
  • <header> – Essa tag pode ser apresentada como um cabeçalho sozinho, ou para um cabeçalho de outra tag, como section e/ou article. Você pode ter quantos cabeçalhos preferir dentro do seu documento, e deve utilizar as tags de heading (de H1 até H6) dentro da mesma.
  • <nav> – Essa tag representa um grupo de links de navegação (geralmente menus).
  • <aside> – Essa tag pode ser um conteúdo relacionado ao artigo (quando dentro da tag article), ou conteúdo que não é relacionado ao artigo, como barras laterais, anúncios e coisas do tipo (quando fora da tag article).
  • <article> – Essa tag representa um artigo, um texto, um post de um blog, um post em um fórum e coisas do tipo. Dentro dela é necessário ter um cabeçalho (<header>) e as tags de heading (H1 até H6). Você pode aninhar tags article, o que seria algo como um texto dentro do artigo.
  • <time> – Representa uma data. O atributo "datetime" deve indicar uma data no padrão correto.
  • <footer> – Essa tag representa o rodapé de um artigo, ou do site como um todo. Você pode utilizar quantos rodapés preferir dentro da estrutura HTML5.
  • <section> – Essa tag serve para agrupar conteúdo do mesmo tipo (parecida com <div>). Você pode ter quantas sessões quiser na sua estrutura HTML5. Ela deve receber um cabeçalho e tags de H1 – H2.

Mas como isso funciona na prática? Vamos ver.

Estrutura HTML5 com Microdata pronta

Veja um exemplo de um blog em HTML5:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<link rel="stylesheet" href="css/style.css">
		
		<script src="js/html5.js"></script>

		<title>Estrutura HTML5 - Tutsup</title>
	</head>
	<body>
		<!-- Header principal -->
		<header>
			<h1>Precisa existir um h1 aqui.</h1>
			<p>Conteúdo (Opcional)</p>
		</header>
		
		<!-- Menu -->
		<nav>
			<ul>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
			</ul>
		</nav>
		
		<!-- Barra lateral -->
		<aside class="sidebar">
			<h2>Sidebar (Opcional)</h2>
			<p>Conteúdo da Sidebar</p>
		</aside>
		
		<!-- Parte principal do site -->
		<main role="main">
			<!-- Artigo -->
			<article role="article" itemscope itemtype="http://schema.org/BlogPosting">
				<header>
					<h2 itemprop="headline">
						<a href="#" itemprop="url">
							Título do artigo
						</a>
					</h2>
				</header>
				
				<!-- Data da publicação -->
				<time itemprop="datePublished" datetime="2014-07-14">Segunda-feira, 14 de Julho de 2014</time>
				
				<!-- Imagem em destaque (Opcional) -->
				<img src="exemplo.jpg" alt="Nome da imagem" itemprop="image" />
				
				<!-- Descrição (Opcional) -->
				<div itemprop="description">Descrição do artigo.</div>
				
				<!-- Texto HTML do artigo -->
				<div class="post" itemprop="articleBody">O HTML do artigo vem aqui.</div>
				
				<!-- Sessão do autor -->
				<footer itemprop="author" itemscope itemtype="http://schema.org/Person">
					<h3 itemprop="name">Nome do autor</h3>
					<p itemprop="description">Biografia do autor.</p>
				</footer>
			</article> <!-- Fim do primeiro artigo -->
		</main>
		
		<!-- Barra lateral -->
		<aside class="sidebar">
			<h2>Outra Sidebar (Opcional)</h2>
			<p>Conteúdo da Sidebar</p>
		</aside>
		
		<!-- Conteúdo do rodapé -->
		<footer>
			Conteúdo do rodapé vem aqui
		</footer>
	</body>
</html>

No exemplo acima, teríamos um cabeçalho, um menu, uma barra lateral, um artigo principal, outra barra lateral, e um rodapé. Veja na imagem abaixo o exemplo:

  Exemplo de estrutura HTML5

Perceba que já incluí os dados de microdata para um blog (https://schema.org/BlogPosting), você pode alterar como preferir, porém, mantenha a estrutura.

Além disso, evite utilizar mais de um <h1> por página, isso pode atrapalhar os mecanismos de pesquisa a entender qual é o título principal da página.

Download da estrutura HTML5 acima

Se você quiser baixar o exemplo acima, já com CSS, o script HTML5 Shiv v3.7.0 para que as tags HTML5 funcionem nos navegadores mais antigos, e microdata, utilize o link abaixo:

Qualquer dúvida é só falar.