Olá, pessoal! Após um período de ausência, estou de volta pra falar mais sobre o HTML5. 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 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 <li> com determinado ID, referencie esse ID e tenha sua lista predefinida. (<OPTION>).
• 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.

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

Abraços e até a próxima!