Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
html [2016/02/23 13:03] luc |
html [2018/10/13 20:32] (Version actuelle) |
||
---|---|---|---|
Ligne 188: | Ligne 188: | ||
===== Les formulaires ===== | ===== Les formulaires ===== | ||
+ | Le concept de formulaire répond au besoin de l' | ||
+ | |||
+ | ==== La balise form ==== | ||
+ | Elle délimite le formulaire : | ||
+ | |||
<code html5> | <code html5> | ||
- | < | ||
- | < | ||
- | ... ou des données dans un bloc | ||
- | </p> | ||
- | </ | ||
- | <form method="" | + | < |
- | method=" | + | method="" |
- | method=" | + | |
- | < | + | |
+ | |||
+ | action=""> | ||
+ | < | ||
+ | </ | ||
</ | </ | ||
==== Zone de texte à 1 ligne ==== | ==== Zone de texte à 1 ligne ==== | ||
+ | La balise '' | ||
<code html5> | <code html5> | ||
- | <input type=" | + | |
- | <input type=" | + | < |
- | <form ..> < | + | |
- | <p> | + | |
- | < | + | <input type=" |
- | </p> | + | |
+ | | ||
+ | |||
+ | | ||
+ | ... | ||
+ | | ||
+ | |||
</ | </ | ||
- | <label for=" | + | |
- | attribut de la balise | + | <input |
- | size=" | + | size=" |
- | maxlength="" | + | maxlength="" |
- | value=" | + | value=" |
- | placeholder=" | + | placeholder=" |
+ | /> | ||
</ | </ | ||
==== Zone de texte multilignes ==== | ==== Zone de texte multilignes ==== | ||
- | < | + | < |
- | < | + | |
+ | < | ||
+ | on peut mettre du texte par défaut (pas besoin de value) | ||
+ | </ | ||
</ | </ | ||
==== Types de texte particuliers ==== | ==== Types de texte particuliers ==== | ||
- | < | + | < |
- | < | + | <input |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | min="" | + | min="" |
- | max="" | + | max="" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
- | type=" | + | type=" |
+ | /> | ||
</ | </ | ||
==== Eléments d' | ==== Eléments d' | ||
- | < | + | < |
- | <input type=" | + | |
- | checked attribut qui signifie que la case est par défaut cochée | + | <!-- case à cocher : --> |
- | <input type=" | + | < |
- | il est nécessaire que tous les choix aient le même nom (name="" | + | |
- | Il faut aussi mettre | + | |
- | <select name="" | + | |
- | <option value=""> | + | /> |
- | <option value="" | + | |
+ | <!-- choix unique parmi plusieurs cases à cocher | ||
+ | <input | ||
+ | type=" | ||
+ | name=" | ||
+ | value="unique" | ||
+ | /> | ||
+ | |||
+ | <!-- liste déroulante pour sélectionner une valeur parmi une liste définie --> | ||
+ | <select name="" | ||
+ | <option value=""> | ||
+ | <option value="" | ||
</ | </ | ||
< | < | ||
- | < | + | < |
+ | < | ||
< | < | ||
< | < | ||
</ | </ | ||
- | <optgroup> | + | <!-- les groupes ne peuvent pas être sélectionnés |
- | ... | + | |
- | </ | + | |
</ | </ | ||
+ | |||
</ | </ | ||
==== Envoi de fichiers ==== | ==== Envoi de fichiers ==== | ||
- | il suffit de rajouter | + | C'est une méthode simple à l'ergonomie simple. On peut faire plus de nos jours en définissant des zones " |
- | <input type=" | + | <code html5> |
+ | < | ||
+ | <input type=" | ||
+ | </ | ||
+ | </code> | ||
==== Mise en page de formulaires ==== | ==== Mise en page de formulaires ==== | ||
- | < | + | < |
- | < | + | < |
- | < | + | |
- | ... | + | < |
- | </fieldset> | + | < |
- | <input autofocus/> | + | |
- | <input requiered/> | + | <!-- sélectionne automatiquement un champ --> |
+ | <input autofocus/> | ||
+ | |||
+ | <!-- rend le champ obligatoire, | ||
+ | <input requiered/> | ||
+ | |||
+ | </ | ||
+ | </ | ||
</ | </ | ||
==== Validation ==== | ==== Validation ==== | ||
+ | La validation d'un formulaire déclenche l' | ||
<code html5> | <code html5> | ||
- | <input type=" | + | <form> |
- | <input type="reset"/> | + | < |
- | <input type="image" src=""/> | + | <input type="submit"/> |
- | <input type="button" /> bouton générique, | + | |
- | value="" | + | < |
+ | <input type="reset"/> | ||
+ | |||
+ | < | ||
+ | <input type="image" src=""/> | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | <!-- attribut qui permet de modifier le texte à l' | ||
+ | value=" | ||
+ | |||
+ | </ | ||
</ | </ | ||
==== Auto-validation ==== | ==== Auto-validation ==== | ||
- | < | + | < |
< | < | ||
- | <select name=' | + | |
- | <option selected> | + | <!-- onchange est un event de html5, il execute le script contenu entre guillemet --> |
- | < | + | |
- | < | + | <option selected> |
- | </ | + | < |
- | <noscript>< | + | < |
+ | </ | ||
+ | |||
+ | | ||
+ | < | ||
+ | |||
</ | </ | ||
</ | </ | ||