Formulários

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript apresentam um novo suporte a Formulários HTML5, incluindo novos estados do atributo type (no elemento input), novos atributos do elemento input e do elemento progress. Esse suporte permite que os desenvolvedores forneçam solicitação para entrada do usuário, validação de entrada e feedback de forma rápida e fácil, com uma quantidade mínima de scripts. Os formulários em HTML5 são descritos na seção 4.10 da especificação HTML5 do W3C (World Wide Web Consortium).

Antes que esses atributos e tipos de input em HTML5 estivessem disponíveis, para verificar se um número de telefone não continha caracteres alfabéticos ou se um endereço de email formatado corretamente havia sido inserido, era necessário que o desenvolvedor escrevesse uma lógica extra para a validação. O suporte à validação de formulário e entrada do lado do cliente no HTML5 permite que o desenvolvedor se concentre em outras tarefas, em vez de criar funções de validação.

Suporte a novos estados de entrada

Os Formulários HTML5 definem vários estados de entrada para o atributo input do elemento type. O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript adicionam suporte aos estados URL, Email e Range.

Estado Search

O estado Search ocorre quando você define o atributo type do elemento input como search. Ele é idêntico ao estado Text; a única diferença é que ele é identificado no DOM (Document Object Model) como um tipo de entrada "search".


<input id="search" type="search" placeholder="Search..."/>

Estado Telephone

O estado de entrada Telephone, que ocorre quando você define o atributo type do elemento input como tel, indica que o campo aceita um número de telefone, como 11-5555-0012 ou (21) 5555-0034. Como os números de telefone podem ter diversos formatos, o estado Telephone não impõe um formato específico. Se precisar forçar um determinado formato, use o atributo pattern.


<input id="work_phone" type="tel" required placeholder="(425) 555-0067"/>

Estados URL e Email

O suporte aos estados URL e Email oferece aos desenvolvedores validação interna para os tipos de entrada de URL e email.

O estado de entrada URL, que ocorre quando você define o atributo type do elemento input como url, indica que o campo deve aceitar um endereço Web totalmente qualificado, como "http://www.contoso.com".

De modo semelhante, o estado de entrada Email aceita apenas um endereço de email (sintaticamente) válido, como "jorge@contoso.com". Com os exemplos a seguir, se o usuário não inserir uma URL ou um endereço de email corretamente, será exibida uma mensagem de erro.


<input type="url" name="myUrl"/>
<input type="email" name="myEmail"/>


Estado Number

O estado Number ocorre quando você define o atributo type do elemento input como number. Ele exige que o atributo value, se for especificado e não for deixado vazio, tenha um número de ponto flutuante válido.


<input type="number" name="desiredQuantity" value="1" />

Estado Range

O suporte ao estado de entrada Range permite criar facilmente um controle de entrada de intervalo ou controle deslizante. O estado de entrada Range ocorre quando você define o atributo type do elemento input como range. O controle de intervalo usa quatro atributos — min, max, step e value — para definir o intervalo de valores e a resolução do controle. No exemplo abaixo, é criado um controle de intervalo que retorna valores de 0 a 100 em incrementos de 5, com um valor predefinido de 50.


<input type="range" min="0" max="100" step="5" value="50"/>

Como na verdade o controle de intervalo é um elemento input, se não tiver suporte em um navegador, ele será renderizado como uma caixa de texto com o valor dentro como padrão.

O elemento progress

O elemento progress, definido na seção 4.10.16 da especificação HTML5, cria uma barra que: mostra o progresso de uma tarefa (modo determinado); mostra que uma tarefa está em execução, mas a porcentagem de conclusão não é conhecida (modo indeterminado); ou ambos. Por exemplo, você pode começar exibindo uma barra de progresso indeterminado e trocar para uma barra de progresso determinado depois de ter calculado quanto tempo uma ação vai levar.

Para criar um indicador de progresso que mostre apenas a atividade, não inclua o atributo value. Quando você coloca um atributo value no elemento ou atribui a ele um valor no script, a barra se transforma em determinada. A barra começa em 0 e vai até o valor que você define com o atributo max. Se você omitir o atributo max, o intervalo de progresso irá de 0 até 1. Tanto value como max são números de ponto flutuante.

Sintaxe do modo indeterminado


<progress>fallback text</progress>

Sintaxe do modo determinado


<progress id="progCtrl" max="100" value="50">fallback text</progress>

Se o navegador do usuário não der suporte ao controle de progresso em HTML5, você poderá colocar um texto de fallback entre as marcas (indicado aqui como "fallback text"). Considere a opção de exibir o valor do atributo value como um texto entre as marcas. Por exemplo, escreva um script para atualizar o texto de fallback com algo como "O progresso desta tarefa é de x%", onde x representa o valor atual do atributo value.

O elemento progress também tem um atributo position que é igual ao quociente do valor do atributo value dividido pelo valor do atributo max, ou "-1" se o controle estiver no modo indeterminado. O atributo position é somente leitura.

Exemplo: estado de entrada Range e controle de progresso

O exemplo a seguir combina o estado de entrada Range com um controle de progresso. Quando você carrega a página pela primeira vez, o elemento progress está no modo indeterminado (nenhum valor atribuído). Quando você move a barra deslizante, o valor para o qual a barra é movida é atribuído ao controle de progresso, e eles ficam sincronizados.


<!DOCTYPE html>
<html>

<head>
<title>Range and progress example</title>
<style type="text/css">
input[type=range] {
  padding-left: 0px;
  padding-right: 0px;
}
</style>
<script type="text/javascript">
  function changeValue() {
    document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").value;
  }
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("rangeCtrl").addEventListener('change', changeValue, false);
  }, false);
</script>
</head>

<body>

<progress id="progCtrl" max="100" >Sorry, your browser doesn't support the progress 
element.</progress>
<br><br>
<input id="rangeCtrl" max="100" min="0" step="5" type="range" value="50" />

</body>

</html>


Quando carregado pela primeira vez, este exemplo aparece da seguinte forma no Internet Explorer 10 do Windows 8. Observe que a barra de progresso está no modo indeterminado, o que no Windows 8 é exibido como pontos animados que surgem e somem.

Exemplo de uma barra de progresso indeterminado (no alto) e um controle de intervalo (embaixo).

Se você mover o controle deslizante para a direita (até o valor 75), o exemplo aparecerá como mostrado a seguir. Agora a barra de progresso está no modo determinado e "seguiu" o controle deslizante, adotando um valor correspondente ao dele.

Exemplo de uma barra de progresso determinado (no alto) e um controle de intervalo (embaixo).

Você pode exibir essa página.

Observação  Outros navegadores e sistemas operacionais exibirão a barra de progresso e o controle deslizante de forma diferente.

Para ver uma demonstração prática dos Formulários HTML5 com validação de formulário e entrada, consulte Formulários HTML5 no Test Drive do IE.

Suporte a novos atributos de input

O suporte a novos atributos de input em HTML5, como required, pattern e placeholder, pode ajudar os desenvolvedores a assegurar que os usuários insiram os dados necessários e corretos em uma página da Web.

O atributo required

O atributo required marca um elemento que não pode ser enviado sem um valor. Ele pode ser definido em controles de texto, URL, email, seleção, caixa de seleção ou botão de opção, bem como nos elementos textarea e select. Trata-se de um atributo booliano e só precisa ser especificado em um elemento. Ao focalizarem o mouse em um campo necessário, os usuários veem uma dica de ferramenta avisando que esse é um campo necessário. (Por outro lado, se você tiver definido o atributo title, é isso que será mostrado.)


<form id="yourname">
  <label>Enter your first name: 
    <input name="firstname" type="text" required><input type="submit" value="Go"/>
  </label>
</form>


Se os usuários tentarem enviar um formulário sem inserir alguma informação no campo, será exibida uma mensagem de erro e o foco do cursor passará para o campo que está faltando.

Imagem de exemplo de um campo de entrada com o texto "This is a required field" (Este é um campo necessário) em uma dica de ferramenta.

O atributo pattern

O atributo pattern permite que você defina uma expressão regular com a qual a entrada do usuário deverá coincidir. O atributo pattern está disponível nos elementos input cujo atributo type tenha sido definido como text, search, url, tel, email ou password.


<form>
<label>
  <input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" 
   title="enter a telephone number in   the format (xxx) xxx-xxxx"/>
  <input type="submit"/>
</label>
</form>


Os atributos min, max e step

Os atributos min, max e step são aplicáveis aos controles input cujo atributo type tenha sido definido como number ou range. (Para saber mais sobre os tipos de entrada de range, veja a seção Estado do intervalo, anteriormente neste tópico.)

Os atributos min e max definem os valores mínimo e máximo que serão aceitos.

O atributo step define o intervalo permitido entre os valores. Por exemplo, se min for definido como "0" e step for definido como "1", só serão permitidos os valores 0, 1, 2, 3 e assim por diante. De modo semelhante, se min for definido como "1.1" e step for definido como "1", só serão permitidos os valores 1.1, 2.1, 3.1 e assim por diante.

O exemplo a seguir mostra um campo de entrada que requer um número par entre 0 e 10. Se for inserido um valor fora desse intervalo ou um número ímpar, o envio não será efetuado e uma mensagem de erro será exibida.


<form>
  <label>Enter an even number between 0 and 10: 
    <input type="number" min="0" max="10" step="2"/> 
    <input type="submit"/>
  </label>
</form>


O atributo placeholder e a pseudoclasse :-ms-input-placeholder

Muitas vezes, direcionar o usuário para o campo de entrada correto e indicar como os dados devem ser inseridos pode ser meio caminho andado para receber dados válidos. O suporte ao atributo placeholder permite que você oriente os usuários sobre como inserir os dados corretos nos campos do formulário.

O atributo placeholder define um breve aviso ou texto de exemplo a ser exibido dentro de um campo de entrada. Ele pode ser usado em controles input cujo atributo type tenha sido definido como text, search, url, tel, email e password, assim como em elementos textarea.

Você pode usar o atributo placeholder para colocar um exemplo de entrada correta diretamente no campo de entrada, conforme ilustrado no trecho de código a seguir.


<input name="url" type="url" placeholder="http://www.contoso.com" />

A marcação acima exibirá o texto do espaço reservado no campo até que o foco do cursor esteja nesse campo.

Imagem de um campo de entrada com texto de espaço reservado.

Por padrão, o texto do espaço reservado fica em cinza claro, mas você pode definir o estilo que quiser com CSS (folhas de estilos em cascata) usando o seletor de pseudoclasse :-ms-input-placeholder. O exemplo a seguir realça os campos de rua ("Street") e CEP ("zip code") com um estilo personalizado.


<!DOCTYPE html >
<html>
<head>
  <title>Placeholder style example</title>
  <style type="text/css">
  input  /* normal style */
  {
    background-color:LightGray;
    color:Purple;
  }   
  input.address:-ms-input-placeholder /* placeholder only style */   
  {
    font-style:italic;        
    background-color:yellow;
    color:Red;
  }

  </style></head>
<body>
  <form id="test">
    <p><label>Enter Name: <input id="name" placeholder="Your Name"/></label></p>
    <p><label>Enter Street: <input id="street" class="address" 
placeholder="Your address" /></label></p>
    <p><label>Enter a zip code: <input type="num" pattern="(0-9){5}" 
id="zip" class="address" placeholder="5 digit zip" /></label></p>
    <input type="submit" />
  </form>
</body>
</html>


O texto do espaço reservado será exibido com o estilo especificado até que o campo esteja com o foco, quando então o usuário poderá digitar nele. Quando estiver com o foco, o campo retornará ao estilo normal do campo de entrada e o texto do espaço reservado desaparecerá.

Imagem de três campos de entrada, cada qual com um texto de espaço reservado e personalizado com cores de fundo e texto.

Você pode exibir essa página. (O Internet Explorer 10 é necessário para esta página ser renderizada corretamente.)

O atributo autofocus

O atributo autofocus permite que você guie o usuário para um campo específico direcionando o foco para um campo ou controle após o carregamento de uma página da Web. Isso proporciona orientação e conveniência para o usuário e ajuda a reduzir a necessidade de clicar ou tabular para um controle de formulário quando uma página é aberta.

Apenas um controle em um documento pode ter o atributo autofocus especificado. Se mais de um elemento tiver o atributo, somente o primeiro elemento da página receberá o foco quando ela for aberta. Como esse é um atributo booliano, ele não precisa ser definido como um valor; sua presença implica que ele é "true".


<input name="email" type="text" placeholder="joe@contoso.com" autofocus />

Os atributos novalidate e formnovalidate

O atributo novalidate pode ser definido em elementos form que tenham restrições de validação para permitir que o formulário seja enviado sem validação.

Convém ter vários botões de envio para um formulário; por exemplo, um para enviar o formulário e outro para salvar um formulário parcialmente preenchido ao qual o usuário poderá voltar mais tarde. Você pode fazer com que o botão de envio principal valide elementos do formulário com restrições de validação e impedir que o botão de "salvar para depois" valide tais elementos. Para fazer isso, em vez de definir o atributo novalidate no formulário inteiro, defina o atributo formnovalidate no botão que salva o formulário para depois.

O exemplo a seguir mostra os dois atributos em uso. O atributo formnovalidate está definido no botão Save for Later, enquanto o atributo novalidate está definido no segundo elemento form. Isso quer dizer que, no primeiro formulário, o botão Submit validará os elementos do formulário com restrições de validação, mas o botão Save for Later não fará isso; por outro lado, no segundo formulário, nenhum elemento será validado, quaisquer que sejam as restrições de validação.


<!DOCTYPE html>
<html>
<head>
  <title>novalidate and formnovalidate Example</title>
</head>
<body>
  <form>
    <p><label>*Name: <input type="text" required /></label></p>
    <p><label>*Street: <input type="text" required /></label></p>
    <p><label>*Zip: <input type="text" pattern="[0-9](5|10)" placeholder="5 or 9 digit ZIP" required /></label></p>
    <input type="submit" name=submit value="Submit" />
    <input type="submit" formnovalidate name="save" value="Save for Later" />
    <p>* Required field</p>
  </form>
  <form novalidate>
    <p>Unvalidated area</p>
    <p><label>Name: <input type="text" required /></label></p>
    <p><label>Street: <input type="text" required /></label></p>
    <p><label>Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit zip" required /></label></p>
    <input type="submit" name=submit value="Submit" />
  </form>
</body>
</html>


Mensagens personalizadas de erro de validação

O Internet Explorer 10 exibe mensagens genéricas sobre diversos erros de validação em elementos input. Você pode personalizar essas mensagens usando o atributo title no elemento input. O conteúdo do atributo title é, ao mesmo tempo, mostrado como um texto de dica de ferramenta para o campo e acrescentado à mensagem genérica de erro de incompatibilidade de padrão. O exemplo a seguir mostra como um campo de entrada de telefone pode exibir para os usuários uma indicação de como o número deve ser formatado.


<form>
  <label>Enter a phone number: 
  <input type="text" title="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
  <input type="submit" />
  </label>
</form>


Se o usuário omitir os traços ou digitar letras no campo, aparecerá a resposta a seguir. O texto "You must use this format: " (Você deve usar este formato) é automático.

Imagem de um campo de entrada de telefone, com um texto de dica de ferramenta indicando o formato correto.

Aviso de Caps Lock em campos de senha

Para ajudar os usuários a perceberem mais rapidamente que estão digitando a senha errada porque a tecla Caps Lock está ligada, o Internet Explorer 10 e os aplicativos da Windows Store em JavaScript adicionam uma mensagem de aviso quando o foco está em um campo de entrada com type de password e a tecla Caps Lock está ligada. Nenhuma codificação adicional é necessária.

Imagem de um campo de entrada de senha com um texto de dica de ferramenta avisando que a tecla Caps Lock está ativada.

Estilização de campos validados usando as pseudoclasses :valid e :invalid

Fornecer comentários visuais aos usuários indicando se a entrada especificada por eles é válida ou se pode proporcionar uma experiência melhor do que uma mensagem de erro. O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript são compatíveis com as pseudoclasses CSS :valid e :invalid. Com esses seletores, você pode definir o estilo de um campo de entrada com base no tipo de entrada ou em um padrão. Por exemplo, um campo de URL pode ficar com uma borda vermelha até que um endereço formatado corretamente seja inserido.

Um campo necessário será inválido até que a entrada correta seja fornecida. Um campo que não é necessário, mas inclui validação, como um campo de URL, será válido até que um texto seja inserido.

Também é possível definir o estilo de campos necessários ou opcionais com as pseudoclasses :required e :optional, respectivamente. Os campos "necessários" foram descritos em uma seção anterior. Os campos "opcionais" são definidos como quaisquer campos input que possam aceitar o atributo required, mas não o tenham definido, bem como quaisquer elementos textarea e select que não tenham o atributo required definido.

O exemplo a seguir coloca uma borda verde em um campo quando ele é válido e uma borda vermelha com texto em negrito quando ele não é. O campo de email é necessário, mas os outros não são. O campo de URL vem previamente preenchido com uma URL inválida, de modo que não é válido quando a página é aberta. Além disso, os dois campos opcionais são estilizados com um fundo cinza claro e o campo necessário, com um fundo amarelo para chamar a atenção.


<!DOCTYPE html >
<html>
<head>
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border :solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid { 
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required{
    background-color:Yellow;
  }
  #PC1 input:optional{
    background-color:LightGray;
  }       
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>
  </form>
</body>
</html>


Quando você começa a digitar um endereço de email no respectivo campo, ele aparece da seguinte maneira:

Imagem de vários campos de entrada. O campo de entrada de email tem um endereço de email incompleto, o que é indicado pela cor da borda (vermelha).

Depois que você digita um endereço de email (sintaticamente) válido, a cor da borda do campo muda de vermelho para verde e o texto não fica mais em negrito, como mostrado aqui.

Imagem de vários campos de entrada. O campo de entrada de email tem um endereço de email completo, o que é indicado pela cor da borda (verde).

Com essa definição de estilo, os campos dão um feedback imediato ao usuário, pois mudam enquanto ele digita.

Você pode exibir essa página. (O Internet Explorer 10 ou um navegador com suporte às pseudoclasses de validação de formulário é necessário para que essa página seja renderizada corretamente.)

Métodos, atributos e objetos DOM para validação de entrada

Foram adicionadas ao Internet Explorer 10 e aos aplicativos da Windows Store que usam JavaScript novas APIs que habilitam o acesso via programação ao status de validação de formulários e elementos que usam JavaScript.

O método checkValidity [para HTMLFormElement]

O método checkValidity valida estaticamente as restrições (conforme descrito na Seção 4.10.21.2 da especificação HTML5) do elemento form e retorna "true", se a validação das restrições retorna um resultado positivo ou "false", se ela retorna um resultado negativo.

O método checkValidity [para HTMLInputElement e todos os outros elementos de formulário]

O método checkValidity verifica se o elemento é válido e retorna "true" se ele for. Caso contrário, retorna "false". Se o elemento não for válido, também será disparado um evento invalid simples, que é cancelável, mas não tem um evento padrão.

O atributo willValidate

O atributo willValidate retorna "true" se um elemento pode ser validado (como o tipo de entrada url ou email, ou um elemento com o atributo validation definido); caso contrário, retorna "false".

O atributo validity

O atributo validity retorna um objeto de estado de validade (ValidityState) para o elemento. O objeto é dinâmico, e o mesmo objeto é retornado cada vez que o atributo é recuperado.

O atributo validationMessage

O atributo validationMessage retorna a mensagem de erro que é exibida com base no estado atual do formulário. Por exemplo, se o formulário for enviado nesse momento, ele será inválido.

O método setCustomValidity (em Erro de DOMString)

O método setCustomValidity define a mensagem personalizada de erro de validação para um elemento.

O objeto ValidityState

O objeto ValidityState retorna "true" ou "false" para os seguintes atributos boolianos somente leitura:

AtributoDescrição

valueMissing

O usuário não inseriu um valor em um campo necessário.

typeMismatch

O usuário inseriu algo que não está na sintaxe correta, por exemplo, uma URL ou um endereço de email com formatação incorreta.

patternMismatch

O usuário inseriu algo que não corresponde ao que é especificado pelo atributo pattern, como letras onde são esperados números.

tooLong

Um controle tem um valor mais longo do que o que é especificado pelo atributo maxlength. Como o Windows Internet Explorer permite que um usuário digite apenas o número maxlength de caracteres, geralmente isto ocorre quando o valor padrão contém um número excessivo de caracteres.

rangeUnderflow

O usuário inseriu um valor menor do que o que era especificado pelo atributo min.

rangeOverflow

O usuário inseriu um valor maior do que o que era especificado pelo atributo max.

stepMismatch

O usuário inseriu um valor que não corresponde a um valor permitido conforme especificado pelos atributos step e min. Por exemplo, o usuário inseriu um número ímpar quando eram esperados números pares.

customError

O controle tem uma mensagem definida pelo método setCustomValidity do elemento (a cadeia de caracteres não está vazia).

valid

Nenhuma outra condição é verdadeira.

 

Referência de API

:invalid
:optional
:required
:valid
checkValidity
input
progress
setCustomValidity
validationMessage
validity
ValidityState
willValidate

Amostras e tutoriais

Exemplo de controles de formulário
Exemplo de validação de formulário

Demonstrações do Test Drive do Internet Explorer

Controles Touch First

Postagens no blog do IE

Diretrizes para criar sites de navegação por toque

Especificação

HTML5: Seção 4.10

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.