Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:formulaires [2023/03/28 14:33] – [Input] jcheron
+++ web:html:formulaires [2023/03/28 17:52] (Version actuelle) – [Input] jcheron
@@ Ligne 21: / Ligne 21: @@
   * **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 =====
 ==== 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 ===
@@ Ligne 82: / Ligne 119: @@
   <option>Citron</option>
 </select></html> |
-^Liste standard| <sxh html;gutter:false><select id="standrd" name="standrd" size="4">
+^Liste standard| <sxh html;gutter:false><select id="standard" name="standard" size="4">
      <option>Banane</option>
      <option selected>Cerise</option>
      <option>Citron</option>
-</select></sxh> | <html><select id="standrd" name="standrd" size="4">
+</select></sxh> | <html><select id="standard" name="standard" size="4">
      <option>Banane</option>
      <option selected>Cerise</option>
      <option>Citron</option>
 </select></html> |
-^Liste multiple | <sxh html;gutter:false><select id="multi" name="multi" multiple size="8">
+^Liste multiple| <sxh html;gutter:false><select id="multi" name="multi" multiple size="3">
+     <option selected>Banane</option>
+     <option selected>Cerise</option>
+     <option>Citron</option>
+</select></sxh> | <html><select id="multi" name="multi" multiple size="3">
+     <option selected>Banane</option>
+     <option selected>Cerise</option>
+     <option>Citron</option>
+</select></html> |
+^Liste avec groupes d'options | <sxh html;gutter:false><select id="grp" name="grp" multiple size="8">
   <optgroup label="fruits">
      <option>Banane</option>
@@ Ligne 98: / Ligne 144: @@
    </optgroup>
    <optgroup label="legumes">
-     <option>Carotte</option>
+     <option selected>Carotte</option>
      <option>Aubergine</option>
      <option>Pomme de terre</option>
@@ Ligne 109: / Ligne 155: @@
    </optgroup>
    <optgroup label="legumes">
-     <option>Carotte</option>
+     <option selected>Carotte</option>
      <option>Aubergine</option>
      <option>Pomme de terre</option>
    </optgroup>
 </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>