Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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
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: