Forms no HTML5

Elementos e atributos de formulários no HTML5 fornecem um grau maior de marcação semântica do que o HTML4  e removem em grande parte a necessidade tediosa de estilos e scripts requerida no HTML4. Os recursos de formulários no HTML5 fornecem uma melhor experiência para os usuários, tornando os formulários mais consistentes através de diferentes web sites e dando retorno imediato ao usuário sobre a entrada de dados. Eles também fornecem esta experiência aos usuários que deixam os scripts desativados no navegador.

Este tópico descreve itens novos ou alterados que são suportados pelo Gecko/Firefox.

O elemento <input>

O elemento <input> tem novos valores para o atributo type.

• search: O elemento representa um campo de entrada de busca. Quebras de linhas são automaticamente removidas do valor de entrada, mas nenhuma outra sintaxe é aplicada.
• tel: O elemento representa um controle para a edição de um número de telefone. Quebras de linhas são automaticamente removidas do valor de entrada, mas nenhuma outra sintaxe é aplicada, pois números de telefone podem variar bastante internacionalmente. Você pode usar atributos como pattern e maxlength para restringir valores digitados no controle.
• url: O elemento representa um controle para a edição de URL. Quebras de linha e espaços, à direita e à esquerda, são automaticamente removidos do valor de entrada.

• email: O elemento representa um endereço de e-mail. Quebras de linhas são automaticamente removidas do valor de entrada. Um endereço de e-mail inválido pode ser configurado, mas o campo de entrada somente será satisfeito se contiver um endereço de e-mail que satisfaça a produção ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) na qual atext está definido na RFC 5322 section 3.2.3, e ldh-str está definido na RFC 1034 section 3.5.

  Nota: se o atributo multiple é configurado, podem ser digitados múltiplos endereços de e-mail neste campo <input>, como uma lista separada por espaços, mas atualmente isto não está implementado no Firefox.

O elemento <input> também tem novos atributos:

• list: O ID de um elemento <datalist> cujos conteúdos, elementos <option>, podem ser usados como dicas e são exibidos como propostas na área de sugestões do campo de entrada.
• pattern: Uma expressão regular contra a qual o valor do elemento é checado, a qual deve ser usada com os valores text, tel, search, url, e email de type.
• formmethod: Uma string indicando qual método HTTP (GET ou POST) deve ser usado na submissão; isto substitui o method do elemento <form>, se definido. O formmethod se aplica somente quando type é image ou submit.
• x-moz-errormessage: Uma string que é exibida como uma mensagem de erro quando a validação do campo falha. Esta é uma extenção da Mozilla, e não é um padrão.

O elemento <form>

O elemento <form> tem um novo atributo:

• novalidate: Este atributo previne o formulário de ser validado antes de sua submissão.

O elemento <datalist>

O elemento <datalist> representa a lista de elementos <option> para sugerir quando preencher um campo <input>.

Você pode usar o atributo list em um elemento <input> para ligar um campo de entrada com um elemento <datalist> específico.

O elemento <output>

O elemento <output> representa o resultado de um cálculo.

Você pode usar o atributo for para especificar uma relação entre o elemento de saída e outros elementos no documento, afetados pelo resultado (por exemplo, como entradas ou parâmetros). O valor do atributo for é uma lista de ID de outros elementos separada por espaços.

O atributo de espaço reservado

O atributo placeholder nos elementos <input> e <textarea> fornece uma dica ao usuário do que deve ser digitado no campo. O espaço reservado de texto não deve conter novas linhas ou alimentação de linhas.

O atributo de autofoco

O atributo autofocus permite especificar que um controle de formulário deve ter foco nas entradas quando a página carrega, a menos que o usuário sobreponha-se a isto, por exemplo digitando em um controle diferente. Somente um item do formulário pode ter o atributo autofocus, que é um Booleano. Este atributo pode ser aplicado aos elementos <input>, <button>, <select>, e <textarea>. A exceção é que o autofocus não pode ser aplicado em um elemento <input> se o atributo type é configurado como hidden (isto é, você não pode configurar automaticamente o foco em um controle escondido).

A propriedade label.control do DOM

A interface DOM HTMLLabelElement fornece uma propriedade extra, adicionalmente às propriedades que correspondem aos atributos do elemento <label> do HTML. A propriedade control retorna um controle rotulado, isto é, o controle para este rótulo, o qual é determinado pelo atributo for (se estiver definido) ou pelo primeiro elemento de controle descendente.

Validação de restrições

O HTML5 fornece itens de API e sintaxe para suportar a validação de formulários do lado do cliente. Enquanto esta funcionalidade não substitui a validação do lado do servidor, a qual ainda é necessária para a segurança e integridade dos dados, a validação do lado do cliente pode suportar uma melhor experiência ao usuário, dando ao usuário um retorno imediato sobre os dados digitados.

Sintaxe HTML para validação de restrições

Os seguintes itens da sintaxe do HTML5 podem ser usados para especificar restrições em dados de formulários.

• O atributo required no elementos <input>, <select> e <textarea> indica que um valor deve ser fornecido. (No elemento <input>, required aplica-se somente em conjunto com certos valores do atributo type.)
• O atributo pattern no elemento <input> obriga o valor a combinar com uma expressão regular específica.
• Os atributos min e max do elemento <input> limitam os valores mínimo e máximo que podem ser digitados.
• O atributo step do elemento <input> (quando usado combinadamente com os atributos min e max) define a granularidade de valores que podem ser entrados. Um valor que não corresponda a um valor permitido não será validado.
• O atributo maxlength dos elementos <input> e <textarea> limita o número máximo de caracteres (em pontos de código Unicode) que o usuário pode entrar.
• Os valores url e email para type obrigam o valor a ser uma URL ou um endereço de e-mail válido, respectivamente.

Adicionalmente, pode-se evitar a validação obrigatória especificando-se o atributo novalidate no elemento <form>, ou o atributo formnovalidate no elemento <button> e no elemento <input> (quando type é submit ou image). Estes atributos indicam que o formulário não será validado quando submetido.

API de validação de restrições

As seguintes propriedades e métodos do DOM relacionados à validação de restrições estão disponíveis nos scripts do lado do cliente:

• Em objetos HTMLFormElement, o método checkValidity() retorna verdadeiro se todos os elementos do formulário com elementos associados com validação obrigatória são satisfeitos, e falso, caso contrário.
• Em elementos associados a formulários (en):
  • A propriedade willValidate, a qual é falsa se o elemento possuir obrigatoriedades não satisfeitas.
  • A propriedade validity, a qual é um objeto de ValidityState, que representa o estado de validação em que o elemento se encontra (isto é, falha ou sucesso nas condições obrigatórias).
  • A propriedade validationMessage, a qual é uma mensagem descrevendo qualquer valha de obrigatoriedade pertinente ao elemento.
  • O método checkValidity(), o qual retorna falso se o elemento falha em satisfazer qualquer das suas obrigatoriedades, ou verdadeiro, caso contrário.
  • O método setCustomValidity(), o qual define uma mensagem customizada de validação, permitindo às obrigações serem impostas e validadas além das já pré-definidas.