Formulários em HTML5

Estou de volta pra falar mais sobre o HTML5. Hoje eu li um artigo simples mais bem interessante para quem quer começar cedo no HTML 5.

Neste artigo vamos falar sobre os formulários, pois há grandes e significativas mudanças.

Tag INPUT

Começando pela tag INPUT, que antes aceitava tipos limitados de entradas. Agora ela inclui novos tipos de entradas. São elas:

·         search - para pesquisas;

·         number - são setas para aumentar e diminuir números, limitando número máximo e mínimo;

·         range - botão deslizante;

·         color - mostra uma paleta de cores;

·         tel - números de telefones;

·         url - endereço de url;

·         email - endereço de e-mail;

·         date/month/week - mostra no campo um calendário que permite navegar entre meses e anos;

·         time - para mostrar a hora;

·         datetime - configura data e hora;

·         datetime-local - data e hora local.

Muitos desses campos nos facilitarão e muito o trabalho, como o campo de paleta de cores e datas.

Modo de utilizá-los: "input type="email" name="email" required /"

Outra funcionalidade super bacana é o atributo "required", utilizado acima. O HTML5 valida o campo do formulário de acordo com a entrada (caso esteja configurado como tipo "email", ele vai validar o email e, assim, fazer a submissão do formulário.)

Mais funções bacanas:

·         Autocomplete: Se setado como "on", ele habilita o autocompletar nos campos. Desabitila, caso "off".

·         Autofocus: Foca o campo no carregamento da página.

 Form: Define um ou mais formulários a que o campo pertence. Ex.: "input type="url" name="link" form="frmCadastro" /"

·         Formaction: Substitui o atributo forma de ação. Deve ser uma URL válida que define para onde enviar os dados quando o formulário é submetido.

·         Formencctype: Substitui atributo enctype do formulário. Define o tipo MIME utilizado para codificar o conteúdo do formulário. Aceita "application/x-www-form-urlencoded", "multipart/form-data" e "text/plain".

·         Formmethod: Substitui atributo do formulário método. Define o método HTTP para o envio de dados para o URL de ação. Aceita "get", "post", "put" e "delete".

·         Formnovalidate: Substitui atributo "novalidate" no formulário. Se for setado como "true", esse campo não será validado quando for submetido.

·         Formtarget: Substitui atributo do formulário de destino. Aceita "blank", "_self", "_parent" e "_top".

·         Width e Height: Definem largura e altura do campo do formulário, respectivamente. Podem utilizar medidas em percentagem e pixels. *Apenas para "Image Button".

·         Max e Min: Valor máximo e mínimo de um campo de entrada no formulário. Se utilizados juntos, podem criar limites de valores.

·         List: Referencia um elemento DataList. Muito bacana. Caso tenha um elemento com determinado ID, referencie esse ID e tenha sua lista predefinida. ().

 Multiple: Permite que o usuário selecione mais de um item.

 Pattern: Show de bola. É um "Javascript Pattern". Permite que você crie restrições por expressões regulares. Por exemplo, se deseja que seu campo tenha apenas 11 dígitos numéricos. Ex.: " input type="tel" name="telefone" pattern="[0-9]{11}" /"

Placeholder: Define uma dica para ajudar o usuário a preencher o campo. Ex.: "input type="email" name="email" placeholder="Digite aqui o seu email" /"

Step: Utilizado juntamente com os tipos "datetime", "time", "date", "datetime-local", "month", "week", "number", "range", definindo um intervalo numérico. Ex.: "input type="number" min="0" max="10" step="2" value="6" /" Ou seja, ele vai aceitar valores pares de 0 a 10.

Bom, falei dos novos elementos que podem ser utilizados com a tag INPUT.

Tag TEXTAREA

Vamos falar da tag TEXTAREA. Ela também aceita as novas tags autofocus, form, placeholder, required, explicadas acima. Além dessas, há um novo atributo: WRAP ? que aceita dois valores ? "hard" ou "soft".  Se o valor for "hard", então as quebras de linha são adicionados ao valor do atributo "cols". O valor "soft" é o padrão, e não acrescenta quebras de linha.

A tag SELECT aceita os novos atributos "autofocus" e "form".

Lembro que a maioria funciona apenas no Opera 9.5+, algumas funcionalidades no Chrome e Firefox 3.7+. Ainda dependemos muito dos navegadores para que possamos utilizar essas novas funções, que infelizmente não são viáveis para desenvolvimento no momento, mas para um futuro não tão distante.