| 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:47] – [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 === |
| </select></html> | | </select></html> | |
| ^Autocomplétion | <sxh html;gutter:false><label for="monFruit">Quel est votre fruit préféré ?</label> | ^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="maSuggestion"> | <input type="text" name="monFruit" id="monFruit" list="fruits-list"> |
| <datalist id="maSuggestion"> | <datalist id="fruits-list"> |
| <option>Pomme</option> | <option>Pomme</option> |
| <option>Banane</option> | <option>Banane</option> |
| <option>Poire</option> | <option>Poire</option> |
| </datalist></sxh> | <html><label for="monFruit">Quel est votre fruit préféré ?</label> | </datalist></sxh> | <html><label for="monFruit">Quel est votre fruit préféré ?</label> |
| <input type="text" name="monFruit" id="monFruit" list="maSuggestion"> | <input type="text" name="monFruit" id="monFruit" list="fruits-list"> |
| <datalist id="maSuggestion"> | <datalist id="fruits-list"> |
| <option>Pomme</option> | <option>Pomme</option> |
| <option>Banane</option> | <option>Banane</option> |
| <option>Poire</option> | <option>Poire</option> |
| </datalist></html> | | </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> |
| |
jcheron