TICS EN EDUCACION: 50.- Elementos de entrada de Formularios (JQuery Mobile)

viernes, 10 de mayo de 2019

50.- Elementos de entrada de Formularios (JQuery Mobile)

Los campos de entrada están codificados con elementos HTML estándar, y jQuery Mobile los diseñará para que se vean atractivos y fáciles de usar para dispositivos móviles. También puede usar los nuevos tipos de HTML5 <input>.

Area de texto

Utilice <textarea> para entradas de texto de varias líneas.

Nota: El área de texto crecerá automáticamente para adaptarse a las nuevas líneas a medida que escribe algún texto.

<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>

Entrada de búsqueda

El tipo de entrada = "búsqueda" es nuevo en HTML5 y define un campo de texto para ingresar una búsqueda.

<label for="search">Search:</label>
<input type="search" name="search" id="search">

Botones de radio

Los botones de radio se usan cuando un usuario puede seleccionar solo una de un número limitado de opciones.

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

Consejo: Use data-role = "controlgroup", para agrupar los botones:

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:

<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>

Para agrupar botones de radio o casillas de verificación horizontalmente, use

data-type="horizontal".

Si desea que uno de sus botones sea "preseleccionado", use el atributo <input> checked de HTML:

Ejemplo:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

 <div data-role="page">

  <div data-role="header">

   <h1>Formularios</h1>

  </div>

  <div data-role="main" class="ui-content">

   <form method="post" action="acciones.php">

    <div class="ui-field-contain">

     <label for="fname">Nombre</label>

     <input type="text" name="fname" id="fname" placeholder="Nombre..." data-clear-btn="true">

     <label for="fapellido" >Apellido</label>

     <input type="text" name="fname" id="fapellido" placeholder="Apellido..." data-clear-btn="true">

     <label for="info">Comentarios:</label>

     <textarea name="addinfo" id="info"></textarea>

     <label for="search">Search:</label>

     <input type="search" name="search" id="search" placeholder="Buscar...">

     <fieldset data-role="controlgroup">

      <legend>Sexo:</legend>

      <label for="male">Masculino</label>

      <input type="radio" name="gender" id="male" value="male" checked>

      <label for="female">Femenino</label>

      <input type="radio" name="gender" id="female" value="female"> 

     </fieldset>

     <fieldset data-role="controlgroup">

      <legend>Colores favoritos: (Vertical)</legend>

      <label for="red">Red</label>

      <input type="checkbox" checked 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>

    </div>

    <input type="reset" value="Reset" data-shadow="true" data-inline="true" >

    <input type="submit" value="Submit" data-shadow="true" data-inline="true" >

   </form>

  </div>

  <div data-role="footer">

   <h1>Pie de pagina</h1>

  </div>

 </div>

</body>

</html>

Resultado: