O HTML5 nada mais é que a nova versão do HTML, que vem para revolucionar a maneira de desenvolver sites, munida de novos elementos e funcionalidades, promete facilitar muito a vida dos desenvolvedores.

Bem, hoje vou falar sobre algumas funcionalidade do HTML5 que acho muito interessante e que vai ajudar muito os desenvolvedores além de um ganho de tempo no desenvolvimento do site, vou falar sobre os formulários em HTML5.

O que vai mudar nos formulários nesta nova versão do HTML?

Bem, eu diria que muita coisa vai mudar, no HTML5 não será mais necessário a utilização de Javascript para validar um campo ou criar um campo especial para data e hora, com apenas algumas linhas é possível disponibilizar componentes como: slider, campo data, além de validações de diversos campos.

Vou citar alguns exemplos de campos específicos:

Para campos de Data e Hora: <input name=”hora” type=”datetime”>

Para campos de Tempo: <input name="tempo" type="time">

Para campos de Semana: <input name="semana" type="week">

Para campos de Número: <input name="numero" type="number"> (neste caso você pode usar os atributos “min” e “max” para limitar intervalos).

Para campos de Telefone: <input name="tel" type="tel">

Para campos de URL: <input name="url" type="url">

Para campos de E-mail: <input name="email" type="email">

Para Slider: <input name="slider" type="range" min="2" max="30" step="2" >

Autofocus

Além dos campos específicos o HTML5 trouxe outras funções bem interessantes, como o Autofocus que deixa o cursor já selecionado no campo principal da página, isso ajuda muito na parte de acessibilidade e usabilidade web. Para utilizar essa função é muito simples, basta adicionar “autofocus” no campo input desejado, segue um exemplo:

<input name="login" value="" autofocus>

Validação de formulários

A validação de formulários em HTML5 também ficou extremamente fácil, agora no elemento input existe o atributo “required”, basta adicionar este atributo nos inputs que serão obrigatórios, e pronto, o navegador se encarrega de fazer a validação. A grande sacada disto é que não será mais necessária a utilização daquele monte de código em javascript para validar seus formulários. Abaixo segue alguns exemplos de sua utilização:

<label>Nome: <input name="nome" required></label>
<label>Tel: <input name="tel" type="tel" required></label>
<label>E-mail: <input name="email" type="email" required></label>

Ainda falando em validação de formulários, outra coisa bastante interessante também que traz o HTML5 é a utilização de expressões regulares no atributo “pattern”, com ele é possível criar um padrão de entrada para o campo, segue um exemplo:

<input pattern="[0-9]{11}" name="cpf" required />

No exemplo acima, estou dizendo que o campo só vai aceitar 11 caracteres numéricos obrigatoriamente.

Textarea

O campo <textarea> também ganhou um atributo que é fundamental para limitar caracteres, antes isso só era possível nos campos do tipo <input>, para se fazer isso no <textarea> também exigia algumas linhas de javascript, o que não será mais necessário no HTML5, veja o exemplo abaixo:

<textarea name="chamada" maxlength="1000"></textarea>

No exemplo acima eu digo que o campo <textarea> só vai aceitar até 1000 caracteres.

Bem pessoal é isso aí, espero que tenham gostado e até a próxima.

Referências: http://www.w3.org/TR/html5/

Na minha opinião (isso não é uma regra, como falei é somente minha opinião) acho um pouco cedo para começar a se trabalhar com HTML5 nos sites para seus clientes, porém nada impede de você começar a estudar ou conhecer essa nova versão do HTML ou mesmo utilizá-la para aplicações pessoais para já ir tendo uma noção das novas funções.

HTML5 nos browsers (Navegadores)

Como todos sabemos a versão 8 do Internet Explorer (versão atual) não dá muito suporte ao HTML5, esse é um dos fatores por que digo que ainda é um pouco cedo para começar a usá-lo, outros navegadores como Firefox, Chrome, Opera e Safari já dão um suporte maior mas também não englobam muita coisa desta nova versão do HTML.

A Microsoft anunciou para o segundo semestre de 2010 sua nova versão do IE, a versão 9, que promete dar um suporte integral ao HTML5 a pouco ela disponibilizou os resultados dos últimos testes de compatibilidade realizados em conjunto com a W3C, você pode conferir clicando aqui

O site da agência de web que trabalho está em HTML5, porém, para ser exibido corretamente no IE8 é necessário a utilização de um código em JavaScript, esse Hack força o IE a interpretar os elementos do HTML5:

<abbr>,<article>,<aside>,<audio>,<bb>,<canvas>,<datagrid>,<datalist>,<details>,<dialog>,<eventsource>,<figure>,<footer>,<header>,<mark>,<menu>,<meter>,<nav>,<output>,<progress>,<section>,<time>  e <video>

Você pode fazer o download deste JavaScript clicando aqui

Os navegadores Firefox 2 e Camino também apresentam problemas de incompatibilidade com o HTML5, como uma parcela muito pequena de usuários utilizam esses navegadores, isso não chaga a se tornar um grande problema, mas se você quiser acertar o site também para esses navegadores, o HTML5Doctor apresenta uma solução em seu site, você pode ver clicando aqui(em inglês).

Vantagens

Uma das grandes vantagens do HTML5 é a economia de tempo, e organização de código, você não tem mais que ficar identificando as inúmeras <div> com “id” ou “class”, com os novos elementos do HTML5 isso já não é mais tão necessário, não que você vá parar de utilizar <div>, o elemento <div> vai continuar existindo também no HTML5 e você pode utilizá-lo normalmente. Porém para você especificar o cabeçalho da página, por exemplo, você vai utilizar <header>, para especificar um menu utiliza-se <nav>, conteúdo do site com <section>, rodapé da página com o elemento <footer>.

São vários os novos elementos do HTML5, mas vou deixar para falar sobre eles em outro post.
Definitivamente isso vai facilitar muito a vida dos desenvolvedores que vão poder criar um código mais limpo, mais organizado até mesmo para a questão de SEO, além da enorme facilidade na hora de criar a folha de estilo CSS.

Outra grande sacada também foi na parte de multimídia (áudio e vídeo), o HTML5 traz uma série de elementos que ajudam muito na hora de postar um vídeo, um arquivo de áudio ou mesmo um gráfico, o Google criou uma versão do site Youtube baseado em HTML5.

Os formulários também receberam um tratamento especial no HTML5, com novos campos e atributos. Para dar um exemplo, para se fazer a validação de um determinado campo basta fazê-lo desta maneira:

1

<p><label>Nome: <input name=name required></label></p>

Isso novamente só tem a beneficiar os desenvolvedores que não vão mais precisar daqueles enormes códigos em javascrit para validar campos ou criar códigos para autocomplete e campos de data e hora.

Enfim, são muitos os benefícios que essas novas funcionalidades e os novos elementos do HTML5 trazem para os desenvolvedores e para os usuários que estão navegando pela Web.

Em um próximo post vou explicar um pouco mais sobre os novos elementos, suas funcionalidades e formas de uso.

Espero que tenham gostado, é isso aí, até a próxima!

Hoje vou falar sobre um assunto que esta em alta nos últimos tempos, o tal do HTML5, vou procurar de tempo em tempo trazer algumas coisas sobre essa nova versão do HTML que esta prometendo ser de grande ajuda nos mais variados seguimentos, desde melhoras em processamento a acessibilidade e animações e efeitos integrados com CSS3.

Dentre as principais novidades do HTML5, estão seus novos elementos, que segundo suas especificações há um número significativo de novos elementos, e é sobre um deles que vou tratar neste post.

Vamos começar a falar sobre o elemento

1

<div id=”header”>

1
2
3
4

<header>
<p> Bem-vindo ao ... </p>
<h1> Lcardoso.com! </h1>
</header>

1
2
3
4
5
6
7
8
9

<header>
    <h1>The most important heading on this page</h1>
</header>
<article>
<header>
    <h1>Title of this article</h1>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>

1

header { display:block;}