Novas funções de formulário em HTML5 (parte 2)

Olá pessoal. Continuando essa seqüência sobre as novas funções de formulários em HTML5, irei falar agora sobre os novos atributos booleanos dentro da tag “form”.

Atualizado em 03/10/2011

required: Indica que o preenchimento do campo é obrigatório. Caso o usuário não preencha, o formulário não será enviado. Funciona com os seguintes “input” tipos: text, email, password, date, time, number, checkbox, radio, and file e também funciona com a tag “textarea”. Funciona no navegador

autocomplete: Abre a opção de autocompletar quando o usuário começar a digitar no campo. Funciona com “input” tipos: text, email, password, date e range. Funciona nos navegadores

autofocus: Posiciona o display do mouse para o campo com esse atributo ao ser iniciada a navegação na página. Funciona com as tags “input”, “textarea” e “select”. Funciona nos navegadores

placeholder: Permite que o autor da página coloque uma dica no campo a fim de facilitar o usuário ao preencher o formulário. Funciona com a tag “input” tipos: text, email e password e também funciona com a tag “textarea”. Funciona nos navegadores

max e min: Define um valor máximo e mínimo respectivamente para os valores a ser inseridos dentro do campo. Funcionam com a tag “input” tipos: time, range e number. Quando forem usados juntos com “input” tipo time, os valores devem ser no formato hora. Funciona nos navegadores

step: Define o intevalo entre os números dentro do campo. Quando for usado junto com hora, o valor do step deve ser em segundos. Funciona com a tag “input” tipos: time, range e number. Funciona nos navegadores

Observe o código abaixo seguido pelo formulário do post anterior e veja como fica:

Formulário com HTML 5
  • 20

Lembrando que um atributo não irá funcionar em um navegador cuja sua respectiva tag não funcione. Por exemplo, o recurso de autocompletar não irá funcionar no com “input” tipo number.

Façam os testes nos navegadores!

Valeu

Confira aqui o Tutorial Completo HTML5 2012

Author Description

dukountra

There are 2 comments. Add yours

  1. 10th agosto 2011 | Jonathan Gabeta says: Responder
    O atributo "placeholder" funciona no firefox também. Testei aqui e funcionou tranquilo. Abraços!

Join the Conversation