Las entradas de texto de jQuery Mobile
Los campos de entrada se codifican con elementos HTML estándar, y jQuery Mobile estilo de ellos tendrán un aspecto atractivo y fácil de usar para los dispositivos móviles. También puede utilizar los nuevos HTML5 <input> tipos:
Ejemplo
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input
type="text" name="fullname" id="fullname">
<label
for="bday">Date of Birth:</label>
<input type="date" name="bday"
id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
Inténtalo tú mismo " área de texto
Utilice <textarea> para las entradas de texto multilínea.
Nota: El área de texto crecerá automáticamente para adaptarse a las nuevas líneas a medida que escribe un texto.
Ejemplo
<label for="info">Additional Information:</label>
<textarea
name="addinfo" id="info"></textarea>
Inténtalo tú mismo " Buscar entrada
La entrada type="search" es nuevo en HTML 5, y define un campo de texto para introducir una búsqueda:
Ejemplo
<label for="search">Search:</label>
<input
type="search" name="search" id="search">
Inténtalo tú mismo " Botones de radio
Los botones de radio se utilizan cuando un usuario puede seleccionar sólo uno de un número limitado de opciones.
Para crear un conjunto de botones de radio, añadir una entrada con type="radio" y una etiqueta correspondiente. Envolver los botones de opción en un <fieldset> elemento. También puede añadir un <legend> elemento para definir un título para el <fieldset> .
Consejo: El uso data-role="controlgroup" , para agrupar los botones a la vez:
Ejemplo
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose your
gender:</legend>
<label
for="male">Male</label>
<input
type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input
type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
Inténtalo tú mismo " Las casillas de verificación
Las casillas de verificación se utilizan cuando un usuario puede seleccionar una o más opciones de un número limitado de opciones:
Ejemplo
<form method="post" action="demoform.asp">
<fieldset
data-role="controlgroup">
<legend>Choose as many
favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input
type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input
type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input
type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
Inténtalo tú mismo " Más ejemplos
Para botones de selección de grupo o casillas horizontalmente, utilice el data-type="horizontal" :
También puede incluir un contenedor de campo alrededor de la <fieldset> :
Ejemplo
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
Inténtalo tú mismo " Si quieres uno de los botones para ser "pre-selected" , utilice el código HTML <input> atributo verificado:
También puede colocar su forma dentro de una ventana emergente:
Ejemplo
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>
<div
data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>
Inténtalo tú mismo "