HTML5 - Formulários e Funções

Falar um pouco mais sobre HTML5, Formulários e algumas Funções

Vim falar hoje um pouco mais sobre HTML5

Tag INPUT

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

• 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:

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.:
• 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.:
• Placeholder: Define uma dica para ajudar o usuário a preencher o campo. Ex.:
• Step: Utilizado juntamente com os tipos "datetime", "time", "date", "datetime-local", "month", "week", "number", "range", definindo um intervalo numérico. Ex.: 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.

Então, é bom ir se adaptando, pequeno cowboy!

Abraços e até a próxima!