Éléments de formulaire
Le code ci-dessous permet d'afficher une page contenant diverses améliorations progressives des contrôles de formulaire. Les éléments natifs sont parfois cachés, mais leurs valeurs sont maintenues afin que le formulaire puisse être soumis normalement.
Les navigateurs qui ne supportent pas les contrôles améliorés n'empêcheront pas l'utilisation du formulaire, car tous les contrôles sont basés sur les éléments natifs du formulaire.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de formulaire désactivé</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page unique</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<h2>Éléments de formulaire</h2>
<p>Cette page contient diverses améliorations progressives des contrôles de formulaire. Les éléments natifs sont parfois cachés, mais leurs valeurs sont maintenues afin que le formulaire puisse être soumis normalement.</p>
<p>Les navigateurs qui ne supportent pas les contrôles améliorés n´empêcheront pas l´utilisation du formulaire, car tous les contrôles sont basés sur les éléments natifs du formulaire.</p>
<div data-role="fieldcontain">
<label for="name">Saisie de texte :</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="textarea">Zone de texte :</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div data-role="fieldcontain">
<label for="search">Saisie pour recherche :</label>
<input type="search" name="password" id="search" value="" />
</div>
<div data-role="fieldcontain">
<label for="slider2">Interrupteur à bascule :</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Arrêt</option>
<option value="on">Marche</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Curseur ou Slider :</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choisissez autant de collations que vous le souhaitez :</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Style de police :</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
<label for="checkbox-7"><em>i</em></label>
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choisir un animal :</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Chat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Chien</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lézard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Vue de la mise en page :</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">Liste</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Grille</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Gallerie</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choisissez la méthode d´expédition :</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Lent : 7 jours</option>
<option value="rush">Rapide : 3 jours</option>
<option value="express">Express : Le lendemain</option>
<option value="overnight">De nuit</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Votre pays :</label>
<select name="select-choice-3" id="select-choice-3">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choisissez le mode d´expédition :</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false">
<option>Exemple de menu personnalisé</option>
<option value="standard">Lent : 7 jours</option>
<option value="rush">Rapide : 3 jours</option>
<option value="express">Express : Le lendemain</option>
<option value="overnight">De nuit</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Annuler</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Valider</button></div>
</fieldset>
</div>
</form>
</div><!-- /content -->
<div data-role="footer">
<h4>Contenu du pied de page</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de formulaire