Ensemble des éléments HTML du glossaire vus dans le sci6306

Contenu structuré

Élément : <input />

Définition : Contrôle de formulaire

Syntaxe : Possède plusieurs attributs dont l'attribut type, pour indiquer le type de contrôle (par exemple, un bouton pour soumettre le formulaire (type="submit"), une liste de choix avec choix unique (type="radio"), une liste de choix avec plusieurs choix (type="checkbox"), et une boîte de saisie de texte court (type="text"). L'attribut name permet de nommer le contrôle, tandis que l'attribut value indique la valeur enregistrée pour ce contrôle.

Note : Voir les entrées de la forme <input type=...> dans le glossaire pour des précisions sur les principaux types de contrôles.

Exemple d'application
Code HTML	Dans le navigateur
<form method="post" action="traitement.php" id="formulaire"> <p><strong>1. Question à choix multiples avec 2 choix</strong></p> <p> <input type="radio" id="choix1" name="q1" value="Choix 1" /><label for="choix1">Choix 1</label><br /> <input type="radio" id="choix2" name="q1" value="Choix 2" /><label for="choix2">Choix 2</label> </p> <p><strong>2. Question à réponses multiples avec 2 choix</strong></p> <p> <input type="checkbox" id="q2_1" name="q2_1" value="X" /><label for="q2_1">Choix 1</label><br /> <input type="checkbox" id="q2_2" name="q2_2" value="X" /><label for="q2_2">Choix 2</label> </p> <p><strong>3. Question ouverte avec réponse courte</strong></p> <p><input type="text" name="q3" /></p> <p><strong>4. Question à réponses multiples avec une question ouverte courte.</strong></p> <p> <input type="checkbox" id="q5_1" name="q5_1" value="X" /><label for="q5_1">Choix 1</label><br /> <input type="checkbox" id="q5_2" name="q5_2" value="X" /><label for="q5_2">Choix 2</label> S.V.P. précisez : <input type="text" name="q5_2a" /> </p> <p><input name="bouton " type="submit" value="Bouton pour soumettre le formulaire" /></p> </form>	1. Question à choix multiples avec 2 choix Choix 1 Choix 2 2. Question à réponses multiples avec 2 choix Choix 1 Choix 2 3. Question ouverte avec réponse courte 4. Question à réponses multiples avec une question ouverte courte. Choix 1 Choix 2 S.V.P. précisez :

Élément : <input type=checkbox />

Définition : Liste de choix avec plusieurs choix possibles

Syntaxe : Forme générique :
<p>
<input type="checkbox" id="nom_question_1" name="nom_question_1" value="valeur si coché" /><label for="nom_question_1">Réponse 1</label><br />
<input type="checkbox" id="nom_question_2" name="nom_question_2" value="valeur si coché" /><label for="nom_question_2">Réponse 2</label><br />
<input type="checkbox" id="nom_question_3" name="nom_question_3" value="valeur si coché" /><label for="nom_question_1">Réponse 3</label>
</p>

Chacun des choix de la liste fait l'objet d'une balise <input>. Comme chacune des valeurs (attribut value) peut être choisie et donc, sauvegardée, chacune des balises input possède un nom différent pour pouvoir les enregistrer séparément.

Affichage : Chacun des choix de la liste est précédé par une case à cocher.

Exemple d'application
Code HTML	Dans le navigateur
<p><strong>Quel(s) niveau(x) universitaire(s) avez-vous complété(s)?</strong></p> <p> <input type="checkbox" name="baccalauréat" id="bacc" value="X" /><label for="bacc">Baccalauréat</label><br /> <input type="checkbox" name="maîtrise" id="mait" value="X" /><label for="mait">Maîtrise</label><br /> <input type="checkbox" name="doctorat " id="doct" value="X" /><label for="doct">Doctorat</label> </p>	Quel(s) niveau(x) universitaire(s) avez-vous complété(s)? Baccalauréat Maîtrise Doctorat

Élément : <input type=date />

Définition : Boîte de saisie pour une date.

Syntaxe : Forme générique :

<input type="date" name="question1" value="" />

Affichage : L'affichage peut varier selon le navigateur.

Exemple d'application
Code HTML	Dans le navigateur
Quelle est votre date de naissance? <input type="date" name="naissance" />	Quelle est votre date de naissance?

Élément : <input type=email />

Définition : Boîte pour la saisie d'une adresse de courriel.

Syntaxe : Forme générique :

<input type="email" name="question1" value="" />

Note : Il est possible d'utiliser les attributs maxlength et size pour respectivement contrôler la longueur maximale permise pour l'adresse et la longueur de la boîte affichée.

Exemple d'application
Code HTML	Dans le navigateur
Quel est votre adresse courriel? <input type="email" name="courriel" />	Quel est votre adresse courriel?

Élément : <input type=hidden />

Définition : Champ de formulaire caché.

Syntaxe : <input type="hidden" id="annee" value="1985" />

Note : Permet, entre autres, de faire passer certaines valeurs d'une page à l'autre, valeurs ne nécessitant pas de saisie de la part de l'utilisateur.

Exemple d'application
Code HTML	Dans le navigateur
Le voyez-vous? <input type="hidden" id="annee" value="1985" />	Le voyez-vous?

Élément : <input type=number />

Définition : Bopite pour la saisie d'un nombre

Syntaxe : Forme générique :

<input type="number" name="question1" value="" />

Note : Deux attributs facultatifs peuvent être ajoutés : min et max pour indiquer la valeur minimale et la valeur maximale permises.

Exemple d'application
Code HTML	Dans le navigateur
Quel est votre âge? <input type="number" name="age" min="18" />	Quel est votre âge?

Élément : <input type=radio />

Définition : Liste de choix avec choix unique

Syntaxe : Forme générique :

<p>
<input type="radio" id="choix1" name="nom_question" value="valeur1" /><label for="choix1">Choix 1</label><br />
<input type="radio" id="choix2" name="nom_question" value="valeur2" /><label id="choix2">Choix 2</label>
</p>

Chaque choix de la liste fait l'objet d'une balise <input>. Les différents éléments d'une même liste sont liés du fait que chacune des balises <input> des choix possède le même nom (valeur de l'attribut name). Ce qui sera enregistré dans la base de données est ce qui est indiqué pour l'attribut value du choix qui sera coché.

Affichage : Chaque choix sera précédé d'un bouton radio rond.

Exemple d'application
Code HTML	Dans le navigateur
<p><strong>À quel groupe d'âge appartenez-vous?</strong></p> <p> <input type="radio" name="age" id="groupe1" value="18-30 ans" /><label for="groupe1">18-30 ans</label><br /> <input type="radio" name="age" id="groupe2" value="31-50 ans" /><label for="groupe2">31-50 ans</label><br /> <input type="radio" name="age" id="groupe3" value="51 ans ou plus" /><label for="groupe3">51 ans ou plus</label> </p>	À quel groupe d'âge appartenez-vous? 18-30 ans 31-50 ans 51 ans ou plus

Élément : <input type=submit />

Définition : Bouton pour la soumission d'un formulaire

Syntaxe : L'attribut name permet de nommer le bouton, tout comme l'attribut id. L'attribut value permet de préciser le texte que l'on veut voir affiché sur le bouton.

Note : L'action qui sera exécutée une fois le bouton cliqué sera l'action indiquée dans la balise d'ouverture <form>.

Exemple d'application
Code HTML	Dans le navigateur
<input name="nouveau" type="submit" value="Enregistrer la nouvelle fiche" />

Élément : <input type=text />

Définition : Boîte pour la saisie d'une réponse courte (une ligne)

Syntaxe : Forme générique :

<input type="text" name="question1" value="" />

Note : Deux attributs facultatifs peuvent être ajoutés : maxlength et size. L'attribut maxlength permet d'indiquer le nombre maximal de caractères permis et peut servir à empêcher la saisie de chaîne de caractères dépassant le nombre permis pour un champ. L'attribut size permet de préciser la longueur de la boîte affichée à l'écran.

De plus, l'attribut pattern, aussi facultatif, peut être utiliser pour valider la forme de ce qui est saisi. Par exemple, pour un champ où l'on saisit un code postal canadien, qui aura ainsi toujours la forme A0A 0A0 : pattern="[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" (voir https://www.w3schools.com/js/js_regexp.asp pour des informations sur l'utilisation des expressions régulières (pattern))

Exemple d'application
Code HTML	Dans le navigateur
Quel est votre code postal (format A0A 0A0)? <input type="text" name="code_postal" maxlength="7" size="10" pattern="[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" />	Quel est votre code postal (format A0A 0A0)?

Élément : <label>

Définition : Étiquette d'une balise input

Syntaxe : Les balises ouvrante et fermante encadrent l'élément textuel d'une balise <input> qui est affiché dans le navigateur. L'attribut for permet de lier l'étiquette à la balise <input> en lui donnant la même valeur que l'attribut id de cette balise.

Affichage : Aucun rendu visuel particulier outre le fait que le contrôle sera coché si l'utilisateur clique avec sa souris sur l'étiquette textuelle (ce qui est une valeur ajoutée d'un point de vue ergonomique).

Exemple d'application
Code HTML	Dans le navigateur
<input type="checkbox" id="homme" name="genre" value="h" /><label for="homme">Homme</label>	Homme

Élément : <optgroup>

Définition : Regroupement d'éléments dans une liste déroulante

Syntaxe : Forme générique :

<select name="liste">
<optgroup label="Premier groupe">
<option value="valeur1">Élément 1</option>
<option value="valeur2">Élément 2</option>
</optgroup>
<optgroup label="Deuxième groupe">
<option value="valeur3">Élément 3</option>
<option value="valeur4">Élément 4</option>
</optgroup>
</select>

Chaque bloc d'éléments de la liste que l'on veut regrouper sera encadré par la balise <optgroup>. Cette balise possède un attribut label qui permet d'identifier le groupe.

Affichage : Les étiquettes des groupes seront indiquées en gras et en italique et les éléments appartenant à un groupe seront présentés sous son étiquette avec une indentation pour représenter la hiérarchie.

Exemple d'application
Code HTML	Dans le navigateur
<select> <optgroup label="Premier cycle"> <option value="arv">Certificat en archivistique</option> <option value="gin">Certificat en gestion de l'information numérique</option> </optgroup> <optgroup label="Cycle supérieur"> <option value="msi">Maîtrise en sciences de l'information</option> <option value="phd">Doctorat en sciences de l'information</option> </optgroup> </select>

Élément : <option>

Définition : Élément d'une liste déroulante

Syntaxe : Se retrouve à l'intérieur d'une balise <select>. Chaque item de la liste fait l'objet d'une balise <option>. Ses balises ouvrante et fermante encadrent la valeur qui sera affichée dans la liste. L'attribut value permet de définir la valeur qui sera sauvegardée si un item est sélectionné.

Exemple d'application
Code HTML	Dans le navigateur
<select name="creme_glacee" multiple="multiple"> <option value="chocolat">Chocolat</option> <option value="vanille">Vanille</option> <option value="fraise">Fraise</option> </select>

Élément : <select>

Définition : Liste déroulante

Syntaxe : Forme générique :

<select name="liste">
<option value="valeur1">Premier élément</option>
<option value="valeur2">Deuxième élément</option>
</select>

Les balises ouvrante et fermante encadrent la liste des éléments, chaque élément étant constitué d'une balise <option>.

Affichage : Affiche une liste déroulante.

Note : L'attribut multiple peut être ajouté pour préciser s'il est possible de faire plus d'un choix dans la liste.

Exemple d'application
Code HTML	Dans le navigateur
<select name="creme_glacee" multiple="multiple"> <option value="chocolat">Chocolat</option> <option value="vanille">Vanille</option> <option value="fraise">Fraise</option> </select>

Élément : <textarea>

Définition : Boîte de saisie de texte long

Syntaxe : Les balises ouvrante et fermante encadrent ce que l'on veut afficher dans la boîte (on peut ne rien mettre). Cette balise possède plusieurs attributs dont l'attribut cols pour indiquer la largeur de la boîte et l'attribut rows pour le nombre de lignes affichées. L'attribut maxlength permet d'indiquer, au besoin, le nombre maximum de caractères permis.

Exemple d'application
Code HTML	Dans le navigateur
<textarea cols="20" rows="5">Indiquez ici vos préférences</textarea>	Indiquez ici vos préférences

Regroupement structurel

Élément : <form>

Définition : Formulaire

Syntaxe : La balise ouvrante et fermante encadre l'ensemble des éléments composant le formulaire. On retrouve, parmi les attributs de cette balise, l'attribut name, qui permet de nommer le formulaire (ce qui peut aussi se faire avec l'attribut id), l'attribut action, pour indiquer ce qui se passe une fois un formulaire soumis (URL), et l'attribut method, pour préciser la méthode utilisée pour envoyer des données.

On retrouve deux méthodes, soit "get" ou "post". Avec la méthode "get", les valeurs transmises sont inscrites directement dans l'URL. Par exemple, l'URL http://cours.ebsi.umontreal.ca/planscours/diffusion/index.php?cours=sci6306 comprend la valeur du champ "cours", ici "sci6306". Cette méthode est utilisée entre autres lorsque l'on veut simplement afficher des données. Si l'on veut transmettre des valeurs pour modifier une base de données, on privilégie la méthode "post" qui ne les rend pas visibles dans l'URL.

Exemple d'application
Code HTML	Dans le navigateur
<form method="post" action="traitement.php" id="formulaire"> <p><strong>1. Question à choix multiples avec 2 choix</strong></p> <p> <input type="radio" id="choix1" name="q1" value="Choix 1" /><label for="choix1">Choix 1</label><br /> <input type="radio" id="choix2" name="q1" value="Choix 2" /><label for="choix2">Choix 2</label> </p> <p><strong>2. Question à réponses multiples avec 2 choix</strong></p> <p> <input type="checkbox" id="q2_1" name="q2_1" value="X" /><label for="q2_1">Choix 1</label><br /> <input type="checkbox" id="q2_2" name="q2_2" value="X" /><label for="q2_2">Choix 2</label> </p> <p><strong>3. Question ouverte avec réponse courte</strong></p> <p><input type="text" name="q3" /></p> <p><strong>4. Question à réponses multiples avec une question ouverte courte.</strong></p> <p> <input type="checkbox" id="q5_1" name="q5_1" value="X" /><label for="q5_1">Choix 1</label><br /> <input type="checkbox" id="q5_2" name="q5_2" value="X" /><label for="q5_2">Choix 2</label> S.V.P. précisez : <input type="text" name="q5_2a" /> </p> <p><input name="bouton " type="submit" value="Bouton pour soumettre le formulaire" /></p> </form>	1. Question à choix multiples avec 2 choix Choix 1 Choix 2 2. Question à réponses multiples avec 2 choix Choix 1 Choix 2 3. Question ouverte avec réponse courte 4. Question à réponses multiples avec une question ouverte courte. Choix 1 Choix 2 S.V.P. précisez :