Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche HTML : Balises listes, formulaires

Objet de la fiche

État de la fiche Terminée validée


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
  1. Article 1
  2. Article 2
  3. 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

Structure générale liste

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
  1. Article1
  2. Article2
  3. Article3
  4. Article4
  1. Article1
  2. Article2
  3. Article3
  4. Article4

Balises de formulaire

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

ValeursCommentaires
application/x-www-form-urlencodedValeur 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-dataLes caractères ne sont pas encodés. Cette valeur est nécessaire dans le cas d'upload de fichiers.
text/plainLes 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>

 Icône handicap <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>

 Icône handicap <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>

 Icône handicap <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).

Icône handicap 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.


Exemple

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.

Démonstration formulaire
    Obligatoirement une adresse valide


* Attention
Les chiens? Les chats?
Masculin? Féminin?





* Attention : le champ "sélectionnez votre fichier"  doit être un nom de fichier valide sélectionné par Parcourir.. ou bien être vide. Si ce n'est pas le cas le formulaire ne sera pas envoyé (bug Internet Explorer).

 

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

  • Sauvegarder la page.

Retrouvez la solution

Correction

Voici le résultat et le code


Respectons la propriété intellectuelle