Elementos de entrada de formulário do jQuery Mobile

Entrada de texto do jQuery Mobile

Os campos de entrada são escritos com elementos HTML padrão, o jQuery Mobile define estilos bonitos e fáceis de usar específicos para dispositivos móveis. Você também pode usar os novos tipos de <input> do HTML5:

Exemplo

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Nome Completo:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Data de Nascimento:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Seu endereço de e-mail..">
  </div>
</form>

Experimente por Si Mesmo

Dica:Use placeholder para especificar uma breve dica que descreve o valor esperado do campo de entrada:

<input placeholder="sometext">

Caixa de texto

Use <textarea> para implementar entrada de texto em múltiplas linhas.

Notas:A caixa de texto se expande automaticamente para se adaptar à linha de texto que você inserir.

Exemplo

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Informações Adicionais:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Experimente por Si Mesmo

Caixa de pesquisa

O tipo de entrada type="search" é uma nova tipo no HTML5, usado para definir um campo de texto para entrada de palavras-chave de pesquisa:

Exemplo

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Search:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Experimente por Si Mesmo

Botões de opção

Os botões de opção são usados quando o usuário escolhe apenas uma das opções limitadas.

Para criar um conjunto de botões de opção única, adicione um elemento input com type="radio" e o correspondente label. Envolva os botões de opção em um elemento <fieldset>. Você também pode adicionar um elemento <legend> para definir o título do <fieldset>.

Dica:Use a propriedade data-role="controlgroup" para combinar esses botões:

Exemplo

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Escolha seu gênero:</legend>
      <label for="male">Masculino</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Feminino</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Experimente por Si Mesmo

Caixa de seleção

As caixas de seleção são usadas quando o usuário escolhe uma ou mais opções de uma quantidade limitada:

Exemplo

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Escolha quantas cores favoritas quiser:</legend>
      <label for="red">Vermelho</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Verde</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Azul</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Experimente por Si Mesmo

Mais exemplos

Para agrupar caixas de seleção ou caixas de seleção horizontalmente, use a propriedade data-type="horizontal":

Exemplo

<fieldset data-role="controlgroup" data-type="horizontal">

Experimente por Si Mesmo

Você também pode usar contêiner de domínio para embalar <fieldset>:

Exemplo

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Escolha seu gênero:</legend>
  </fieldset>
</div>

Experimente por Si Mesmo

Se você desejar "marcar prévia" um dos botões, use a propriedade checked do tag HTML <input>:

Exemplo

<input type="radio"> checked>
<input type="checkbox"> checked>

Experimente por Si Mesmo