Estructura de formulario en JQuery Mobile
jQuery Mobile utiliza CSS para diseñar elementos de formulario HTML, lo que los hace atractivos y fáciles de usar.
En jQuery Mobile puedes usar los siguientes controles de formulario:
- Entradas de texto(Text Inputs)
- Entradas de búsqueda(Search Inputs)
- Botones de radio(Radio Buttons)
- Casillas de verificación(Checkboxes)
- Seleccionar menús(Select Menus)
- Deslizadores(Sliders)
- Voltear los interruptores de palanca(Flip Toggle Switches)
Cuando trabaje con formularios de jQuery Mobile debe saber:
- El elemento <form> debe tener un método y un atributo de acción
- Cada elemento de formulario debe tener un atributo "id" único. La identificación debe ser única en todas las páginas del sitio. Esto se debe a que el modelo de navegación de una página de jQuery Mobile permite que estén presentes muchas "páginas" diferentes al mismo tiempo
- Cada elemento de formulario debe tener una etiqueta. Establezca el atributo for de la etiqueta para que coincida con el id del elemento.
Sugerencia: Use un marcador de posición(Placeholder) para especificar una sugerencia breve que describa el valor esperado de un campo de entrada.
Sugerencia: para ocultar la etiqueta, use la clase "ui-hidden-accessible". Esto se usa a menudo cuando quieres que el atributo de marcador de posición (Placeholder) del elemento sirva como etiqueta cuando se desea ahorrar espacio.
<label for="fname" class="ui-hidden-accessible">First name:</label>
<input type="text" name="fname" id="fname" placeholder="First name...">
<input type="text" name="fname" id="fname" placeholder="First name...">
Sugerencia: si desea un "botón de borrado" (un ícono de X en el lado derecho del campo de entrada que borra el contenido del campo), agregue el atributo data-clear-btn = "true".
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">
<input type="text" name="fname" id="fname" data-clear-btn="true">
Nota: El "botón de borrar" se puede agregar en cualquier elemento <input>, excepto en <textarea>. Los campos de búsqueda tienen este atributo establecido en "verdadero" como predeterminado: para cambiarlo, simplemente especifique data-clear-btn = "falso".
Los botones en los formularios están codificados con elementos HTML <input> (botón, restablecer, enviar). Tienen un estilo automático, lo que los hace atractivos y fáciles de usar tanto en dispositivos móviles como en computadoras de escritorio.
Ejemplo de todo lo anterior:
<!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">
<label for="fname">Nombre</label>
<input type="text" name="fname" id="fname" placeholder="Nombre..." data-clear-btn="true">
<label for="fapellido" class="ui-hidden-accessible">Apellido</label>
<input type="text" name="fname" id="fapellido" placeholder="Apellido..." data-clear-btn="true">
<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:
Para aplicar un estilo adicional a un botón <input>, use cualquiera de los atributos de data- * listados en la tabla a continuación.
| Attribute | Value | Description |
|---|---|---|
| data-corners | true | false | Especifica si el botón debe tener esquinas redondeadas o no |
| data-icon | Icons Reference | Especifica el icono del botón. |
| data-iconpos | left | right | top | bottom | notext | Especifica la posición del icono. |
| data-inline | true | false | Especifica si el botón debe estar en línea o no |
| data-mini | true | false | Especifica si el botón debe ser pequeño o no |
| data-shadow | true | false | Especifica si el botón debe tener sombras o no. |
No hay comentarios:
Publicar un comentario