O atributo autofocus é um atributo booleano, ou seja, pode ou não ser definido em um elemento. É usado em campos de formulários. Especifica que um elemento deve receber automaticamente o foco quando a página é carrega. Permitindo que o usuário comece digitar sem ter que manualmente dar o foco (clicar) no elemento.

Os elementos que podem receber esse atributo são: button, input, keygen, select e textarea. Não deve haver mais de um elemento no documento com o atributo autofocus especificado.

Se você ainda não entende o que é isso, por favor, vá até o Google e perceba que ao entrar na página o campo de busca já recebe o foco. Você digita o termo da busca de pesquisa sem primeiro clicar no campo input. Definir o foco para caixa de texto automaticamente é sem dúvida um acréscimo a usabilidade do site.

Há outras maneira de aplicar o foco automático em um campo de formulário, com JavaScript, jQuery, por exemplo.

No exemplo a seguir, o elemento input será focado assim que a página seja carregada.

<input maxlength="255" name="busca" value="" autofocus>
<input type="submit" value="Pesquisar">

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Nenhum post relacionado

Veja 10 inspiradores exemplos de logos com CSS3. Os recursos de sombras, transparência, bordas arredondadas, fundos múltiplos são explorados ao máximo. Olhando os gráficos abaixo você poderia afirmar que foram feitos com algum programa gráfico tipo o Photoshop, mas não, os gráficos foram completamente desenhados usando os propriedades CSS3.

Criar gráficos usando CSS3 funciona bem, porém quando você precisa fazer modificações, especialmente quando você precisa alterar o redimensionamento do desenho, a tarefa fica mais complexa. Outra dificuldade também encontrada é o suporte dos navegadores para propriedades CSS3, a tecnologia ainda não é totalmente suportada por alguns navegadores, principalmente o Internet Explorer. Mas sem dúvida CSS3 é uma tecnologia promissora no mundo do Web Design.

1. Logo Volkswagen

2. Logo HTML5

3. Logo Opera

4. Logo Internet Explorer

5. Logo Google Chrome

6. Logo do Windows

7. Logo Arari

8. Logo McDonalds

9. Logo Magento

10. Logo da Apple

Isso vai interessar você também

• Nenhum post relacionado

Neste artigo apresento 6 maneiras simples de melhorar a usabilidade na web. Felizmente, você pode fazer muitas coisas para melhorar a legibilidade do seu site, aqui estão algumas diretrizes de legibilidade que acho relevante para qualquer web site. A maioria das dicas são bem simples que você pode implementar de imediato no seu site.

Desenvolver um site legível implica consequentemente em uma usabilidade melhorada e uma agradável experiência de leitura para os usuários. Acredito que todos nós queremos isso para os visitantes do nosso site.

1. Layouts cleam – use espaços em branco

Quando digo “espaços em branco”, não estou me referindo à cor branca, mas sim aos espaços entre os elementos da página (imagens, ícones, textos, etc.). Um espaço vazio para separar as seções. Desta forma estamos diminuindo a poluição visual e aplicando umas das técnicas mais simples para usabilidade web.

O termo layout Cleam não quer dizer página com pouco conteúdo. Você pode ter bastante conteúdo dentro de um layout limpo. Basta organiza-lo!

Se tudo estiver amontoado sem uma separação clara entre os elementos, ler e navegar no seu site se tornará uma tarefa bem difícil. O layout deve ter espaços entre os elementos para o usuário poder “respirar” no seu site.
Abaixo um exemplo de um site “cleam”.

2. Conteúdos Gráficos

Quem nunca ouviu a frase: “Uma imagem vale mais que mil palavras”. Uma imagem realmente vale mais que mil palavras! Fotos e imagens podem melhorar a legibilidade quando substituir grandes quantidades de texto. Elas podem ser usadas também para reforçar longos blocos de conteúdo de texto. Mas tenha a certeza de que suas imagens estão fornecendo valor para sua página e não apenas decorando-a. Resumo. Evite fotos e imagens sem sentido.

De fato, os usuários dão mais atenção para bloco de textos que estão próximos a imagens. A seguir um exemplo muito comum de imagem mais um pequeno bloco de texto.

3. Alinhamento – Grid

O conteúdo da página e do design deve estar perfeitamente alinhado, criando uma hierarquia visual clara. Para esta finalidade os designers utilizam um artefato chamado de grid (grade). Isso é uma técnica que vai auxilia-lo tremendamente na organização do seu conteúdo.

Uma grade bem planejada pode formar uma excelente base para criar um site com equilíbrio visual. Páginas devem ser divididas em um sistema de colunas, linhas, menus, barras laterais, cabeçalho e rodapé, orientando os olhos do usuário suavemente para o conteúdo e navegação.

Veja abaixo um excelente material sobre como criar grids.

4. Cores e contraste

Texto cinza claro sobre um fundo branco para você pode até ser algo natural e comum, mas para os visitantes do seu site pode ser completamente ilegível (porque realmente é).

Você pode definitivamente “brincar” com o contraste do seu conteúdo. Se o seu site tem um fundo branco, você pode chamar a atenção para certos textos, tornando-os mais escuros e fazer outros textos não tão escuros para que eles não chamem tanta atenção. Por exemplo: texto preto sobre fundo branco chama mais atenção que um texto cinza sobre um fundo branco.

Há uma grande facilidade na leitura quando a cor do texto e a cor de fundo estão em alto contraste. Baixo contraste faz com que a leitura se torne cansativa para os usuários, principalmente aqueles que têm alguma dificuldade de visão. O site Vischeck simula uma visão daltônica do seu site. Apenas informe o endereço da página para fazer o teste.

O segredo é certificar-se que há um bom contraste entre os elementos de design, cores de fundo e texto.

Há um tempo escrevi uma matéria sobre uma ferramenta online que serve para testar a harmonia das cores de um Website.

Use as cores à seu favor:

Veja abaixo o que uma simples mudança de cor pode fazer para facilitar a vida do usuário e facilitando a usabilidade do web site:

Imagem da esquerda:
As linhas entre os itens acrescentam muita confusão. Alguns usuários teriam uma dificuldade visual ao percorrer o menu.

Imagem da direita:
Sem confusão visual. Destaque total nos links e não mais no design do menu.

5. Vá direto ao ponto

Omita palavras desnecessárias. Uma frase na sua página não deve ter palavras desnecessárias assim como um parágrafo não deve ter frases desnecessárias. Não deixe palavras apenas ocupando espaços na página.

A maioria das páginas hoje na Internet se pode eliminar a metade das palavras sem perder o valor do texto, com isso destacamos mais o conteúdo útil para nossos usuários. Provavelmente, você pode transmitir a mesma mensagem de 50 palavras, como você faria com 100 palavras. Vá direto ao ponto e seus usuários vão agradecer você por isso.

Textos introdutórios que nos dão boas vindas ao site não passam nenhum tipo de informação relevante para os usuários, por isso devem ser evitados. Criamos nossos sites como se as pessoas fossem olhar atentamente cada página, entretanto, na prática sabemos que as pessoas não leem na web e sim fazem uma “varredura”, então vá direto ao objetivo do site, vender, informar, etc.

O estilo de escrita pirâmide invertida demonstra onde colocar as informações mais relevantes em sua página, de modo que o leitor ache-a primeiro.

6. Fontes e textos

Existem centenas de fontes disponíveis para download na Internet, então o designer pode optar por algo diferente para os títulos e subtítulos, especialmente agora que mais e mais pessoas estão usando a propriedade @font-face do css. Contudo recomendo manter algo simples para o resto do conteúdo, como Helvetica, Arial, verdana ou Times Roman.

Utilize duas famílias de fontes, uma para títulos e subtítulos e outra para o texto. Para destaques utilize estilos de negrito, itálico, por exemplo. Tome cuidado em sublinhar palavras e frases, seus usuários podem achar que é um link.
Grandes blocos de textos intimidam seus leitores. Abaixo algumas maneiras fáceis de organizar melhor seus blocos de texto.

Listei algumas dicas e técnicas de usabilidade em páginas da web. Siga esses passos e você ajudará seus leitores encontrarem informação de forma mais fácil nas suas páginas web. Seus leitores agradecem.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Nenhum post relacionado

Muito comum em material impresso, como revistas e jornais, uma imagem ou gráfico seguida por uma pequena legenda. Na web antes da HTML5 não tinha uma maneira de aplicar semanticamente esse tipo de conteúdo na marcação HTML. A boa notícia é que agora é possível fazer uma marcação semântica para esta finalidade. Veremos os elementos <figure> & <figcaption>.

Elemento figure

Esse serve para englobar conteúdos independentes que sejam relacionados a um conteúdo específico na página web. Usamos esse elemento para marcar conteúdos do tipo: imagens, ilustrações, diagramas, fotos, vídeos, linhas de códigos…

Os conteúdos que estiverem dentro do <figure> podem ser movidos para longe do fluxo principal da página sem afetar o significado da página. Muitas vezes o elemento figure é acompanhada pelo elemento <figcaption>.

Cuidado com a tentação de aplicar em todas suas imagens a tag <figure>, pois isso não é correto. Para utilizar melhor esse elemento você deve pensar em como a imagem é utilizada na sua página web. Se a imagem faz parte do conteúdo da página e for movida para outro local sem perder seu significado, é sinal que ela pode ficar dentro do novo elemento <figure>. Caso a imagem seja um ícone de navegação, um logotipo, imagens que devem estar num local específico em um artigo (tal como um artigo de tutorial passo-a-passo, com várias imagens na página) não devem estar marcadas com o elemento <figure>.

Exemplo elemento figure:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock"
  width="304" height="228" />
</figure>

Elemento figcaption

Utilizado para marcar uma legenda para conteúdos inseridos com uso do elemento <figure>. Sempre deve vir entre o elemento <figure>, ou seja, deve constar como elemento-filho do elemento <figure>. A tag <figcaption>só é válido dentre do <figure>.

Usando os dois elementos

Já vimos qual o objetivo dos dois novos elementos HTML5, veja agora como podemos usa-los em conjunto. Estes elementos são usados ​​em combinação para apoiar uma melhor acessibilidade e maior clareza quanto ao conteúdo de gráficos, imagens, etc.

<figure>
  <img src="kurt-cobain.jpg" alt="Kurt Cobain">
  <figcaption>Kurt Cobain, vocalista e guitarrista da banda Nirvana</figcaption>
</figure>

Você pode ter várias imagens, vídeos, gráficos… dentro de um único elemento <figure>. Note também que o <figcaption> pode ser usado antes ou após os elementos gráficos. Perceba que no próximo exemplo a legenda aparece antes, diferentemente do primeiro exemplo. Veja abaixo.

<figure>
  <figcaption>Filme Expendables e Kurt Cobain</figcaption>
  <video src="expendables.mov">
  <img src="kurt-cobain.jpg" alt="Kurt Cobain">
</figure>

Usando o elemento em trechos de códigos

<figure>
  <figcaption>CSS para estilizar o element P </figcaption>
   <code>
     p{font-size:14px;color:#FF00AB;}
   </code>
</figure>

O resultado será o seguinte:

Você pode criar um efeito visual não deixando a legenda sempre visível. Isso pode ser feito através de uma marcação adicional no HTML e estilização com CSS para mostrar/ocultar o texto da legenda quando a imagem receber o mouse sobre a imagem.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Forte abraço!

Isso vai interessar você também

• Nenhum post relacionado

O script a seguir mostra como pegar as coordenadas X e Y do mouse do usuário usando JavaScript e o elemento canvas da HTML5. Perceba que há uma função chamada getMousePos que retorna as coordenadas com base na posição do mouse do usuário e o deslocamento do mouse na página do navegador.

JavaScript

function writeMessage(canvas, message){
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }

    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}

window.onload = function(){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    canvas.addEventListener('mousemove', function(evt){
        var mousePos = getMousePos(canvas, evt);
        var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
        writeMessage(canvas, message);
    }, false);
};

HTML

  <canvas id="myCanvas" width="578" height="200">
  </canvas>

Exemplo:

Referência:
html5canvastutorials

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Nenhum post relacionado

Faça o download de ações para turbinar seu Photoshop

Ações no Photoshop podem ser extremamente úteis quando você deseja realizar os mesmos efeitos em várias imagens. Tempos atrás escrevi um artigo aqui no site mostrando como criar uma ação no Photoshop.

Se você é novato em Photoshop provavelmente não sabe instalar actions, então recomendo a leitura do artigo Como Instalar Actions. Artigo bem simples e muito objetivo.

O site 2expertsdesign criou uma lista de 50 ações impressionantes. Ações para aplicar diversos efeitos em imagens apenas pressionando a tecla play da paleta ações do Photoshop. Entre os efeitos você encontra ações para suavizar tom de pele, intensificar cor dos olhos, envelhecer, transformar fotos em desenho… entre muitos outros.

Confira a lista de 50 ações para photoshop.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• Os melhores tutoriais de Photoshop a partir de 2010
• 22 web sites desenvolvidos com HTML5 e CSS3
• 35 tutoriais de layouts para sites no Photoshop
• Mais de 600 Brushes com efeito de luz para Photoshop
• Envelhecer fotos no Photoshop
• Competição de Photoshop – 460 euros em prêmios!
• Os 10 melhores e os 10 piores sites da Web
• Mais memória para o Photoshop

A nova linguagem HTML5 prevê reformulação no atributo accesskey. Uma delas é: “todos os elementos HTML podem receber o atributo accesskey“. Apesar dos navegadores atuais não aplicarem tudo que a documentação do W3c sugere, ainda sim podemos usar para incrementar a acessibilidade das nossas páginas web.

Você já parou para pensar que seus visitantes podem ter algum tipo de deficiência ou mobilidade reduzida e podem ter dificuldades de controlar o mouse para clicar em links, campos de formulários, etc. E uma navegação utilizando a tecla tab pode acabar sendo um processo bem lento para dar foco em um link…

A especificação da HTML5 recomenda que a combinação de teclas para acionar o atributo accesskey seja ctrl + alt + tecla e que o valor do atributo accesskey seja case sensitive, ou seja, sensível ao tamanho da letra. Porém os navegadores não implementam essa recomendação, a maioria dos navegadores usam a tecla alt + tecla e/ou shift + alt + tecla

A maioria dos navegadores não suporta duplicar o atributo accesskey. Por exemplo, uma página não pode ter dois atalhos com accesskey = "N". A maioria dos irá ignorar um dos atalhos. Alguns navegadores vão ignorar a primeira accesskey, e outros navegadores ignoram a segunda instância. O navegador que aceita accesskey duplicado é o Internet Explorer.

Exemplo atributo accesskey

<nav>
    <p>
        <a href="http://www.google.com.br" accesskey="G">Google</a>
        <a href="http://www.yahoo.com" accesskey="Y">Yahoo</a>
        <a href="http://www.facebook.com" accesskey="F">Facebook</a>
    </p>
</nav>

Na HTML5 o atributo accesskey pode conter uma série de atalhos, separados por espaços. Uma finalidade para isso é de assegurar que um atalho de teclado esteja disponível para dispositivos moveis também, aqueles que só possuem teclado com números. Assim é possível acrescentar um valor numérico no atributo accesskey além da letra, bastando o usuário digitar esse número para dar o foco no elemento. Veja a seguir que definimos a letra “s”, e em seguida, separado por um espaço, o número “0″.

<form action="/search">
 <label>Search: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

Você deve estar se perguntando, mas como meus usuários vão saber que inseri teclas de atalhos para meus elementos HTML. Raramente um usuário saberá que você atribuiu teclas de atalhos para os elementos. Para minimizar essa dificuldade você pode colocar um texto informando seus visitantes ou exibir para o usuário ao lado do elemento a tecla de atalho. Abaixo um CSS que insere ao lado do elemento a tecla de atalho escolhida para o elemento.

a[accesskey]:after, button[accesskey]:after, input[accesskey]:after,
label[accesskey]:after, legend[accesskey]:after, textarea[accesskey]:after {
	margin-left: 0.3em;
	content: "[" attr(accesskey) "]";
	}

Um site que implementa o uso desse atributo é o Acesso Digital. Esse site foi desenvolvido para oferecer total acessibilidade aos seus visitantes. Excelente para um bom exemplo de acessibilidade na Web.

Compatibilidade entre navegadores

O atributo accesskey é suportado em todos os principais navegadores em suas últimas versões, com exceção do navegador Opera que ainda não implementa tal funcionalidade.

Firefox usa a combinação de teclas shift + alt + tecla, já o Chrome shift + alt + tecla ou apenas alt+tecla.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5

Com o plugin Quick Pagination você é capaz de criar paginações rapidamente em suas listas. Ótimo para converter listas extensas em listas menores. O plugin ainda permite ajustar alguns dos seus parâmetros adicionais. Você pode especificar a navegação na parte superior, inferior ou ambos, pode também especificar o número de itens a serem exibidos.

Lembrando que para usar esse plugin você deve fazer o download da biblioteca jquery, ou carregar o arquivo a partir do site do Google.

Como usar jQuery Quick Pagination

Exemplo de marcação HTML

<ul class="pagination1">
	<li>1 - Item 1 de 25</li>
    <li>2 - Item 2 de 25</li>
    <li>3 - Item 3 de 25</li>
    <li>4 - Item 4 de 25</li>
    <li>5 - Item 5 de 25</li>
    <li>6 - Item 6 de 25</li>
....

Criando três exemplo de paginação

<script type="text/javascript">
$(document).ready(function() {
	$("ul.pagination1").quickPagination();
	$("ul.pagination2").quickPagination({pagerLocation:"both"});
	$("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});
});
</script>

Primeiro exemplo
Opção padrão mostrando 10 itens da lista e navegação na parte inferior.

Segundo exemplo
Mostrando 10 itens da lista e navegação na parte superior e inferior.

Terceiro Exemplo
Especificados 3 itens na lista e navegação na parte superior e inferior.

Referências:

• http://www.jquery4u.com/tutorials/jquery-quick-pagination-list-items/
• http://archive.plugins.jquery.com/project/quick_paginate

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Forte abraço e até a próxima!

Isso vai interessar você também

• 20 tutoriais jQuery para galeria de imagens
• Criando máscara de entrada em formulários com Masked Input e jQuery
• FireQuery – extensão jQuery para Firefox
• Efeitos com jQuery
• Destacando linhas de tabelas ao passar o mouse
• Efeito sanfona com jQuery e Accordion
• Tabela – efeito zebra
• Seletores jQuery – Parte I
• O que é Jquery?

Fiz esse artigo reunindo sites inspiradores usando HTML5 e CSS3, exemplos brilhantes e para lá de criativos que demonstram o potencial dessas duas tecnologias, e claro, a habilidade e criatividade dos desenvolvedores. Esse post também serve como uma grande fonte de inspiração para você aplicar em seus projetos.

Apesar da linguagem HTML5 ainda não estar totalmente finalizada, há muitos projetos de sites utilizando essa linguagem, que promete revolucionar o modo que os desenvolvedores criam seus sites. Com a presença do HTML5 podemos eliminar a necessidades de plugins de terceiros, permite uma codificação mais semântica e limpa, entre outras vantagens.

Suporte para CSS3 está crescendo rapidamente, os principais navegadores já estão interpretando regras CSS3 (novos seletores, propriedades, etc).

1. Bent the Bodyguard

2. Bounty Bev

3. Digital Hands

4. Get Satisfaction

5. I am Jamie

6. Icaro Ferracini

7. Ivan Asetiawan

8. Matt Hewnsara

9. Mula Design

10. Nike Better World

11. Robedwards

12. Seamco

13. Vision 18

14. Walo

15. Web For Freaks

16. Readiness

17. Clearideaz

18. Scratch Radio

19. nzfestival

20. OK Cool

21. Zoocha

22. Portfolio Rui Molar’s

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• Validação de formulário com HTML5
• Como criar um layout de 3 colunas com CSS
• 50 ações incríveis para turbinar seu Photoshop
• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas

HTML5 evoluiu bastante e tem uma série de novidades entre elementos e atributos para formulários. Nesse artigo mostro um pouco sobre validação dos campos de um formulário. Acredito que em um futuro próximo os desenvolvedores não precisaram escrever o código de validação de formulário em JavaScript, por exemplo, já que os navegadores serão capazes de fazer tudo isso para nós.

Atributo required

Utilizamos esse atributo para informar ao navegador que um elemento do formulário é de preenchimento obrigatório, ou seja, o usuário não consegue enviar o formulário se não preencher o campo com o atributo required. Seu uso é exclusivo com os elementos input, select e textarea.

Uma mensagem é informada ao usuário em uma tentativa de envio de formulário sem o preenchimento de um campo com required. Esse atributo apenas verifica se o campo foi preenchido ou não. Quero dizer que, qualquer caractere será aceito.

    <form method="post" action="">
    <label for="nome">Nome: </label><input id="nome" type=text required name=nome>
    <input type=submit value="OK">
    </form>

Abaixo mostro as mensagens de alerta nos seguintes navegadores: Google Chrome, Firefox e Opera. Perceba que cada fabricante estiliza a mensagem de forma diferente.

type=”email”

Atributo type de um input com a opção igual a email significa definir o campo para receber um endereço de e-mail válido. A forma de validação não verifica se o e-mail digitado realmente existe, mas sim se o formato está correto. Exemplo de um formato de email aceito: teste@teste.com.

<form method="post" action="">
    <label for="email">E-mail: </label><input id="email" type=email required name=email>
    <input type=submit value="OK">
    </form>

Alerta para o usuário caso não seja digitado nada no campo input.

Alerta para o usuário caso não seja digitado um formato de e-mail no campo input.

Um recurso CSS3 pode ser usando para identificar se o elemento do formulário recebeu ou não um dado válido. Esse recurso é o pseudoclasse :valid e :invalid

Assim que o usuário digitar um dado válido, o navegador altera o pseudoclasse de :invalid para :valid. No exemplo abaixo o campo inicia com uma cor de fundo avermelhada, assim que o usuário digitar um formato de e-mail o campo é alterado para verde.

Veja o CSS:

    #email:valid {background:#006600;color:#fff }
    #email:invalid {background:#990000; color:#fff}

type=”url”

Um campo input com type igual a url recebe apenas url’s no seu formato correto, ou seja, http://www.site.com, http://www.site.com.br etc.

    <form method="post" action="">
    <label for="site">Site: </label><input id="email" type=url required name=site>
    <input type=submit value="OK">
    </form>

Mensagem de alerta do navegador Chrome ao digitarmos uma url em um formato inválido.

pattern = “Expressão”

Com uso do atributo pattern você pode exigir que o usuário digite valores em um padrão feito com expressão regular, ou seja, o que for digitado no compo input deverá satisfazer a expressão regular criada pelo desenvolvedor.

Explicarei o atribudo criando uma expressão para entrada de um número de telefone. O valor inserido no campo de input deverá iniciar com (xx) logo terá um espaço em branco com uma sequência de quatro dígitos, um traço, e para terminar mais uma sequência de quatro dígitos, ficando assim: (xx) xxxx-xxxx.

Abaixo o código para criar a condição descrita acima.

<form>
   <label>Telefone: <input required name="tel" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
  </form>

\([0-9]{2}\) usuário deve digitar dois números de 0 até 9 entre parênteses.

[\s][0-9]{4}-[0-9]{4} um espaço e duas sequência de números divididas por um traço.

Em HTML5 há um valor para o atributo type que é o tel. Ao utilizar esse valor não há máscara de formatação ou validação, já que não há um padrão para números de telefones. Ele serve apenas para informar que o valor do campo é um número de telefone.

Abaixo outro exemplo utilizando o atributo pattern, agora validando CEP

<form>
   <label>CEP: <input required name="cep" pattern="[0-9]{5}-[0-9]{3}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
</form>

novalidate=”novalidate”

Quando presente dentro do elemento form, especifica que os elementos do formulário não devem ser validados quando submetidos mesmo que tenham em seu type atributos iguais a email, url, etc.

<form action=" " novalidate="novalidate">
  <label>nome: <input name="nome" required></label>
  <label>email: <input name="email" type="email" required></label>
  <input type="submit" name="action" value="Enviar">
</form>

No exemplo acima mesmo que o usuário clique no botão enviar sem preencher os campos com required o formulário será submetido. Isso porque passamos o valor novalidate="novalidate".

Compatibilidade entre navegadores

Pelos testes que fiz a validação funcionou perfeitamente nos navegadores Chrome, Opera e Firefox em suas últimas versões. Navegadores como Safari e Internet Explorer não foram capazes de reconhecer tais elementos da HTML5.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5