Formulário do jQuery Mobile

O jQuery Mobile adiciona automaticamente um excelente estilo fácil de tocar aos formulários HTML.

Estrutura de formulário do jQuery Mobile

O jQuery Mobile usa CSS para definir o estilo dos elementos de formulário HTML, tornando-o mais atraente e fácil de usar.

No jQuery Mobile, você pode usar os seguintes controles de formulário:

  • Caixa de texto
  • Caixa de pesquisa
  • Caixa de seleção única
  • Caixa de seleção
  • Menu de seleção
  • Barra de deslizamento
  • Interruptor de troca de página

Quando você lida com formulários do jQuery Mobile, deve saber as seguintes informações:

  • O elemento <form> deve definir os atributos method e action.
  • Cada elemento de formulário deve definir um atributo "id" único. Este id deve ser único nas páginas do site. Isso é porque o modelo de navegação de uma página do jQuery Mobile permite que várias "páginas" sejam apresentadas ao mesmo tempo.
  • Cada elemento do formulário deve ter um rótulo (label). Defina a propriedade for do rótulo para correspondência com o id do elemento.

Exemplo

<form method="post" action="demoform.asp">
  <label for="fname">Primeiro nome:</label>
  <input type="text" name="fname" id="fname">
</form>

Experimente você mesmo

Para ocultar o rótulo, use a classe ui-hidden-accessible. Isso é comum quando você precisa que o atributo placeholder do elemento atue como rótulo:

Exemplo

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Nome:</label>
  <input type="text" name="fname" id="fname" placeholder="Nome...">
</form>

Experimente você mesmo

Contêiner de campo

Se desejar que o rótulo e o elemento do formulário sejam exibidos corretamente na tela larga, use o elemento <div> ou <fieldset> com a propriedade data-role="fieldcontain" para embasar o rótulo ou o elemento do formulário:

Exemplo

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">Primeiro nome:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Sobrenome:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Experimente você mesmo

Dica:A propriedade fieldcontain define os estilos do rótulo e dos componentes do formulário com base na largura da página. Quando a largura da página for maior que 480px, ele colocará automaticamente o rótulo e o componente do formulário na mesma linha. Quando for menor que 480px, o rótulo será colocado acima do elemento do formulário.

Dica:Para evitar que o jQuery Mobile ajuste automaticamente estilos para elementos clicáveis, use a propriedade data-role="none":

Exemplo

<label for="fname">Primeiro nome:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Experimente você mesmo

Submeter formulário no jQuery Mobile

Dica:O jQuery Mobile submeterá automaticamente o formulário via AJAX e tentará integrar a resposta do servidor ao DOM da aplicação.