Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
web:html:formulaires [2023/03/28 14:42] – [Input] jcheron | web:html:formulaires [2023/03/28 17:52] (Version actuelle) – [Input] jcheron |
---|
* **action** permet de spécifier la ressource côté serveur qui recevra la requête et effectuera son traitement. | * **action** permet de spécifier la ressource côté serveur qui recevra la requête et effectuera son traitement. |
| |
| ===== Label ===== |
| Les **labels** sont les étiquettes donnant une indication textuelle sur un champ, et permettant d'y accéder (par un click) : |
| |
| <html> |
| <table border=0 width="100%"> |
| <tr><td></html> |
| <sxh html;gutter:false> |
| <label for="nom">Votre nom :</label> |
| <input type="text" id="nom" placeholder="Entrez votre nom"> |
| </sxh> |
| <html></td><td><label for="nom">Votre nom :</label> |
| <input type="text" id="nom" placeholder="Entrez votre nom"></td></tr></table></html> |
| |
| <wrap info>L'attribut **for** du label doit correspondre à l'**id** du champ relatif.</wrap> |
| |
| ===== Fieldset ===== |
| Les **fieldsets** permettent de regrouper visuellement un ensemble de champs dans une zone, la balise **legend** lui attribue un titre : |
| |
| <html> |
| <table border=0 width="100%"> |
| <tr><td></html> |
| <sxh html;gutter:false> |
| <fieldset> |
| <legend>Connexion</legend> |
| <label for="login">Login :</label> |
| <input type="text" id="login" placeholder="Entrez votre login"> |
| <label for="pwd">Mot de passe :</label> |
| <input type="password" id="pwd" placeholder="Entrez votre mot de passe"> |
| </fieldset> |
| </sxh> |
| <html></td><td><fieldset> |
| <legend>Connexion</legend> |
| <label for="login">Login :</label> |
| <input type="text" id="login" placeholder="Entrez votre login"> |
| <label for="pwd">Mot de passe :</label> |
| <input type="password" id="pwd" placeholder="Entrez votre mot de passe"> |
| </fieldset></td></tr></table></html> |
===== Champs ===== | ===== Champs ===== |
==== Input ==== | ==== Input ==== |
Ce sont les champs de saisie, dont le plus commun est le champ de type texte : | Ce sont les champs de saisie, dont le plus commun est le champ de type **text** : |
| |
=== Propriétés communes === | === Propriétés communes === |
<option>Citron</option> | <option>Citron</option> |
</select></html> | | </select></html> | |
^Liste multiple| <sxh html;gutter:false><select id="multi" name="multi" multiple size="4"> | ^Liste multiple| <sxh html;gutter:false><select id="multi" name="multi" multiple size="3"> |
<option>Banane</option> | <option selected>Banane</option> |
<option selected>Cerise</option> | <option selected>Cerise</option> |
<option>Citron</option> | <option>Citron</option> |
</select></sxh> | <html><select id="multi" name="multi" multiple size="4"> | </select></sxh> | <html><select id="multi" name="multi" multiple size="3"> |
<option>Banane</option> | <option selected>Banane</option> |
<option selected>Cerise</option> | <option selected>Cerise</option> |
<option>Citron</option> | <option>Citron</option> |
</select></html> | | </select></html> | |
^Liste avec groupes d'options | <sxh html;gutter:false><select id="multi" name="multi" multiple size="8"> | ^Liste avec groupes d'options | <sxh html;gutter:false><select id="grp" name="grp" multiple size="8"> |
<optgroup label="fruits"> | <optgroup label="fruits"> |
<option>Banane</option> | <option>Banane</option> |
</optgroup> | </optgroup> |
<optgroup label="legumes"> | <optgroup label="legumes"> |
<option>Carotte</option> | <option selected>Carotte</option> |
<option>Aubergine</option> | <option>Aubergine</option> |
<option>Pomme de terre</option> | <option>Pomme de terre</option> |
</optgroup> | </optgroup> |
<optgroup label="legumes"> | <optgroup label="legumes"> |
<option>Carotte</option> | <option selected>Carotte</option> |
<option>Aubergine</option> | <option>Aubergine</option> |
<option>Pomme de terre</option> | <option>Pomme de terre</option> |
</optgroup> | </optgroup> |
</select></html> | | </select></html> | |
| ^Autocomplétion | <sxh html;gutter:false><label for="monFruit">Quel est votre fruit préféré ?</label> |
| <input type="text" name="monFruit" id="monFruit" list="fruits-list"> |
| <datalist id="fruits-list"> |
| <option>Pomme</option> |
| <option>Banane</option> |
| <option>Cassis</option> |
| <option>Myrtille</option> |
| <option>Citron</option> |
| <option>Litchi</option> |
| <option>Pêche</option> |
| <option>Poire</option> |
| </datalist></sxh> | <html><label for="monFruit">Quel est votre fruit préféré ?</label> |
| <input type="text" name="monFruit" id="monFruit" list="fruits-list"> |
| <datalist id="fruits-list"> |
| <option>Pomme</option> |
| <option>Banane</option> |
| <option>Cassis</option> |
| <option>Myrtille</option> |
| <option>Citron</option> |
| <option>Litchi</option> |
| <option>Pêche</option> |
| <option>Poire</option> |
| </datalist></html> | |
| ^Progressbar | <sxh html;gutter:false><progress max="100" value="75">75/100</progress></sxh> | <html><progress max="100" value="75">75/100</progress></html> | |
| ^Jauge | <sxh html;gutter:false><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></sxh> | <html><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></html> | |
| |
| |
| <button>[[web:html:formulaires:pseudoclass|]]</button> |
| |