formularios en jQuery Mobile

Contactar con el profesor

Todos los elementos dentro de un formulario deben ir dentro de la etiqueta <form>

Todas las etiquetas dentro de un formulario deben tener una id única.

Los formularios son enviados automáticamente vía AJAX.

<h2>labels visibles</h2>
<label for="basicfield">Basic Text Field:</label>
<input type="text" name="basicfield" id="basicfield" value="" placeholder="texto"><br>
<div data-role="fieldcontain">
	<label for="address">Your address:</label>
	<input type="text" name="address" id="address" value="" placeholder="">
</div>

<h2>labels ocultos <span style="font-size:0.5em"> (aunque google sigue indexándolo y los lectores auditivos son capaces de oírlo)</h2>
<h5>ui-hidden-accesible oculta el label al que se lo asigno</span></h5>
<label for="username" class="ui-hidden-accessible">Basic Text Field:</label>
<input type="text" name="username" id="username" value="" placeholder="texto"><br>
<h5>ui-hide-label se aplica a la capa contenedora y oculta los label que hay dentro</h5>
<div data-role="fieldcontain" class="ui-hide-label">
	<label for="address">Your address:</label>
	<input type="text" name="address" id="address" value="" placeholder="">
</div>

jQueryMobile gestiona todas las peticiones usando AJAX, y esto en muchos casos, como en los formularios que envían peticiones por POST o cuando trato de acceder a una página que tiene sus propias librerías de Javascript, hace que la aplicación no funcione correctamente.

switcher

<select data-role="slider">
	<option value="On">On</option>
	<option value="Off">Off</option>
</select>

Slider

<input type="range" data-show-value="true" data-popup-enabled="true" min="0" max="100" value="50">

radio buttons

<fieldset data-role="controlgroup">
	<legend>Escoge una opción</legend>
	<label for="rb1">Radio button1</label>
	<input type="radio" id="rb1" name="rb1" value="rb1">
	<label for="rb2">Radio button2</label>
	<input type="radio" id="rb2" name="rb1" value="rb2">
	<label for="rb3">Radio button3</label>
	<input type="radio" id="rb3" name="rb1" value="rb3">
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">
	<legend>Escoge una opción</legend>
	<label for="rb4">Radio button1</label>
	<input type="radio" id="rb4" name="rb2" value="rb1">
	<label for="rb5">Radio buton2</label>
	<input type="radio" id="rb5" name="rb2" value="rb2">
	<label for="rb6">Radio button3</label>
	<input type="radio" id="rb6" name="rb2" value="rb3">
</fieldset>

Resetear las checkboxes marcadas en otras page cuando hago la carga con Ajax

$('input[type=radio]'').prop('checked', false).checkboxradio('refresh');

checkbox

<fieldset>
	<legend>Agree to the terms:</legend>
	<label for="cb1">Rojo</label>
	<input type="checkbox" name="cb1" id="cb1">

	<label for="cb2">Azul</label>
	<input type="checkbox" name="cb2" id="cb2">

	<label for="cb3">Amarillo</label>
	<input type="checkbox" name="cb3" id="cb3">
</fieldset>

select I

<fieldset >
	<legend for="select1">Opt 1:</legend>
	<select name="combo" id="combo">
		<option value="value1">Value 1</option>
		<option value="value2" disabled="disabled">Value 2</option>
		<option value="value3">Value 3</option>
		<option value="value4">Value 4</option>
	</select>
</fieldset>

select II

<fieldset data-role="controlgroup" data-type="horizontal">
	<legend for="select1">Opt 1:</legend>
	<select name="combo" id="combo">
		<option value="value1">Value 1</option>
		<option value="value2" disabled="disabled">Value 2</option>
		<option value="value3">Value 3</option>
		<option value="value4">Value 4</option>
	</select>
	<select name="combo2" id="combo2">
		<option value="value1">Value 1</option>
		<option value="value2" disabled="disabled">Value 2</option>
		<option value="value3">Value 3</option>
		<option value="value4">Value 4</option>
	</select>
</fieldset>

select III – (no nativo)

<fieldset data-role="controlgroup" data-type="horizontal">
	<legend for="select1">Opt 1:</legend>
	<select name="combo" id="combo" data-native-menu="false">
<!-- La siguiente option es maquetada diferente porque no tiene atributo value-->
		<option>Elige una opción</option>
		<optgroup label="Primer grupo">
			<option value="value1">Value 1</option>
			<option value="value2" disabled="disabled">Value 2</option>
			<option value="value3">Value 3</option>
			<option value="value4">Value 4</option>
		</optgroup>
		<optgroup label="Segundo grupo">
			<option value="value5">Value 5</option>
			<option value="value6" disabled="disabled">Value 6</option>
			<option value="value7">Value 7</option>
			<option value="value8">Value 8</option>
		</optgroup>
	</select>
</fieldset>

select IV – multiple selected

<fieldset data-role="controlgroup" data-type="horizontal">
	<legend for="select1">Multiple Enabled:</legend>
	<select name="select1" id="select2" multiple="multiple" data-native-menu="false">
		<option>Elige una opción</option>
		<option value="value1">Value 1</option>
		<option value="value2" disabled="disabled">Value 2</option>
		<option value="value3">Value 3</option>
		<option value="value4">Value 4</option>
		<option value="value5">Value 5</option>
		<option value="value6" disabled="disabled">Value 6</option>
		<option value="value7">Value 7</option>
		<option value="value8">Value 8</option>
	</select>
</fieldset>

Ejercicio – Hacer el formulario propuesto

Consideraciones.
El evento change no funciona directamente contra un <input type=”range” />, ya que jQueryMobile se encarga de transformar este elemento en un <input type=”number” />

Por otro lado, el slider tiene otros eventos, como:

$("input" ).on( "slidestart", optionClicked );
$("input" ).on( "slidestop", optionClicked );
← Botones en jQuery Mobile
Listas →

Aviso Legal | Política de privacidad