jQuery Mobile automaticamente formulários HTML de estilo para torná-los olhar atraente e amigável ao toque.
jQuery Mobile Form Estrutura
jQuery Mobile usa CSS para estilizar elementos de formulário HTML, tornando-os atraentes e fáceis de usar.
Em jQuery Mobile pode utilizar os seguintes controles de formulário:
- Entradas de texto
- pesquisa Entradas
- Botões do rádio
- checkboxes
- Selecione Menus
- sliders
- Chaves de alternação aleta
Ao trabalhar com formas jQuery Mobile você deve saber:
- O <form> elemento deve ter um método e um atributo action
- Cada elemento de formulário deve ter um atributo exclusivo "id". O id deve ser exclusivo entre as páginas do site. Isto é porque o modelo de navegação de página única do jQuery Mobile permite que muitos "páginas" diferentes para estar presente ao mesmo tempo
- Cada elemento de formulário deve ter um rótulo. Definir o atributo do rótulo para coincidir com o id do elemento
Exemplo
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Tente você mesmo " Dica: Use um espaço reservado para especificar uma pequena dica que descreve o valor esperado de um campo de entrada:
Exemplo
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Tente você mesmo " Dica: Para ocultar o rótulo, use o "ui-hidden-accessible" classe. Isso é muitas vezes usado quando você quer atributo espaço reservado do elemento para servir como o rótulo:
Exemplo
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Tente você mesmo " Dica: Se você quer um "clear button" (um ícone X no lado direito do campo de entrada que limpa o conteúdo do campo), adicione a-btn data-clear = "true" atributo:
Exemplo
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Tente você mesmo " O "clear button" pode ser adicionado em qualquer <input> elemento, exceto para <textarea> . Campos de pesquisa têm este atributo definido como "true" como padrão - para mudá-lo, basta especificar data-clear-btn="false" .
jQuery Mobile botões de formulário
Botões em formas são codificados com padrão HTML <input> elementos (botão, Reset, enviar). Eles são denominados automaticamente, tornando-os atraentes e fáceis de usar em ambos os dispositivos móveis e computadores de mesa:
Exemplo
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Tente você mesmo " Para estilizar adicionalmente um <input> botão, use qualquer um dos atributos * de dados listados na tabela abaixo:
Valor negrito indica valor padrão.
| Atributo | Valor | Descrição |
|---|---|---|
| data-corners | true | false | Especifica se o botão deve ter cantos arredondados ou não |
| data-icon | Icons Reference | Especifica o ícone do botão |
| data-iconpos | left | right | top | bottom | notext | Especifica a posição do ícone |
| data-inline | true | false | Especifica se o botão deve ser em linha ou não |
| data-mini | true | false | Especifica se o botão deve ser pequeno ou não |
| data-shadow | true | false | Especifica se o botão deve ter sombras ou não |
Incluir ou excluir o atributo (s) que você quer / não quer:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Tente você mesmo " Field Containers
Para tornar os rótulos e elementos de formulário olhar corretamente em telas mais amplas, enrole uma <div> ou <fieldset> elemento com o "ui-field-contain" classe em torno do elemento label / forma:
Exemplo
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
<label for="lname">Last
name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Tente você mesmo " O "ui-field-contain" etiquetas estilo de classe e controlos de formulário com base na largura da página. Quando a largura da página é maior do que 480px, ele automaticamente colocar a etiqueta na mesma linha que o controle de formulário. Quando menos de 480px, o rótulo será colocado por cima do elemento de formulário.
Dica: Para evitar jQuery Mobile para automaticamente / elementos clicáveis tappable estilo, use o data-role="none" atributo:
Exemplo
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Tente você mesmo " Envio do formulário em jQuery Mobile
jQuery Mobile lida automaticamente com o envio do formulário via AJAX, e tentará integrar a resposta do servidor no DOM da aplicação.