Criando aplicativos HTML5

Web Forms melhores com formulários em HTML5

Brandon Satrom

Baixar o código de exemplo

Se você é um desenvolvedor da Web, provavelmente já criou um formulário HTML. Na realidade, você deve ter criado mais deles do que gostaria de se lembrar. Sem dúvida, você está familiarizado com os tipos clássicos de entrada como texto, senha, arquivo, oculto, caixa de seleção, opção, enviar e botão e, provavelmente, usou a maioria deles, ou todos eles, várias vezes.

Se fôssemos perguntar que tipo de entrada da lista acima você mais usa, você provavelmente diria “texto”, assim como a maioria de nós diria. O tipo de entrada texto é a ferramenta de mil utilidades do desenvolvimento clássico de formulários HTML. Por um lado, ele é capaz de se adaptar a quase qualquer tarefa que lhe for designada, mas, por outro lado, ele é semanticamente neutro, de modo que o navegador não oferece nenhuma ajuda para tornar esse elemento em algo prático. Para compensar, desenvolvedores e designers acrescentaram suas próprias semânticas a esses elementos (via IDs e nomes de classes) e vêm contando com que estruturas de servidores e o JavaScript manipulem a validação e acrescentem interações avançadas.

Um exemplo clássico é a coleta de datas em campos de texto. Na maioria das vezes, você quer aprimorar um campo de data com um seletor de datas de algum tipo. Frequentemente, isso é feito manualmente com JavaScript ou com uma estrutura jQuery UI, que acrescenta um comportamento de interação que permite ao usuário selecionar a data a partir de um widget e fazer com que aquela data seja inserida no campo original.

Por mais que esse padrão seja útil — e nós, como desenvolvedores, nos tornamos bem adeptos a padrões desse tipo — ele se repete tão frequentemente que não podemos evitar perguntar: “Por que o navegador não pode fazer isso”?

A boa notícia é que, com formulários HTML5, os browsers podem e vão fazê-lo. Além do texto e da quantidade de tipos existentes que temos tido há anos, o HTML5 acrescenta 13 novos valores ao atributo do tipo entrada, assim como uma série de outros atributos que irão acelerar seu desenvolvimento de formulários. Neste mês, vou compartilhar alguns dos novos tipos de entradas e atributos fornecidos com formulários HTML5, assim como o status de suas implementações em vários navegadores. Em seguida, vou apresentar uma visão geral resumida de novos recursos de validação de cliente para formulários HTML5. Por fim, vou analisar como recentes atualizações do Visual Studio 2010 e do Microsoft .NET Framework 4 habilitam formulários HTML5 e Web Forms de ASP.NET a funcionarem bem juntos. No decorrer deste artigo, vou discutir como você pode adotar formulários HTML5 em seus aplicativos hoje, e, ao mesmo tempo, fornecer soluções fallback para navegadores mais antigos. Todas as demonstrações deste artigo, que se encontram disponíveis online, foram criadas usando o WebMatrix, uma ferramenta de desenvolvimento para a Web grátis e simples, da Microsoft. Você mesmo pode experimentar o WebMatrix em aka.ms/webm.

Novos tipos de entradas no HTML5

O que conhecemos hoje como formulários em HTML5 ou Web Forms em HTML5 começou como Web Forms 2.0, uma especificação anterior à especificação do HTML5 criada por um grupo conhecido como o Web Hypertext Applications Technology Working Group, ou WHATWG. Grande parte do trabalho inicial do WHATWG tornou-se o ponto de partida do que chamamos hoje de HTML5, e o esforço do Web Forms 2.0 faz agora parte da especificação oficial do HTML5, que está disponível em bit.ly/njrWvZ. Uma parte significativa da especificação é dedicada a novos tipos e atributos de conteúdo para o elemento de entrada, que podem ser encontrados embit.ly/pEdWFs.

Como mencionei, a especificação introduz 13 novos tipos de entrada para uso em formulários: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range e color.

O uso desses novos tipos é fácil. Digamos que eu queira colocar um novo campo de email em um formulário de pedido. Como se pode ver na Figura 1, eu modifiquei a página de pedido do modelo para padaria em WebMatrix com alguns campos adicionais, inclusive email.

A Sample Order Form
Figura 1 Um exemplo de formulário de pedido

Para esse formulário, o campo de email é marcado da seguinte maneira:

<input type="email" id="orderEmail" />

Observe que o atributo type é igual a “email” em vez de “text”. O melhor de tudo sobre os novos tipos de entrada HTML é que você pode usá-los hoje e, até certo ponto, eles funcionarão em qualquer navegador. Quando um navegador encontra um desses novos tipos, ocorrerá uma de duas possibilidades.

Se o navegador não dá suporte aos novos tipos de entrada, a declaração de tipo não será reconhecida. Nesse caso, o navegador irá degradar naturalmente e tratar o elemento como do tipo “text”. Você pode tentar isso colocando esse elemento em um formulário digitando “document.getElementById(‘orderEmail’).type” no console de ferramentas F12 do Internet Explorer 9. Assim, você pode usar esses novos tipos hoje e, se o navegador não suportar um determinado campo, ele continuará funcionando exatamente como um campo de texto normal.

Entretanto, se o navegador reconhecer um tipo você ganhará benefícios imediatos ao usá-lo. Para tipos reconhecidos, o navegador adiciona alguns comportamentos internos específicos de tipo. No caso do tipo email, a visualização de plataforma 2 (PP2) e posterior do Internet Explorer 10 irá automaticamente validar qualquer entrada e apresentar ao usuário uma mensagem de erro se o valor fornecido não for um endereço de email válido, como mostra a Figura 2.

Automatic Browser Validation of the Email Input Type
Figura 2 Validação automática pelo navegador do tipo de entrada de email

É fácil inferir o objetivo e comportamento de cada elemento por seu tipo, de modo que podemos rapidamente chegar a outro nível de sofisticação semântica em nossos formulários. Além do mais, alguns desses novos tipos de entrada permitem ao navegador oferecer interações mais sofisticadas a usuários criativos. Por exemplo, se eu colocar o elemento a seguir em um formulário e depois abrir esse formulário em um navegador que dá suporte completo ao tipo de entrada de data, a interação padrão será muito mais sofisticada do que uma simples caixa de texto:

<input type="date" id="deliveryDate" />

AFigura 3 mostra o que o tipo de data pode fornecer no Opera 11.5. O melhor é que tudo que precisei fazer para conseguir essa interação foi especificar o tipo de data e o navegador executou todo o trabalho manual que, anteriormente, eu teria que realizar em JavaScript para oferecer esse nível de funcionalidade.

The Date Input Type in Opera 11.5
Figura 3 O tipo de entrada de data no Opera 11.5

É importante notar que a especificação do HTML5 não indica a maneira como os navegadores devem apresentar esses novos tipos de entrada ou como eles devem apresentar erros de validação, de modo que você deve esperar ver diferenças, algumas sutis e outras significativas, entre navegadores. Por exemplo, o Chrome 13 apresenta um controle giratório em vez de um seletor de datas, como mostra a Figura 4 (que, é claro, deverá ter mudado quando você ler este artigo). Você deve também saber que há discussões em andamento no World Wide Web Consortium, ou W3C, sobre definição de estilo de navegadores e localização de elementos como datetime, date e color. Atualmente, nem todos os navegadores concordam na maneira de implementar esses tipos e não há nenhum mecanismo atual para personalização nas implementações existentes que seja semelhante ao que você encontraria com o jQuery UI. Caso você decida implementar ou experimentar esses novos tipos, assegure-se sempre de providenciar uma solução fallback completa. Além disso, se consistência na apresentação e comportamento forem importantes para seus usuários, você poderá precisar aplicar estilos personalizados, substituir comportamentos padrão nesses controles ou usar uma solução baseada em script.

The Date Input Type in Chrome 13
Figura 4 O tipo de entrada de data no Chrome 13

Anteriormente, mencionei que esses campos ainda se comportarão como campos de texto normais, o que implica numa bela degradação natural a nós oferecida pelos navegadores. Mas um campo de data implementado como uma caixa de texto normal é desajeitado e amplamente considerado como uma experiência insatisfatória para o usuário. Entretanto, com um pouco de ajuda do Modernizr e do jQuery UI, você pode oferecer uma solução que combine o melhor dos formulários em HTML5 com uma bela solução fallback.

Você irá se lembrar do meu último artigo (msdn.microsoft.com/magazine/hh394148) que o Modernizr (modernizr.com) é uma biblioteca de JavaScript que pode ajudá-lo a detectar suporte a recursos HTML5 no navegador. Para esse exemplo, eu quero usar o Modernizr para ajudar na detecção de suporte ao tipo de entrada de data em HTML5 e, no caso de ele não ser suportado, usar o widget datepicker do jQuery UI (jqueryui.com) para oferecer uma experiência de usuário similar. Uma vez que eu tenha baixado e adicionado referências para o Modernizr, o jQuery e o jQuery UI, eu poderei adicionar suporte fallback aos meus elementos de data com apenas algumas linhas de código:

if (!Modernizr.inputtypes.date) {
  $("input[type=date]").datepicker();
}

O resultado, como visto no Internet Explorer 10 PP2, está representado na Figura 5.

Date Field Support with jQuery UI
Figura 5 Suporte a campo de data com o jQuery UI

Novos atributos de conteúdo de entrada em HTML5

Além dos novos tipos de entrada, o HTML5 oferece novos atributos de conteúdo que podem ser usados em campos de entrada para fornecer suporte a validação e funcionalidade avançada. Um desses novos atributos é o “espaço reservado”, o qual, de acordo com a especificação, “…representa uma pequena dica (uma palavra ou uma frase curta) destinada a auxiliar o usuário na entrada de dados” (ênfase dos autores). Por exemplo, eu posso escolher alguns campos de nosso formulário de pedido e adicionar o espaço reservado=“algum texto” a cada campo, obtendo o resultado mostrado na Figura 6:

<input type="email" id="orderEmail" placeholder="ex. name@domain.com" />
<input type="url" id="orderWebsite" placeholder="ex. http://www.domain.com" />

Using the Placeholder Attribute with Input Fields
Figura 6 Usando o atributo espaço reservado com campos de entrada

O espaço reservado tem cor mais suave que o texto normal e se eu me concentrar em cada campo o texto desaparece, permitindo que eu entre com meu próprio valor.

Assim como os novos tipos de entrada, o atributo espaço reservado não é suportado em navegadores mais antigos. No entanto, nada de errado acontecerá se um usuário visitar uma página que os contenha, então, considere usá-los hoje, mesmo que você não planeje adicionar suporte a navegadores mais antigos. Se você deseja oferecer “suporte retroativo” a espaço reservado, o Modernizr pode ajudá-lo. Conforme mencionei em meu último artigo, nossos amigos do Modernizr tentam manter uma lista atualizada com todos os suportes retroativos e fallbacks que você possa querer para um determinado recurso do HTML5. Consulte essa lista em bit.ly/nZW85d.

Neste exemplo, vamos usar o espaço reservado em jQuery do HTML5 criado por Mike Taylor, que pode ser baixado em bit.ly/pp9V4s. Uma vez instalado, adicione o seguinte a um bloco de scripts referenciado por sua página:

Modernizr.load({
    test: Modernizr.input.placeholder,
    nope: "../js/html5placeholder.jquery.min.js",
    callback: function() {
      $('input[placeholder]').placeholder();
    }
  });

Aqui, o Modernizr testa se o atributo de espaço reservado é suportado e, caso não o seja, carrega o html5placeholder.jquery.min.js. jQuery e, em seguida, seleciona cada elemento com um atributo de espaço reservado e adiciona suporte de plug-in a cada um deles. Se você experimentar isso com o Internet Explorer 9, irá notar que o resultado final se parece muito com o suporte nativo a navegador definido no Internet Explorer 10 PP2.

Outro novo atributo interessante é o “autofocus”, que, como o nome sugere, permite que você especifique um único campo de formulário a automaticamente receba atenção quando uma página for carregada. Somente um campo por página deve conter esse atributo. Se vários elementos forem marcados com o autofocus, o primeiro a ter essa declaração receberá a atenção durante o carregamento da página. Em meu formulário de pedido, eu quero que o campo de nome receba atenção, então eu adiciono o atributo da seguinte maneira:

<input type="text" class="field" id="orderName" autofocus />

O atributo autofocus pode ser usado em qualquer controle de formulário e é uma excelente alternativa às estratégias baseadas em script e concentradas em forma com as quais muitos desenvolvedores de site lutaram no passado.

Validação de formulário em HTML5

Eu não tenho espaço para abordar aqui todos os interessantes e novos atributos relacionados à forma, mas vou gastar algum tempo discorrendo sobre “required”, “pattern”, “novalidate” e “formnovalidate”, todos os quais tornam muito fácil a validação de formulário do lado do cliente.

Para navegadores que lhe dão suporte, o atributo “required” informa ao navegador que esse formulário não pode ser submetido em branco. Por exemplo, eu adiciono “required” ao campo de nome de meu formulário de pedido:

<input type="text" class="field" id="orderName" required />

Ao visitar essa página no Internet Explorer 10 PP2 e tentar submeter o formulário, eu vejo algo como o que está mostrado na Figura 7. Com um único atributo, o navegador tem bastante informação para dar ao elemento o estilo de borda vermelha e exibir uma mensagem ao usuário indicando que o campo é necessário.

Using the Required Attribute on a Form Field
Figura 7 Usando o atributo required em um campo de formulário

Anteriormente, a Figura 2 mostrou como o navegador pode automaticamente validar certos tipos como “email” e “url”, sem entrada adicional por parte do usuário. Com o atributo “pattern”, você pode fornecer seu próprio teste de validação para tipos de entrada. De acordo com a especificação do HTML5, “pattern” espera uma a expressão regular, que o navegador usa para validar o campo que a contém.

Meu pedido contém um campo de telefone (tipo=“tel”) e eu posso especificar um padrão de validação como o seguinte:

<input type="tel" id="orderTelephone" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" title="(xxx) xxx-xxxx" />

Essa expressão regular (não muito complexa) informa ao navegador que ele deve esperar por um número de 7 dígitos, com o código de área entre parênteses e um traço no número local. Inserir qualquer outra coisa resulta na mensagem mostrada na Figura 8. Observe que a mensagem contém instruções ao usuário sobre como formatar a entrada: “(xxx) xxx-xxxx”. Essa parte da mensagem é retirada do atributo title do mesmo elemento, de modo que é possível controlar pelo menos parte da mensagem de validação por meio da sua marcação. Há, porém, algo que deve ser observado quando se usa title para auxiliar na validação. De acordo com a especificação, o navegador pode decidir por mostrar o título em outros caso sem erro, portanto não conte com esse atributo como substituto para texto disparador de alarme de erro.

Using the Pattern Attribute to Specify a Validation Expression
Figura 8 Usando o atributo de padrão para especificar uma expressão de validação

Automatizar a validação pelo navegador é bom, mas duas questões imediatas vêm à mente. Primeiro, o que dizer sobre scripts de validação de servidor ou de validação de cliente por minha estrutura de servidor (ASP.NET MVC, por exemplo)? E segundo, o que dizer sobre casos onde eu quero que o usuário seja capaz de salvar o formulário como um trabalho em andamento, sem validação? O primeiro, infelizmente, está fora do escopo deste artigo, mas eu escrevi uma postagem de blog sobre esse mesmo assunto sobre o ASP.NET MVC, a qual pode ser encontrada em bit.ly/HTML5FormsAndMVC.

A segunda pergunta, por outro lado, é fácil. Vamos supor que você tenha um formulário com o qual os usuários perderão um bom tempo antes de enviá-lo, talvez até salvando-o várias vezes antes de publicá-lo em seu servidor. Para tais casos, onde você deseja permitir que um usuário submeta um formulário sem validação, há dois atributos que você pode usar: “formnovalidate”, que é colocado em campos de entrada do tipo “submit” e “novalidate”, que é colocado em uma marca de formulário de abertura. Aqui, vou colocar dois campos de envio em meu formulário, da seguinte maneira:

<input type="submit" value="Place Order" />
<input type="submit" formnovalidate value="Save for Later" id="saveForLater" />

O atributo “formnovalidate” no segundo botão desativará a validação e enviará o formulário, permitindo que o trabalho em andamento do usuário seja salvo em meu banco de dados, ou mesmo no lado do cliente, usando uma nova tecnologia de armazenagem como localStorage ou IndexedDB.

Formulários em HTML5 e Web Forms do ASP.NET

Antes de concluir este artigo, quero compartilhar algumas informações adicionais relativas a formulários em HTML5 para desenvolvedores de Web Forms em ASP.NET. Se você planeja desenvolver formulários em HTML com Web Forms do ASP.NET, tenho boas notícias: Muitas atualizações relacionadas a HTML5 do .NET e Visual Studio estão sendo lançadas fora de banda, de modo que você não precisa aguardar pela próxima versão da estrutura para usar esses recursos hoje.

Para começar com formulários em HTML5 Web Forms do ASP.NET, você precisará obter algumas atualizações. Primeiro, certifique-se de ter o Visual Studio 2010 SP1 (bit.ly/nQzsld). Além de adicionar suporte aos novos tipos e atributos de entrada do HTML5, o service pack também fornece algumas atualizações que permitem que você use os novos tipos de entrada do HTML5 no controle de servidor da caixa de texto. Sem essa atualização, você veria erros de tempo de compilação ao usar os novos tipos.

Convém ainda obter a atualização de confiabilidade 1 do Microsoft .NET Framework 4 (bit.ly/qOG7Ni). Essa atualização foi criada para corrigir diversos problemas relacionados ao uso de novos tipos de entrada do HTML5 com Web Forms do ASP.NET. Scott Hunter aborda alguns deles — UpdatePanel, Validation Controls e Callbacks — em uma postagem de blog do início de agosto, que você pode consultar em bit.ly/qE7jLz.

A adição de suporte de Web Forms a navegadores com HTML5 é uma boa notícia para desenvolvedores de sites por toda a parte. Não só temos um conjunto de tipos de entrada semânticos para aproveitar em nossos aplicativos, como podemos também usar esses tipos de entrada hoje, sem nenhum dano, em navegadores mais antigos, ao mesmo tempo em que conseguimos funcionalidade aprimorada — inclusive validação automática de cliente — nos mais recentes. O uso desses novos campos traz também benefícios imediatos à área de aplicativos móveis, aonde o uso de tipos como “url” e “email” irão solicitar aos dispositivos móveis que apresentem ao usuário opções de teclado virtual ajustadas àquele tipo de entrada. Quando você combina esses novos recursos ao Modernizr e uma das excelentes opções de suporte retroativo, você tem todas as ferramentas de que precisa para adotar imediatamente formulários em HTML5 em seu aplicativo.

Para obter mais informações sobre suporte a formulários em HTML5 na Internet Explorer 10 PP2, visite ietestdrive.com, e não se esqueça de consultar o guia do desenvolvedor no Internet Explorer Developer Center (bit.ly/r5xKhN). Para aprofundar-se mais em formulários em HTML5 em geral, recomendo o capítulo sobre uma forma de loucura do livro de Mark Pilgrim “HTML5: Up and Running” (O’Reilly Media, 2010), assim como a seção sobre formulários da especificação W3C do HTML5 (bit.ly/nIKxfE).     

Brandon Satrom *trabalha como desenvolvedor e divulgador da Microsoft nos arredores de Austin, Texas. Ele mantém um blog em userinexperience.com e pode ser seguido no Twitter como @BrandonSatrom.*

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: *Jon BoxJohn Hrvatin, Scott Hunter e *Clark Sell