Site Overlay

Formulário Mobile HTML

Enquanto campos como email ou url podem parecer desnecessários ou problemáticos devido a inconsistências entre navegadores, eles possuem uma funcionalidade muito interessante quando usados em navegadores de dispositivos móveis, como tablets ou celulares com iOS ou Android.

Os aparelhos apresentam um teclado diferente ao usuário no momento de interagir com campos específicos. Para um campo com type=’number’, o teclado já exibe as teclas de números e não as letras. Para o campo de e-mail, o teclado padrão recebe a adição de um botão de arroba (@). E no caso de campos com type=”url”, o iOS gentilmente exibe um botão para se digitar ‘.com’ com apenas um toque. Apesar de não ser um padrão definido entre os fabricantes, essas mudanças são muito úteis para os usuários – lembre-se de tirar proveito desses campos para facilitar a vida dos seus usuários que usam tais dispositivos.

O Wufoo é um site que permite criar formulários sem precisar entender ou escrever HTML ou CSS e você consegue usá-los em outros sites para receber mensagens de contato, criar pesquisas e até receber pagamentos. Com o foco constante em melhorar seus formulários e prover diversas funcionalidades em cima deles.

Os desenvolvedores do Wufoo criaram uma ótima referência para os novos tipos de campos e as novas funcionalidades de formulários presentes no HTML5.

Vamos começar com um exemplo básico porém bem refinado de um formulário: uma página de contato contendo campos para e-mail, assunto e mensagem. Esse formulário terá dicas explicando como a informação deve ser preenchida em cada campo. Além disso, iremos preparar elementos para notificar os usuários caso haja problemas de validação no formulário – um passo que sempre deve ser levado em consideração ao criar páginas como essa.

Vamos começar com a tag form, o campo de e-mail e um botão de envio:

<form method=’post’ action=”>

<label for=’email’>E-mail:</label>

<input type=’email’ id=’email’ name=’email’>

<button>Enviar mensagem</button>

</form> 

Nosso formulário está com o method definido como post, já que pretendemos criar uma mensagem de contato no site. Com o valor do atributo action com o valor vazio, o navegador irá enviar os dados do formulário para o mesmo endereço da página atual: se estamos em http://meusite/contato, ao clicar no botão de envio os dados irão para o mesmo http://meusite/contato através do método post. 

Para separar o campo e botão de envio, vamos colocar os elementos do formulário dentro de parágrafos com a tag p.

<p>

<label for=’email’>E-mail:</label>

<input type=’email’ id=’email’ name=’email’>

</p>

No mesmo modelo, podemos adicionar os outros campos do formulário – um campo de texto para o assunto da mensagem e uma caixa de texto para o corpo da mensagem:

<p>

<label for=’subject’>Assunto:</label>

<input type=’text’ id=’subject’>

</p>

<p>

<label for=’content’>Mensagem:</label>

<textarea id=’content’></textarea>

</p>

Com a estrutura básica e os campos necessários do nosso formulário, podemos passar para o próximo passo, adicionando regras de estilo para o nosso formulário.

Perceba que a marcação em cada tipo de campo é o que ajudará o formulário a ser melhor interpretado em dispositivos móveis. A partir da marcação, o comportamento do aparelho em cada  um dos campos será alterado, proporcionando assim uma melhor experiência ao usuário.

8

Source: scriptcase / Formulário Mobile HTML

Comments

comments

Leave a Reply

Your email address will not be published.