<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>
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">
</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>
Al ampliar la ventana
Nota: Las etiquetas de estilo de clase "ui-field-contener" y los controles de formulario se basan en el ancho de la página. Cuando el ancho de la página es mayor que 480 px, coloca automáticamente la etiqueta en la misma línea que el control de formulario. Cuando sea inferior a 480 px, la etiqueta se colocará sobre el elemento del formulario.
Sugerencia: para evitar que jQuery Mobile aplique un estilo a los elementos intercambiables / pulsables, use el atributo data-role = "none".
Ejemplo:
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">
<input type="text" name="fname" id="fname" data-role="none">
Envío de formularios en jQuery Mobile
jQuery Mobile manejará automáticamente el envío de formularios a través de AJAX e intentará integrar la respuesta del servidor en el DOM de la aplicación.
jQuery Mobile manejará automáticamente el envío de formularios a través de AJAX e intentará integrar la respuesta del servidor en el DOM de la aplicación.
No hay comentarios:
Publicar un comentario