Fiche HTML : Balises listes, formulaires
Objet de la fiche
État de la fiche 
Plan de la fiche
Avant propos
Nous allons ici découvrir l'utilisation
détaillée des balises les plus usitées ainsi que leurs attributs
directs (lorsqu'ils existent). Le but n'est pas de retenir
l'ensemble des balises qui sont présentées ici, mais de savoir
qu'elles existent, et de voir comment on peut les utiliser. Tout
au long de l'avancement de notre projet de développement d'un
site Web nous aurons à les utiliser et leur manipulations
deviendra au fur et à mesure de plus en plus familière.
Nota :
Dans la section HTML ne sont décrites que les balises avec leurs attributs de base. Les attributs de style qui sont souvent commun à l'ensemble des balises
seront étudiés dans la section Feuilles de style (CSS)
Les listes
Une liste est un paragraphe structuré composé d'une suite d'articles. On peut définir trois types de listes :
Types de listes
| Non ordonnées |
Ordonnées ou numérotées |
de définition |
- Article 1
- Article 2
- Article 3
|
- Article 1
- Article 2
- Article 3
|
- Talon
- Talon du pied
- Talon aiguille
- Talon d'Achille
- Police
- Sécurité
- Imprimerie
|
Balises et attributs
Ce sont des balises (X)HTML de type bloc permettant de créer des listes (listes à puces, listes numérotées, listes de définitions...)
Tableau des balises et attributs des listes
| Balises |
Descriptions |
| <ul> |
Délimiteur de liste non numérotée
| Attributs |
Commentaires |
| list-style |
Par défaut les puces sont matérialisées par un petit disque plein.
Style
de la liste : nature des puces, position des puces. Cette partie sera explicitée dans la fiche 'Style' |
| title="...." |
Information disponible lors du survol de la liste. |
|
| <ol> |
Délimiteur de liste numérotée
| Attributs |
Commentaires |
| start="valeur" |
Numéro de départ de la liste ordonnée .Si cet attribut n'est pas présent la liste commence à 1. Voir Note(1) |
| list-style |
Cette partie sera explicitée dans la fiche 'Style' |
| title="....." |
Information disponible lors du survol de la liste. |
|
| <li> |
Encadre chaque article des listes numérotées ou non numérotées
| Attributs |
Commentaires |
| value="valeur" |
Cet attribut sert à spécifier un autre numéro que celui attribué par défaut dans le cas des listes ordonnées. Voir Note(1) |
| title="...." |
Information disponible lors du survol de l'élément de la liste. |
|
Listes de définition
Les listes de définition permettent de créer un glossaire. Il
y a d'une part le mot, et d'autre part la définition.
Contrairement aux listes à puces et aux listes ordonnées dont la
structure est relativement semblable si on fait abstraction des
balises <UL> et <OL>, une liste de définition
possède une architecture complètement différente. |
| Balises |
Descriptions |
| <dl> |
Délimiteur de liste de définition |
| <dt> |
Encadre chaque élément de la liste de définition |
| <dd> |
Encadre chaque article d'un élément d'une liste de diffusion |
Note(1) : Les attributs start ne sont plus reconnus par le W3C pour le HTML strict, mais
leurs équivalents simples n'existent pas : il faut utiliser une feuille de
style avec le pseudo-élément before associé aux propriétés
content, counter-increment et counter-reset,
bref une 'usine à gaz' qui de plus n'est pas reconnue par tous les
navigateurs. Donc pour le moment, si vous avez besoin
de faire commencer des listes numérotées à partir d'une valeur
différente de 1, utilisez start ! et si vous voulez
modifier la numérotation en cours, utilisez value!
Structure générale
Exemples
Les exemples de base
Exemple de listes non ordonnée et ordonnée basiques
Exemple d'une liste de définition basique
Variations
Quelques variations qui seront possibles lorsque nous
aurons appris à appliquer des 'règles de style' .En voici quelques exemples.
Listes non ordonnées
| avec type="circle" |
Personnalisation de la puce d'un article |
Image en lieu et place des puces standard |
- Article1
- Article2
- Article3
- Article4
|
- Article1
- Article2
- Article3
- Article4
|
- Article1
- Article2
- Article3
- Article4
|
Liste ordonnée
| Numérique |
Romain minuscule |
valeur de départ =5 |
value=valeur : 10 à partir de l'article 2 |
- Article1
- Article2
- Article3
- Article4
|
- Article1
- Article2
- Article3
- Article4
|
|
|
 Un formulaire est le moyen le plus courant pour transmettre des informations depuis le visiteur
vers la base de données du serveur ou vers une autre page HTML du site. A charge pour le serveur de récupérer et d'exploiter
ces informations. Tout un ensemble de balises est mis à disposition pour l'acquisition des données : champs texte, mot de passe, liste, boutons radio, cases à cocher etc.
Balises et attributs
La balise <form> et ses attributs
|
<form>...</form> Balise d'encadrement d'une zone de formulaire délimitant le groupe d'informations à envoyer vers le serveur.
| Attributs |
Valeurs |
Descriptions |
| method |
get ou post |
La méthode get de l'attribut method permet
d'envoyer les variables par l'URL, c'est à dire dans l'adresse
Internet de la page. L'URL ainsi générée sera donc de la
forme suivante http:/site/page.php?p=toto&v=tata.
Dans cet exemple, les variables « toto » et « tata » sont envoyées.
La méthode post de l'attribut method utilise le
même principe de transmission d'informations que la méthode
GET mais les variables sont transmises sans affichage dans
l'URL. Ceci allie sécurité et lisibilité de la l'adresse. Dans
le cas d'une collecte de données comportant de nombreuses
variables (plus de 5 par exemple), on privilégiera l'utilisation de cette méthode. |
| action |
Url de la page à atteindre |
Indique la page vers laquelle le visiteur doit être redirigé lorsqu'il a validé votre formulaire. |
| target |
|
Donne la destination du retour du formulaire. |
| submit |
submit="return verif()" |
Permet si nécessaire
d'appeler une fonction externe (exp en javascript) pour
par exemple effectuer rapidement la validité des champs
renseignés par l'utilisateur. La fonction appelée ( verif()
dans l'exemple) répond par true ou false suivant le résultat de l'analyse. |
| enctype |
chaîne |
Cet attribut spécifie la manière dont les données seront encodées lors de la soumission du formulaire. Il est utilisé uniquement avec la méthode post
| Valeurs | Commentaires |
| application/x-www-form-urlencoded | Valeur par défaut. Tous les caractères sont encodés avant l'envoi : les espaces sont convertis en symboles "+" et les caractères spéciaux sont convertis en caractères hexadécimaux ASCII. |
| multipart/form-data | Les caractères ne sont pas encodés. Cette valeur est nécessaire dans le cas d'upload de fichiers. |
| text/plain | Les espaces sont convertis en symboles "+", les caractères spéciaux ne sont pas encodés. |
|
| id |
chaîne |
Identification du formulaire |
| title |
chaîne |
Information disponible lors du survol du formulaire. |
| name |
chaîne |
Nom du formulaire |
|
La balise <fieldset>
 <fieldset>...</fieldset>
Cette balise permet de regrouper plusieurs éléments d'un formulaire. Pour donner un titre au groupe, utilisez la balise <legend> |
La balise <legend>
<legend>.texte.</legend>
Cette balise permet de définir le titre d'un groupe dans un formulaire. A utiliser à l'intérieur d'un <fieldset> |
La balise <label>
<label>.texte.</label>
Cette balise permet de définir le titre d'un élément de formulaire. Généralement, vous devrez mettre l'attribut
for sur cette balise pour indiquer l'ID de l'élément auquel correspond le label. |
La balise <input>
|
<input type="xxxx"..../> Ensemble de boutons et de champs de saisie du formulaire définis par leurs types.
| Types |
Descriptions |
Attributs |
| <input type= "text" /> |
Champ de saisie permettant la saisie d'une ligne de texte. La taille du champ peut être définie à l'aide de l'attribut size et la taille maximale du texte saisi grâce à l'attribut maxlength. |
Attributs possibles de la balise
name="..." : nom du contrôle.
id ="..." : identificateur du bouton.
type="..." : type de contrôle d'entrée (text, password, checkbox, radio, submit, reset, file, hidden, image, button).
value="..." : valeur initiale du contrôle (obligatoire pour les boutons d'option et les cases à cocher).
checked="checked" : coche les boutons d'option. Si absent case initialement non cochée.
disabled="disabled" : désactive le contrôle. Si absent contrôle actif.
readonly="readonly" : zone de texte (textarea, mots de passe, texte) en lecture seule. Si absent écriture/lecture.
size="..." : largeur du contrôle en pixels, sauf pour les contrôles de texte et de mots de passe, qui sont spécifiés en nombre de caractères.
:maxlength="..." : nombre maximal de caractères qu'il est possible d'entrer.
src="..." : l'URL d'un contrôle de type image.
alt="..." : texte de remplacement dans un contrôle de type image.
title="......" : Information disponible lors du survol du bouton.
tabindex="..." : définit l'ordre de tabulation entre les éléments possédant une propriété tabindex.
|
| <input type= "password" /> |
Zone de texte spéciale masquant les caractères frappés au clavier |
| <input type= "file" /> |
Permet (à l'aide du bouton Parcourir) de rechercher un nom de fichier dans des répertoires |
| <input type= "checkbox" /> |
Cases à cocherpouvant admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est coché la paire nom/valeur est envoyée au serveur |
| <input type= "radio" /> |
Bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons radios devant porter le même attribut name. La paire nom/valeur du bouton radio sélectionné sera envoyé au serveur. Un attribut checked pour un des boutons permet de préciser le bouton sélectionné par défaut |
| <input type= "reset" /> |
Bouton de remise à zéro permettant uniquement de rétablir l'ensemble des éléments du formulaire à leurs valeurs par défaut |
| <input type= "submit"/> |
Bouton de soumission permettant l'envoi du formulaire. Le texte du bouton peut être précisé grâce à l'attribut value |
| <input type= "image" /> |
Bouton de soumission de type image pour envoi du formulaire |
| <input type= "hidden" /> |
Champ caché. Ce champ non visible sur le formulaire permet de préciser un paramètre fixe qui sera envoyé lors de l'envoi du formulaire |
|
La balise <textarea>
|
<textarea>.........</textarea> : Permet de spécifier une zone de saisie multi ligne. La balise textarea permet de définir une zone de
saisie plus vaste par rapport à la simple ligne de saisie que propose la balise input.
| Attributs |
Valeurs |
Descriptions |
| name |
name= chaîne de caractères |
Nom du contrôle |
| rows |
rows = nombre |
Nombre de lignes d'affichage |
| cols |
cols = nombre |
Nombre de colonne d'affichage |
| value |
value= chaîne de caractères |
Représente la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par une frappe de l'utilisateur |
| readonly |
readonly = "readonly" |
Permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ |
|
Balises et attributs de liste déroulante
<select>...</select> : Définition d'une liste déroulante. Utilise la balise <option> pour créer chaque élément de la liste.
| Attributs |
Valeurs |
Descriptions |
| name |
name=chaîne de caractères |
Nom du contrôle |
| multiple |
multiple= "multiple" |
multiple ="multiple" signifie que plusieurs éléments de la liste peuvent être sélectionnés. |
| disabled |
disabled="disabled" |
Permet de créer une liste désactivée, c'est-à-dire affichée en grisée |
| size |
size=nombre |
Défini le nombre d'éléments visibles |
|
<option>...</option> Cette balise délimite les éléments d'une liste déroulante initialement définie par la balise <select>
| Attributs |
Valeurs |
Descriptions |
| selected |
selected="selected" |
Si cette information est précisée l'option concernée constitue l'option affichée par défaut. |
| value |
value="toto" |
Représente la valeur associé à l'élément qui sera envoyée au script. |
|
<optgroup>...</optgroup> Cette balise permet de grouper les éléments d'une liste déroulante (A utiliser dans le cas d'une grande liste déroulante ainsi
que l'attribut <label> pour donner un nom au groupe). |
|
Ces balises ne sont pas obligatoires dans le cadre de
certification XHTML strict mais recommandées par le Web
Accessibility Initiative (WAI ).
Mécanisme des formulaires
Toutes les valeurs et leurs noms de référence à l'intérieur de
<form></form> seront transmises vers un destinataire dont
l'adresse est la valeur de l'attribut action. Avant l'envoi
il est possible d'appeler un script (petit programme déclaré dans la
page HTML) pour vérifier le contenu et la validité des données du
formulaire. Le déclenchement de l'envoi se fait à partir du bouton
de type submit.
Les valeurs demandées dans un formulaire sont un ensemble
d'éléments qui possèdent un affichage spécifique en fonction
de leur type qui peut être une zone de texte, une liste déroulante
etc. Lors de la réception du formulaire, le destinataire(serveur ou autre page Web)
pourra retrouver les valeurs transmises à l'aide de l'association
nom/valeur : si par exemple la zone de texte "Votre adresse mail"
contient http://toto@titi.fr le
destinataire va recevoir le contenu
http://toto@titi.fr associé au nom
n_AdMail et ainsi le concepteur de la partie destinataire (qui
est aussi souvent le concepteur de la page HTML contenant le
formulaire) pourra s'y retrouver facilement.
Pour illustrer les propos ci-dessus voici un formulaire de démonstration
(incluant un maximum d'attributs) qui une fois rempli sera envoyé à l'adresse mail que vous aurez précisée.
Lorsque vous cliquez sur "Envoyer" c'est l'ensemble des
données du formulaire qui sont envoyée vers le serveur qui les analyse , les
restructure et les renvoie à l'adresse mail que vous avez entrée en début de
formulaire. Les données envoyées sont celles que vous avez renseignées dans
les champs objet du mail, mot de passe, adresse d'un fichier, choix
des animaux que vous aimez, valeur des boutons masculin/féminin, contenu de
votre message et pays.
Résultat et Code du formulaire ci dessus
Les bonnes habitudes
- Utiliser les attributs d'accessibilité.
- Utilisez la balise title pour apporter une aide en ligne aux utilisateurs du site.
Application au projet de site web
- Ouvrez le bloc note,
- Ouvrez la page index.html
- Rajoutez une liste de définition (juste avant les images insérées précédemment).
- Titre de la liste : "Choisissez et commandez" (utilisez la balise <p>)
- Premier élément de la liste de diffusion : "Par type"
- Articles du premier élément de la liste de diffusion
"Les Roses"
"Les compositions"
"Les Bouquets"
"Les plantes"
- Deuxième élément de la liste de diffusion : "Par évènements"
- Articles du second élément de la liste de diffusion
"Une naissance"
"Un mariage"
"La fête des mères"
"La Saint Valentin"
- Troisième élément de la liste de diffusion : "Selon les prix"
"Malins"
"De 10 à 30€"
"De 30 à 50€"
"Plus de 50€"
Retrouvez la solution
Correction
Voici le résultat et le code
|
