Elementos de entrada de formulario de jQuery Mobile

Entrada de texto de jQuery Mobile

Los campos de entrada se escriben mediante elementos HTML estándar, y jQuery Mobile les aplica estilos atractivos y fáciles de usar específicos para dispositivos móviles. También puede utilizar los nuevos tipos de entrada HTML5 <input>:

Ejemplo

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Nombre completo：</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Cumpleaños：</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Correo electrónico：</label>
    <input type="email" name="email" id="email" placeholder="Su dirección de correo electrónico..">
  </div>
</form>

Pruebe usted mismo

Consejo:Utilice placeholder para especificar una breve sugerencia que describa el valor esperado del campo de entrada:

<input placeholder="sometext">

Cuadro de texto

Utilice <textarea> para implementar la entrada de texto en múltiples líneas.

Nota:El cuadro de texto se expande automáticamente para adaptarse a las líneas de texto que ingrese.

Ejemplo

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Additional Information:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Pruebe usted mismo

Cuadro de búsqueda

El tipo de entrada type="search" es un nuevo tipo en HTML5, utilizado para definir un campo de texto para la entrada de palabras clave de búsqueda:

Ejemplo

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

Pruebe usted mismo

Botón de opción

Se utiliza el botón de opción cuando el usuario selecciona una de las opciones limitadas.

Para crear un conjunto de botones de opción, agregue un elemento de entrada con type="radio" y el correspondiente label. Envuelva los botones de opción en un elemento <fieldset>. También puede agregar un elemento <legend> para definir el título del <fieldset>.

Consejo:Utilice la propiedad data-role="controlgroup" para combinar estos botones：

Ejemplo

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

Pruebe usted mismo

Casilla de verificación

Se utiliza para seleccionar una o más opciones de una cantidad limitada de opciones del usuario, se utiliza la casilla de verificación:

Ejemplo

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Elija tantos colores favoritos como desee:</legend>
      <label for="red">Rojo</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>

Pruebe usted mismo

Más ejemplos

Para agrupar horizontalmente casillas de selección o casillas de verificación, utilice la propiedad data-type="horizontal":

Ejemplo

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

Pruebe usted mismo

También puede usar contenedores de campo para envolver <fieldset>：

Ejemplo

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Elija su género:</legend>
  </fieldset>
</div>

Pruebe usted mismo

Si desea "preseleccionar" uno de los botones, utilice la propiedad checked del etiqueta HTML <input>:

Ejemplo

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

Pruebe usted mismo