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> |
| |