Formulários em 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: <-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.

Falamos 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.

Imaster