Formulários no HTML 5

O HTML 5 ainda está em fase de desenvolvimento, porém, já estão previstas várias melhorias. Algumas destas novidades estão relacionadas à criação de formulários. Vamos listar algumas delas, lembrando que estas informações estão sujeitas a mudanças.

Associação entre Formulário e Campos

Nas versões anteriores a 5, os formulários eram compostos por uma tag <form> que agrupava um conjunto de campos que eram submetidos para uma URL de destino (definida pelo atributo action). Agora, os campos não precisam ser incluídos dentro da tag <form>, desde que indiquem de qual formulário pertença através do atributo form. Veja um exemplo:

<form id="cadastro_usuario" action="http://exemplo.com">
</form>

<input type="text" name="nome" form="cadastro_usuario" />

Observe que o input ficou do lado de fora do formulário, porém, existe este "apontamento" feito pelo atributo form. Isso permite criar campos do formulário que ficam deslocados esteticamente. Também é possível, por exemplo, criar múltiplos formulários dentro de uma tabela (os campos de um formulário em uma coluna e os do outro em outra coluna).

---

Submissão de Dados

Em versões anteriores à 5, as características do formulário eram definidas na própria tag form através dos atributos action, method, enctype e target. Na versão 5 isso continua possível, mas também é permitido incluir estas características (e algumas novas) nos botões de submissão (e omití-los no form) através dos atributos formaction, formmethod, formenctype e formtarget respectivamente. Com isso, é possível, por exemplo, criar botões que encaminham as informações do formulário para destinos diferentes. Veja um exemplo:

<form>
<input type="submit" name="alterar" value="Alterar" formaction="http://exemplo.com/alterar.php" formmethod="post" />
<input type="submit" name="excluir" value="Excluir" formaction="http://exemplo.com/excluir.php" formmethod="get" />
</form>

---

Novos tipos de campos

O HTML 5 prevê novos tipos de campos para facilitar o preenchimento pelo usuário. Algumas validações podem ser feitas no lado do cliente (assim como eram feitas as validações com JavaScript), porém, com recursos nativos do HTML. Vale ressaltar que as validações do lado do servidor continuam necessárias, pois o HTML é uma linguagem que funciona como uma interface sobre o protocolo HTTP. Este protocolo pode ser acessado diretamente (por exemplo, via telnet) e permite simular a submissão de dados sem validação alguma.

Vejamos os novos tipos de campos previstos pela tag input:

• search - Campo de texto, porém reservado para buscas (formulários de filtro, ao invés de formulários de inserção/alteração).
• tel - Campo de telefone.
• url - Campo de endereço de URL.
• email - Campo de e-mail.
• Campos de Tempo:
  • datetime - Campo de data (dia, mês e ano), hora (hora, minuto, segundo e fração de segundo) e zona horária.
  • datetime-local - Campo de data e hora apenas.
  • date - Campo de data apenas.
  • time - Campo de hora apenas.
  • month - Campo de mês e ano apenas.
  • week - Campo de semana do ano.
• number - Campo com valor numérico.
• range - Campo com valor numérico, cujo valor exato não é importante (por exemplo, o volume de áudio, que é definido por uma barra de rolagem, mas o valor exato é pouco importante ao usuário). Sua semântica é completada pelos atributos min, max e step.
• rgb - Campo de cor, informado com um RGB padrão com 8 bits por componente.

Observação: a forma como cada navegador irá implementar estes campos pode variar. A W3C apenas apresenta uma sugestão. Por exemplo, campos do tipo range são sugeridos como uma barra de rolagem, mas o navegador pode apresentar o respectivo valor numérico ao lado desta barra. Outro navegador pode implementar como um campo de texto que só aceita valores dentro do intervalo e com o passo definido.

Além dos novos tipos de input, existem outros tipos de elementos:

• output - Representa a saída de um cálculo do formulário (ainda um pouco nebuloso).
• datalist - Serve para montar uma lista de sugestões de preenchimento de um campo. Possui vários elementos option internamente.
• keygen - Serve para gerar um par de chave pública/privada. A chave pública é enviada pelo formulário e a chave privada armazenada.
• progress - Monta uma barra de progresso crescente (a barra vai sendo preenchida até ficar totalmente preenchida) ou indeterminada (a barra indica que a operação está em andamento, mas o final é indeterminado). Este elemento é atualizado pelo JavaScript, que provavelmente precisa fazer requisições assíncronas (Ajax) ao servidor para determinar o andamento do progresso.

---

Novos atributos e comportamentos

O atributo disabled em um fieldset propaga este comportamento para todos os campos que ele agrupa.

O atributo autocomplete (que pode valer "on" ou "off") foi incorporado aos campos de formulário que podem ser relembrados e também à própria tag form, que habilita ou desabilita o autocomplete de todos campos do formulário automaticamente.

O atributo booleano autofocus pode ser aplicado a um elemento do formulário para indicar que ele deve receber o foco assim que a página é criada. Deve ser usado em um único elemento da página.

O atributo list pode ser incluído em alguns campos para apresentar sugestões pré-definidas em uma lista criada com a nova tag datalist, e contém o ID do datalist a ser usado.

O atributo multiple indica que um campo pode conter vários valores de determinado tipo. Por exemplo, um campo de e-mail pode submeter vários e-mails (ainda não sei como os valores são agrupados num único campo). Este atributo provavelmente será utilizado pelo campo do tipo file para permitir o upload de múltiplos arquivos.

O atributo placeholder indica um exemplo de preenchimento do campo ou um texto informando qual é o formato esperado pelo campo ou que não é esperado pelo campo.

O atributo step é utilizado por alguns campos como range ou time para indicar qual é o "passo" entre os valores de um intervalo.

O atributo pattern permite incluir uma expressão regular para validar um campo textual.

Os atributos min e max são atributos de validação que definem o valor mínimo e máximo para campos preenchidos com números.

O atributo booleano required é um atributo de validação que define que o campo precisa ser preenchido para submissão.

O atributo maxlength que era permitido em campos de texto de uma linha, agora são (finalmente) permitidos na tag textarea.

O atributo wrap foi incluído na tag textarea. Ele previne um famoso inconveniente provocado pela "quebra de linha automática" gerada neste tipo de campo quando o texto de uma linha atingia o tamanho limite. Embora a quebra de linha automática estivesse lá, o texto não era enviado com um "\n" no ponto da quebra de linha. Isso confundia muito os usuários que, por consequência, esqueciam de colocar quebra de linha onde pensavam que já havia um. Os possíveis valores do atributo são "soft" ou "hard". O valor "soft" é o padrão e representa o comportamento tradicional, já o valor "hard" envia uma quebra de linha quando ela é gerada pelo navegador automaticamente.

Os atributos booleanos novalidate (para tag form) e formnovalidade (para os campos de submissão) indicam se deve ser realizada a validação dos dados no momento da submissão ou não (validações criadas pelos novos atributos de validação, tais como min, max, required, etc.).