Formulários no HTML5

Olá amigos,

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/

Nenhum post relacionado.