web:html:formulaires

Différences

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

Lien vers cette vue comparative

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:33] – [Input] jcheronweb: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.   * **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 ===
Ligne 82: Ligne 119:
   <option>Citron</option>   <option>Citron</option>
 </select></html> | </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>Banane</option>
      <option selected>Cerise</option>      <option selected>Cerise</option>
      <option>Citron</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>Banane</option>
      <option selected>Cerise</option>      <option selected>Cerise</option>
      <option>Citron</option>      <option>Citron</option>
 </select></html> | </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">   <optgroup label="fruits">
      <option>Banane</option>      <option>Banane</option>
Ligne 98: Ligne 144:
    </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>
Ligne 109: Ligne 155:
    </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>
  
  • web/html/formulaires.1680006805.txt.gz
  • Dernière modification : il y a 2 ans
  • de jcheron