Introduction au HTML [2]
Un bon balisage, qu'est-ce que c'est ?
L'écriture de documents HTML bien structurés est la clé du web actuel et conforme aux standards.
Vous devriez suivre les quatre recommandations suivantes lors de la création de contenu publié sur le web.
Écrire des documents conformes et valides, respectant les standards du web
- Les balises et les attributs HTML doivent être utilisés conformément aux règles établies par les recommandations du W3C
, le World Wide Web Consortium. - En respectant les standards, vos documents sont compatibles avec les technologies web en développement et les plus récentes fonctionnalités des navigateurs.
- Il existe des outils en ligne pour la validation du balisage : nous les utiliserons régulièrement au cours de la session.
Travail formatif : validez votre code
Utilisez le validateur à cette adresse pour valider le code de votre exercice 1 : Validateur W3C
Choissez l'onglet Validate by File Upload et choisissez le fichier html de votre exercice 1
Utiliser un balisage sémantique pour donner du sens au contenu
Le balisage sémantique consiste à utiliser les balises pour donner du sens au contenu d'une page web.
>>> Les éléments du document web doivent être sémantiques...
... c'est-à-dire, signifiants et descriptifs.
>>> Le balisage sémantique met l'accent...
... sur le choix d'éléments décrivant le contenu de manière adéquate et non sur leur présentation dans le navigateur :
- Par exemple, l'utilisation d'un élément
idans le seul but de créer de l'italique est à proscrire. Il ne doit être utilisé que pour baliser un mot ou une expression en langue étrangère ou du jargon technique ; - L'usage d'un élément pour autre chose que ce qu'il signifie apauvrit le sens donné au contenu et rend l'interprétation du document aléatoire.
>>> Le balisage sémantique n'est pas qu'une simple conformité aux standards...
...car un document peut être considéré valide quant aux standards de l'écriture, mais déficient sur le plan de la signification du contenu.
Par exemple, si vous utilisez un élément de paragraphe générique tel que p plutôt qu'un élément h1 ou h2 pour baliser un titre, votre document sera valide, mais pauvre en sens.
>>> Un balisage sémantique garantit une compatibilité...
...avec un grand nombre d'environnements de navigation.
>>> Un balisage sémantique permet aux agents utilisateurs non humains...
...d'analyser correctement le contenu et de décider comment le traiter (exemple : la fonction d'indexation d'un moteur de recherche ou la lecture vocale du contenu à l'écran).
Un web sémantique
Le web sémantique est une notion importante. C'est ce qui permet aux différents programmes de comprendre le sens des informations qu'ils traitent.
Qu'il s'agisse d'un moteur de recherche ou d'une technologie d'assistance, ces programmes ont besoin de pouvoir identifier la nature des données qu'ils parcourent, que ce soit pour les référencer ou pour les restituer correctement.
C'est Tim Berners-Lee, l'inventeur du World Wide Web qui, le premier, évoqua le web sémantique:
« J'ai fait un rêve pour le Web [dans lequel les ordinateurs] deviennent capables d'analyser toutes les données sur le Web — le contenu, les liens, et les transactions entre les personnes et les ordinateurs. Un « Web Sémantique », qui devrait rendre cela possible, n'a pas encore émergé, mais quand ce sera fait, les mécanismes d'échange au jour le jour, de bureaucratie et de nos vies quotidiennes seront traités par des machines dialoguant avec d'autres machines. Les « agents intelligents » qu'on nous promet depuis longtemps vont enfin se concrétiser. »
— Tim Berners-Lee, Weaving the Web
Structurer logiquement les documents
>>> La lecture de la source du document devrait être logique
Le contenu doit être ordonné et hiérarchisé. Les titres et les sous-titres doivent suivre une hiérarchie claire et signifiante.
>>> La structure logique ne doit pas être subordonnée à la structure graphique
On ne doit pas sacrifier le sens et la structure du contenu balisé pour des considérations graphiques.
Ce qui ne veut pas dire à l'inverse de sacrifier la qualité de la présentation graphique : des règles de style bien conçues s'occupent de l'aspect graphique.
Séparer la présentation de la structure
Un bon balisage consiste à utiliser des balises dont la sémantique est adéquate tout en les liant à des règles de style répertoriées dans une feuille de style distincte du HTML.
Travail formatif
Voici le balisage et le texte d'une recette tirée d'un site de cuisine :
See the Pen c02-balisage sémantique by Sylvain Lamoureux (@slamoureux) on CodePen.
D'après ce que nous venons de voir à propos du balisage sémantique et de la structure d'un document :
- Corrigez le balisage en fonction des bonnes pratiques énoncées au début du cours et du balisage sémantique;
- Ajoutez de l'indentation au balisage afin de mettre en évidence l'imbrication du code et afin qu'il soit plus lisible.
Structure du document
Avant de créer le contenu réel, il est nécessaire de donner une structure globale valide au document HTML lui-même. Revenons sur la structure du document que nous avons vue en partie lors du premier cours.
Un document HTML complet comporte trois parties
- une déclaration de la version HTML
- un entête
- un corps
Voici la structure minimale exigée pour vos pages HTML :
Déclaration de type de document (DTD: Document Type Definition)
Pour être valide, un document HTML doit commencer par une déclaration de type de document qui identifie la version HTML utilisée dans le document :
<!DOCTYPE html>
La déclaration permet notamment au validateur de déterminer la version de HTML à valider.
L'absence de déclaration de type de document - ou encore une déclaration de type de document erronnée - peut engendrer un comportement d'affichage erratique de la part des navigateurs.
Entête du document (élément head)
L'en-tête contient des informations essentielles sur le document (mais qui ne font pas partie de son contenu graphique).
On y trouve au minimum :
- un élément
titledont le contenu textuel doit être descriptif pour qu'il soit valide ; - un élément
metaprécisant le mode d'encodage de caractères.
<meta charset="UTF-8">
L'encodage UTF-8 permet d'interpréter correctement les caractères spéciaux de la langue française que vous utilisez dans le corps (body) de vos pages HTML.
<title>Titre de la page - Nom du site</title>
Dans un navigateur, le contenu de l'élément title est affiché dans l'onglet de la page. Il est typiquement composé du titre de la page courante et du nom du site web auquel cette page appartient.
« Le titre d'une page fait partie des éléments principaux qui sont scannés lors de l'indexation d'une page. C'est aussi le texte qui est affiché parmi les résultats du moteur de recherche, de façon proéminente et donc visible par les utilisateurs qui trouvent votre site grâce à un moteur de recherche. »
tiré de : <title> : l'élément de titre du document (MDN Web docs)
Outre l'encodage du texte, nous verrons d'autres types de contenus destinés à l'élément meta lors des prochains cours.
Les données fournies dans les éléments meta sont utilisées par les serveurs, les navigateurs web et les moteurs de recherche mais restent invisibles à l'affichage dans un navigateur graphique.
Corps du document (élément body)
Le corps du document délimité avec <body></body> contient tout le contenu du document, soit la partie affichée dans la fenêtre d'un navigateur graphique ou encore dictée par un lecteur d'écran.
Le formulaire HTML: un survol
Les formulaires HTML sont caratérisés par des éléments qui permettent de collecter des informations auprès des utilisateurs.
Le formulaire le plus connu est sans doute le champ de recherche de Google :
L'utilisateur remplit le formulaire et appuie sur un bouton pour soumettre les informations au serveurs:
Un formulaire peut comprendre plusieurs contrôles, chacun récoltant des informations différentes.
Le serveur doit pouvoir mettre en correspondance les données saisies et les éléments du formulaire.
C'est ici que le nom (l'attribut name) entre en jeu: il sert à nommer le contrôle et à identifier la valeur entrée par l'utilisateur. Lors de l'envoi du formulaire, il se forme ainsi des couples nom / valeur qui sont traités par le programme:
Structure d'un formulaire <form>
Quelques caractéristiques :
- Les éléments d'un formulaire (c'est-à-dire un groupe de contrôles utilisés pour recueillir des informations) sont obligatoirement inclus dans les balises
<form></form>. - Tout contenu web (texte
<p>, image<img>, tableau<table>, etc.) peut être ajouté dans un élémentform, mais son rôle principal est de servir de conteneur à des contrôles (cases à cocher, champs de saisie, boutons, etc.) permettant de saisir des informations. - Le formulaire possède les attributs nécessaires pour interagir avec son programme de traitement.
- Un même document HTML peut contenir plusieurs formulaires, mais il est strictement interdit d'insérer un formulaire dans un autre formulaire, car cela crée un comportement inconsistant dont le rendu final dépendra du navigateur.
- Quand l'utilisateur a fini de remplir son formulaire et appuie sur le bouton Envoyer, le navigateur prend les informations, les organise sous forme de paires nom/valeur, les encode pour leur transfert et les envoie au serveur.
Syntaxe
Les éléments qui composent un formulaire sont inclus entre les balises <form> et </form> dont la syntaxe minimale est la suivante :
<form action="traitement.php" method="post">
(...)
</form>
où:
action(obligatoire) a pour valeur l'URI du programme qui traite les données recueillies par le formulaire.
method(obligatoire) est la méthode de transmission des données du formulaire:- Valeur
"get": transmet les données en clair dans l'adresse URL; la taille des données ne peut dépasser 256 octets. Utile pour les formulaires courts, comme un champ de recherche, où la sécurité n'est pas un enjeu. On ne doit pas envoyer de mots de passe ou autres données sensibles par cette méthode ; - Valeur
"post": transmet les données dans le corps de la requête; la taille des données n'est pas limitée. Cette méthode est souvent préférée à la première pour les formulaires longs ou qui nécessitent un bon degré de sécurité, car elle n'affiche pas en clair les données saisies dans le formulaire et permet leur encryptage.
- Valeur
Éléments de formulaire courants
Champ de texte <input type="text">
Code
<label for="nom">Votre nom : </label>
<input type="text" name="nom" id="nom">
Résultat
Attributs courants
type="text"
Lorsque l'attribut type vaut text, il crée un champ de saisie d'une seule ligne de texte.
Si l'attribut type n'est pas spécifié pour un élément input, ce dernier est par défaut un champ de texte.
name
Chaque contrôle de formulaire exige un attribut name afin d'être identifié correctement à l'étape du traitement des données. Sa valeur identifie le contrôle et est envoyée au serveur conjointement aux données.
maxlength
L'attribut maxlength fixe une limite sur le nombre de caractères accepté dans un champ de saisie lorsque nécessaire. Par exemple, si l'utilisateur doit indiquer une année, maxlength peut valoir 4.
Voir le Pen c03-form01 de Sylvain Lamoureux (@slamoureux) sur CodePen.
Saisie d'un mot de passe: <input type="password">
Code
<label for="usager">Nom d'usager : </label>
<input type="text" name="usager" id="usager">
<label for="motdepasse">Mot de passe : </label>
<input type="password" name="motdepasse" id="motdepasse">
Résultat
Attributs
type="password"
Lorsque l'attribut type vaut password, il crée un contrôle qui présente les caractéristiques d'un champ de saisie, à l'exception près que les caractères sont masqués.
name
L'attribut name donne le nom du champ de mot de passe qui est envoyé au serveur avec le mot de passe saisi.
id
L'attribut id permet d'associer le champ de saisie à son intitulé (label).
maxlength
L'attribut maxlength fixe une limite sur le nombre de caractères acceptés dans un champ de saisie lorsque nécessaire.
See the Pen c03-form02 by Sylvain Lamoureux (@slamoureux) on CodePen.
Bien que le mot de passe soit masqué à l'écran, les données saisies ne sont pas envoyées au serveur de manière sécurisée. Ce contrôle ne doit pas donc pas être utilisé tel quel pour l'envoi de données sensibles, tel qu'un numéro de carte bancaires. Pour une sécurité totale, le serveur doit être configuré de manière particulière, mais ce sujet est hors des cadres du présent cours.
Saisie d'un courriel: <input type="email">
Code
<label for="courriel">Votre courriel : </label>
<input type="email" name="courriel" id="courriel" placeholder="adresse de courriel">
<input type="submit" value="Envoyer">
Résultat
Attributs
type="email"
L'élément input de type email facilite la saisie d'une adresse de messagerie. Les navigateurs contrôleront le format des informations fournies. Certains téléphones optimisent leur clavier en affichant des touches utiles pour le contexte (comme @, .com ou autres).
Saisissez du texte autre qu'un courriel dans le champ de saisie, puis appuyez sur le bouton «Envoyer» pour faire l'essai de la validation par le navigateur.
name
L'attribut name donne le nom du champ de courriel qui est envoyé au serveur avec les informations saisies.
id
L'attribut id permet d'associer le champ de saisie à son intitulé (label).
See the Pen c03-form03 by Sylvain Lamoureux (@slamoureux) on CodePen.
Saisie d'un URL: <input type="url">
Code
<label for="url_pf">Adresse de mon portfolio : </label>
<input type="url" name="url_pf" id="url_pf">
<input type="submit" value="Envoyer">
Résultat
Attributs
type="url"
Un champ de saisie de type url peut être utilisé lorsque l'utilisateur doit saisir l'adresse d'une page web. Les navigateurs contrôleront le format des informations fournies. Certains téléphones présentent un clavier optimisé affichant des touches utiles pour le contexte (comme .com ou autres). Pour les anciens navigateurs cet élément est traité comme un simple champ de texte.
Saisissez du texte autre qu'un URL dans le champ de saisie, puis appuyez sur le bouton « Envoyer » pour faire l'essai de la validation.
name
L'attribut name donne le nom du champ d'url qui est envoyé au serveur avec les informations saisies.
id
L'attribut id permet d'associer le champ de saisie à son intitulé (label).
See the Pen c03-form04 by Sylvain Lamoureux (@slamoureux) on CodePen.
Champ de recherche : <input type="search">
Code
<input type="search" name="search" placeholder="Saisir un mot clé">
<input type="submit" value="Rechercher">
Résultat
Attributs
type="search"
Le champ de saisie de type search est traité de manière particulière par les navigateurs. Safari et Chrome, par exemple, ajoutent un bouton en forme de « x » pour effacer les informations déjà saisies et arrondissent les angles du champ.
name
L'attribut name donne le nom du champ de recherche qui est envoyé au serveur avec les informations saisies.
placeholder
Avec n'importe quel champ de saisie de texte, vous pouvez définir l'attribut placeholder dont la valeur donne le texte qui est affiché dans le champ en attendant que l'utilisateur clique dans cette zone.
See the Pen c03-form05 by Sylvain Lamoureux (@slamoureux) on CodePen.
Saisie d'une date : <input type="date">
Code
<label for="date">Date de départ : </label>
<input type="date" name="date" id="date">
<input type="submit" value="Réserver">
Résultat
Attributs
type="date"
L'élément input de type date est tout désigné dans la situation où l'utilisateur doit fournir une date. Les navigateurs compatibles font afficher un calendrier contextuel lorsque l'utilisateur clique dans le champ de saisie. Pour les anciens navigateur, cet élément est traité comme un simple champ de texte.
name
L'attribut name donne le nom du champ de date qui est envoyé au serveur avec les informations saisies.
id
L'attribut id permet d'associer le champ de saisie à son intitulé (label).
See the Pen c03-form06 by Sylvain Lamoureux (@slamoureux) on CodePen.
Saisie d'une couleur : <input type="color">
Code
<label for="couleur">Couleur de dossard : </label>
<input type="color" name="couleur" id="couleur">
<input type="submit" value="Choisir">
Résultat
Attributs
type="colorte"
L'élément input de type color est tout désigné dans la situation où l'utilisateur doit choisir une couleur. Les navigateurs compatibles font afficher un sélecteur de couleur contextuel lorsque l'utilisateur clique dans le champ de saisie. Pour les anciens navigateur, cet élément est traité comme un simple champ de texte.
name
L'attribut name donne le nom du champ de date qui est envoyé au serveur avec les informations saisies.
id
L'attribut id permet d'associer le champ de saisie à son intitulé (label).
Zone de texte multiligne: <textarea>
L'élément textarea permet de créer une zone de saisie de texte multiligne. Contrairement aux autres éléments de saise, celui-ci n'est pas vide. Vous devez donc inclure les balises d'ouverture et de fermeture.
Le texte qui apparaît entre les balises sera affiché dans la zone de texte lors du chargement de la page. Si l'utilisateur ne supprime pas ce texte, le message envoyé au serveur le contiendra, en plus du texte saisi. Certains sites ajoutent du code JavaScript pour effacer le texte initial lorsque l'utilisateur clique dans la zone de texte.
Code
<textarea name="avis">Écrivez votre avis ici...</textarea>
Résultat
Attributs
name
Lorsque le formulaire est soumis, le navigateur envoie le texte entré par l'utilisateur avec le nom spécifié par l'attribut name (obligatoire).
cols, rows
Pour ajuster la taille du textarea, on peut utiliser les attributs cols (dont la valeur est un nombre de caractères) et rows (dont la valeur est un nombre de lignes), mais il est préférable d'utiliser les propriétés width et height des CSS afin de faciliter l'entretien de la page.
See the Pen c03-form09 by Sylvain Lamoureux (@slamoureux) on CodePen.
Cases à cocher: <input type="checkbox">
Les input de type checkbox permettent de créer un groupe d'options à cocher. Ce type de input est privilégié lorsque l'on veut offrir à l'utilisateur la possibilité de cocher une ou plusieurs options d'un groupe de cases.
Code
<p>Parmi ces services de musique en ligne, lequel ou lesquels avez-vous utilisés ?</p>
<ul>
<li>
<input type="checkbox" name="service" value="gpmusic" id="gpmusic">
<label for="gpmusic">Google Play Music</label>
</li>
<li>
<input type="checkbox" name="service" value="spotify" id="spotify">
<label for="spotify">Spotify</label>
</li>
<li>
<input type="checkbox" name="service" value="deezer" id="deezer">
<label for="deezer">Deezer</label>
</li>
<li>
<input type="checkbox" name="service" value="applem" id="applem">
<label for="applem">Apple Music</label>
</li>
<li>
<input type="checkbox" name="service" value="tidal" id="tidal">
<label for="tidal">Tidal</label>
</li>
<li>
<input type="checkbox" name="service" value="aucun" id="aucun">
<label for="aucun">Aucun</label>
</li>
</ul>
Résultat
Parmi ces services de musique en ligne, lequel ou lesquels avez-vous utilisés ?
L'exemple précédent montre les couples input et label insérés dans des éléments de liste <li> car il s'agit d'une liste d'options. Mais ce n'est pas obligatoire: d'autres stratégies de balisage sont possibles ici. On utilise parfois des éléments <p> ou <div> pour regrouper ces éléments, ou encore des bris de ligne dans certaines cisconstances.
See the Pen c03-form07 by Sylvain Lamoureux (@slamoureux) on CodePen.
On pourrait aussi précocher une option lorsque cela est pertinent grâce à l'attribut checked="checked".
Voici un autre exemple d'utilisation de case à cocher, mais cette fois-ci avec une case unique.
Code
<p>Pour rester informé, abonnez-vous à notre infolettre !</p>
<input type="checkbox" name="info" value="info" id="info">
<label for="info">Abonnez-moi à l'infolettre</label>
Résultat
Pour rester informé, abonnez-vous à notre infolettre !
See the Pen c03-form10 by Sylvain Lamoureux (@slamoureux) on CodePen.
Attributs
type="checkbox"
Les cases à cocher permettent à l'utilisateur de sélectionner et de désélectionner une ou plusieurs options.
name
L'attribut name sert à indentifier un groupe de cases à cocher. Sa valeur est envoyée au serveur accompagnée des valeurs des options sélectionnées. La valeur name doit être la même pour l'ensemble des cases à cocher d'un même groupe.
value
L'attribut value est la valeur envoyée au serveur lorsque la case correspondante est cochée. Chaque case d'un groupe doit avoir une valeur distincte.
id
L'attribut id sert à lier la case à cocher à son intitulé (label).
checked
L'attribut checked permet d'indiquer que la case correspondante sera déjà cochée au chargement de la page. Sa valeur est checked.
Boutons radio: <input type="radio">
Les input de type radio (« boutons radio ») se manipulent un peu de la même façon que les checkbox.
À la différence des checkbox toutefois, l'utilisateur ne peut cocher qu'un seul bouton radio à la fois à l'intérieur d'un même groupe. L'attribut name sert à identifier un groupe.
Code
<input type="radio" name="menu" value="poulet" id="poulet">
<label for="poulet">Plat de poulet</label>
<input type="radio" name="menu" value="viande" id="viande">
<label for="viande">Plat de viande rouge</label>
<input type="radio" name="menu" value="vegetarien" id="vegetarien">
<label for="vegetarien">Plat végétarien</label>
Résultat
Choisissez votre plat du midi :
Attributs
name
L'attribut name identifie un groupe de boutons radio. Un seul et même nom assure que l'utilisateur ne peut choisir qu'une seule option. La valeur de name est envoyée au serveur afin d'identifier correctement le groupe de boutons radio et la réponse qui lui est associée.
value
L'attribut value est la valeur envoyée au serveur lorsque l'option correspondante est sélectionnée. Chaque bouton d'un groupe doit avoir une valeur distincte.
id
L'attribut id sert à lier le bouton radio à son intitulé (label)
checked
L'attribut checked avec la valeur checked permet de cocher un bouton à l'avance. Un seul bouton peut avoir cet attribut.
Lorsqu'un bouton est sélectionné, il ne peut plus être désélectionné L'utilisateur peut uniquement choisir une autre option. C'est pourquoi lorsque vous n'offrez qu'un seul choix (par exemple, pour signaler que vous avez lu et accepté des conditions), vous devez alors utiliser une case à cocher.
See the Pen c03-form11 by Sylvain Lamoureux (@slamoureux) on CodePen.
Menu déroulant et liste déroulante: select, option
Un menu déroulant ou une liste déroulante permet à l'utilisateur de sélectionner une option parmi celles prédéfinies.
L'élément select permet de créer un menu déroulant ou une liste déroulante. Il contient au moins deux éléments option.
Menu déroulant
Par défaut, la valeur de l'attribut size est de 1 (une seule option visible).
La sélection multiple est impossible dans un menu déroulant, un peu comme un groupe de boutons radio.
Code
<label for="pays">Pays : </label> <select name="listepays" id="pays"> <option value="australie">Australie</option> <option value="belgique">Belgique</option> <option value="canada">Canada</option> <option value="danemark">Danemark</option> <option value="france" selected="selected">France</option> </select>
Résultat
Notez l'attribut selected="selected" utilisé pour pré-sélectionner un élément de la liste, en l'occurrence « France » dans l'exemple ci-haut.
See the Pen c03-form08 by Sylvain Lamoureux (@slamoureux) on CodePen.
La liste déroulante
La liste déroulante permet d'afficher plus d'une option à la fois. Si cela est souhaité, elle peut permettre la sélection multiple.
La valeur «5» donnée à l'attribut size permet de créer une liste déroulante avec cinq options visibles à la fois.
Code
<select name="listepays" size="5" multiple="multiple">
<option value="australie">Australie</option>
<option value="belgique">Belgique</option>
<option value="canada">Canada</option>
<option value="danemark">Danemark</option>
<option value="france" >France</option>
</select>
Résultat
Attributs de select
name
L'attribut name précise le nom du contrôle de formulaire qui est envoyé au serveur, accompagné de la valeur sélectionnée par l'utilisateur.
size
L'attribut size permet de transformer un menu déroulant en liste déroulante. Sa valeur précise le nombre d'options à afficher.
multiple="multiple"
L'attribut multiple avec la valeur multiple permet de sélectionner plusieurs options dans la liste (fonctionnel seulement lorsque size vaut plus de 1).
L'utilisateur doit cependant appuyer simultanément sur la touche Ctrl (Windows) ou Cmd (MacOS) pour faire une sélection multiple.
Attributs de option
value
L'attribut value précise la valeur qui sera envoyée au serveur avec le nom du contrôle lors de la sélection de l'option.
selected="selected"
L'attribut selected sert à pré-sélectionner une option du menu déroulant ou de la liste déroulante. Sa valeur doit être selected. Si cet attribut n'est pas défini, la première option est sélectionnée par défaut. Si l'utilisateur ne choisit pas une autre option, c'est donc cette valeur qui est envoyée au serveur.
Envoi de fichier: <input type="file">
Si vous souhaiter permettre à l'utilisateur d'envoyer un fichier comme une image, une vidéo ou un PDF, vous devez utiliser un élément input de type file.
Seule la méthode post accepte ce type d'envoi.
Code
<p>Envoyez votre curriculum vitae au format PDF :</p>
<input type="file" name="cv">
Résultat
Envoyez votre curriculum vitae au format PDF :
Attributs
type="file"
Ce type d'élément crée dans certains navigateurs un champ comparable à un champ de saisie suivi d'un bouton Parcourir; d'autres navigateurs afficheront plutôt un bouton Choisir le fichier, suivi du texte « aucun fichier sélectionné » ou du nom du fichier sélectionné. Lorsque l'utilisateur clique sur le bouton, une fenêtre apparaît afin qu'il puisse sélectionner sur son ordinateur le fichier à envoyer. L'aspect de cette fenêtre dépend du système d'exploitation utilisé.
accept
L'attribut accept permet en principe de préciser le type de fichier à télécharger (mp3, pdf, jpg, etc.). Les navigateurs ne prennent cependant pas en charge cet attribut. Il est conseiller pour le moment de valider le type de fichiers par des scripts serveur.
Bouton d'envoi: <input type="submit" ... >
Code
<p>Abonnez-vous à notre liste de diffusion :</p>
<input type="email" name="courriel">
<input type="submit" value="Envoyer">
Résultat
Abonnez-vous à notre liste de diffusion :
Attributs
type="submit"
Le bouton d'envoi est utiisé pour soumettre le formulaire au serveur.
value
L'attribut value détermine le texte qui s'affiche dans le bouton.
name
L'attribut name est reconnu mais non obligatoire.
Exemple de formulaire simple et fonctionnel
Un formulaire doit se placer à l'intérieur d'un élément <form>. Il présente des contrôles et se termine par un bouton d'envoi des données :
Code
<form action="traitement.php" method="post">
<label for="usager">Nom d'usager : </label>
<input type="text" name="usager" id="usager">
<label for="motdepasse">Mot de passe : </label>
<input type="password" name="motdepasse" id="motdepasse">
<input type="submit" value="Se connecter">
</form>
Résultat
See the Pen c03-form14 by Sylvain Lamoureux (@slamoureux) on CodePen.
Les bonnes pratiques
L'élément label
L’élément label est un intitulé accompagnant un champ de formulaire.
Son utilisation permet aux navigateurs d’associer explicitement cet intitulé au champ de formulaire.
Ainsi, un clic sur l’intitulé donnera le focus au champ de formulaire, ce qui est très pratique notamment pour les boutons radio ou les cases à cocher parfois trop petits pour certains utilisateurs à dextérité réduite.
Cette association intitulé/champ est importante également pour les lecteurs d’écran, qui ont besoin d'étiquettes explicites pour associer chaque champ de formulaire à un texte.
Associer un label avec son champ
On associe le label au champ auquel il est lié par l'intermédiaire de l'attribut for auquel on donne la même valeur que le id du champ concerné, comme ceci:
Code
<label for="prenom">Prénom : </label>
<input type="text" name="prenom" id="prenom">
Résultat
See the Pen c03-form13 by Sylvain Lamoureux (@slamoureux) on CodePen.
Les attributs id et name peuvent sembler redondants lorsqu'ils sont appliqués à des éléments de contrôles d'un formulaire comme input ou select, d'autant plus qu'on leur donne souvent la même valeur. Leurs fonctions sont cependant distinctes.
- La valeur de l'attribut
nameest transmise au programme de traitement du formulaire lorsque celui-ci est envoyé. - L'attribut
idest utilisé pour donner à l'élément un identifiant unique auquel il est possible d'accéder dans une feuille de style, un script ou un élémentlabelcomme on le voit dans l'exemple précédent. - Un attribut
idne peut donc pas remplacernamecar sa valeur n'est pas envoyée avec le formulaire.
Les éléments fieldset et legend
L'élément fieldset est utilisé pour créer un groupe logique de contrôles. Il contient un élément legend qui décrit ce groupe logique.
L'ajout d'éléments legend dans un formulaire favorise l'accessibilité, car il est reconnu par les lecteurs d'écran et les agents utilisateurs non humains.
Exemple d'utilisation d'un élément fieldset avec son élément legend:
Code
<fieldset>
<legend>Adresse résidentielle</legend>
<label for="rue">Rue : </label>
<input type="text" name="rue" id="rue">
<label for="ville">Ville : </label>
<input type="text" name="ville" id="ville">
<label for="codepostal">Code postal : </label>
<input type="text" name="codepostal" id="codepostal">
</fieldset>
Résultat
Activité d'évaluation
Exercice 2 - Intro au HTML (2): le formulaire HTML
L'exercice 2 consiste à créer une page Web comportant un formulaire. Cette page s'ajoute à celle que vous avez créée la semaine dernière dans le cadre de l'exercice 1.
Documents à remettre
Un dossier rigoureusement nommé comme suit:
- groupe du mercredi 9h : gr1_nomprenom_ex2
- groupe du vendredi 8h : gr2_nomprenom_ex2
contenant les fichiers monarticle.html, monformulaire.html et un dossier images contenant les quatre images de la semaine dernière en plus de l'image fournie cette semaine.
Structure de fichiers :
ou
Échéancier
Remettez le dossier complet, zippé, dans l'espace Teams/Devoir, au plus tard :
- le lundi (groupes du mercredi) ou le mercredi (groupe du vendredi) suivant le cours, 9h le matin
Grille d'évaluation
Voir la grille d'évaluation complète sur Teams/Devoirs.
Travail à faire
Vous devez créer la page monformulaire.html du site « Blogue plein air » (voir Ex1).
Pour cela, suivez cette procédure :
1) Créez un dossier au nom de gr1_nomprenom_ex2 ou gr2_nomprenom_ex2, dans lequel vous insérez le fichier monarticle.html de l'exercice 1, et dans lequel vous insérez également le dossier images de l'exercice 1.
Dans le dossier images, insérez l'image supplémentaire fournie dans Teams/Devoirs pour l'exercice 2.
2) Ouvrez Visual Studio Code(VSC) et chargez ensuite le dossier gr1_nomprenom_ex2 ou gr1_nomprenom_ex2 (menu Fichier/Ouvrir un dossier...)
3) Faites afficher le fichier monarticle.html dans la fenêtre d'édition de VSC ;
4) Dans le fichier monarticle.html, effectuez d'abord les corrections proposées par le professeur ;
5) Ajoutez les éléments meta suivants (à la suite de l'élément title déjà en place dans la partie <head> de votre page) pour rendre la page plus efficace :
<meta name="description" content="La Gaspésie est un véritable paradis du ski de randonnée">
<meta name="keywords" content="plein air, ski, randonnée, Gaspésie, Chic-chocs, FQME">
<meta name="author" content="Inscrire votre nom ici">
6) Complétez la section body de la façon suivante :
- Juste après le nom du blogue (Blogue plein air), insérez une liste non ordonnée de deux liens: Mon article et Mon formulaire (voir l'image suivante)
7) Une fois ces modifications faites, créez le document monformulaire.html.
8) Copiez le code de monarticle.html et collez-le dans le document monformulaire.html nouvelle créé.
9) Faites afficher le fichier monformulaire.html dans VSC.
10) Modifiez le contenu de <title> de manière appropriée, comme ceci : Contactez-nous ! - Blogue plein air
10) Modifiez la section body de la façon suivante :
- Changez le contenu du titre de la page
h1par « Contactez-nous ! » afin de refléter le contenu de cette nouvelle page ; - Remplacez le texte « Par Raphaël Charron » par « Contribuez à notre blogue ! »
- Retirez tout le texte de l'article sauf la section « Nos médias sociaux » et le copyright ;
- À la place du texte retiré, ajoutez un formulaire comme celui affiché dans l'exemple présenté plus bas.
Au final, la nouvelle page monformulaire.html prendra cette allure :
Inspirez-vous des exemples de contrôles de formulaire décrits dans les notes de la Leçon 2 pour créer le formulaire de la page monformulaire.html.
N'oubliez pas que les éléments form, input et autres comportent des règles d'utilisation que vous devez appliquer (par exemple, des éléments et des attributs obligatoires comme action, method, name, id, etc.). Voir les notes de cours à ce sujet.