Le Web a été inventé par Tim Berners-Lee au début des années 1990.
HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. » ;
CSS (Cascading Style Sheets, aussi appelées feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.
Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont HTML5 et CSS3.
LE NAVIGATEUR WEB
Le navigateur web est un programme qui permet d'afficher des sites web. Il lit les langages HTML et CSS pour savoir ce qu'il doit afficher.
Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla Firefox, Internet Explorer (maintenant edge), Safari, Opera… Chacun affiche un site web de manière légèrement différente des autres navigateurs.
Pour travailler sur le code on utilise des « éditeur de texte » (Sublime Text, Notepad++, jEdit, vim…).
UN LANGAGE DE BALISES
Les balises
Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et > , comme ceci : <balise> .
À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.
On distingue deux types de balises : les balises en paires et les balises orphelines.
Les balises en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :
Code : Tout sélectionner
<titre>Ceci est un titre</titre>
Code : Tout sélectionner
Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un titre
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ».
Une balise orpheline s'écrit comme ceci :
Code : Tout sélectionner
<image />
Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :
Code : Tout sélectionner
<balise attribut="valeur">
Code : Tout sélectionner
<image nom="photo.jpg" />
STRUCTURE D'UNE PAGE HTML
Voici la base du code HTML, sur une page web :
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
[b]Le doctype[/b]
<!DOCTYPE html>
La balise </html>
Code : Tout sélectionner
<html>
</html>
L'en-tête <head> et le corps <body>
Une page web est constituée de deux parties :
L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !
Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.
L'encodage ( charset )
Code : Tout sélectionner
<meta charset="utf-8" />
Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
Le titre principal de la page
Code : Tout sélectionner
<title>
Il est conseillé de garder le titre assez court (moins de 100 caractères, en général).
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur).
Insérer un commentaire
Un commentaire est une balise HTML avec une forme bien spéciale :
Code : Tout sélectionner
<!-- Ceci est un commentaire -->
Les paragraphes
Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci est un titre », etc.
Les paragraphes sont définis par la balise <p> </p>
Sauter une ligne
t les sauts de ligne par la balise <br /> .
Les titres
Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6> , à utiliser selon l'importance du titre.
La mise en valeur
On peut mettre en valeur certains mots avec les balises <strong> , <em> et <mark> .
Les listes
Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque item.
LES LIENS HYPERTEXTES
Un lien vers un autre site
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> . Il faut cependant lui ajouter un attribut, href , pour indiquer vers quelle page le lien doit conduire.
Par exemple, le code ci-dessous est un lien qui amène vers OpenClassrooms, situé à l'adresse https://openclassrooms.com :
Code : Tout sélectionner
<a href="https://openclassrooms.com">OpenClassrooms</a>
Comment faire un lien de la page 1 vers la page 2, sans avoir d'adresse en http:// ? En fait, c'est facile : si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du lien le nom du fichier vers lequel on veut amener. Par exemple : <a href="page2.html"> . On dit que c'est un lien relatif.
Voici le code que nous allons utiliser dans nos fichiers page1.html et page2.html .
page1.html
Code : Tout sélectionner
<p>Bonjour. Souhaitez-vous consulter <a href="page2.html">la page 2</a> ?</p>
La page 2 (page d'arrivée) affichera simplement un message pour indiquer que l'on est bien arrivé sur la page 2 :
Code : Tout sélectionner
<h1>Bienvenue sur la page 2 !</h1>
Les choses se corsent un petit peu si les pages sont situées dans des dossiers différents. Idéalement, elles ne devraient pas être trop loin l'une de l'autre (dans un sous-dossier, par exemple).
Imaginons que page2.html se trouve dans un sous-dossier appelé contenu.
Dans ce cas de figure, le lien doit être rédigé comme ceci :
Code : Tout sélectionner
<a href="contenu/page2.html">
Code : Tout sélectionner
<a href="contenu/autredossier/page2.html">
Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il faut écrire deux points, comme ceci :
Code : Tout sélectionner
<a href="../page2.html">
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page, pour que le visiteur puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre, par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :
Code : Tout sélectionner
<h2 id="mon_ancre">Titre</h2>
Code : Tout sélectionner
<a href="#mon_ancre">Aller vers l'ancre</a>
Infobulle - attribut <title>
Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut est facultatif.
La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien.
Voici comment reproduire ce résultat :
Code : Tout sélectionner
<p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com" title="Vous ne le regretterez pas !">OpenClassrooms</a> ?</p>
Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a> :
Code : Tout sélectionner
<p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com" title="Vous ne le regretterez pas !" target="_blank">OpenClassrooms</a> ?</p>
Un lien pour envoyer un e-mail
Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de type mailto . Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci :
Code : Tout sélectionner
<p><a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a></p>
Un lien pour télécharger un fichier
Beaucoup d'entre vous se demandent comment cela se passe pour le téléchargement d'un fichier… En fait, il faut procéder exactement comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger.
Par exemple, supposez que vous vouliez faire télécharger monfichier.zip . Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce fichier :
Code : Tout sélectionner
<p><a href="monfichier.zip">Télécharger le fichier</a></p>
Il existe trois type d'images: format JPEG - PNG et GIF
Insertion d'images
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe ( <p></p> ). Voici un exemple d'insertion d'image :
Code : Tout sélectionner
<p>
Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />
<img src="images/montagne.jpg" alt="Photo de montagne" />
</p>
Infobulle
L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de title . Cet attribut est facultatif (contrairement à alt ).
Voici ce que cela peut donner :
Code : Tout sélectionner
<p>
Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />
<img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau les Alpes quand même !" />
</p>
Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille originale.
Je les place toutes les deux dans un dossier appelé par exemple img . J'affiche la version montagne_mini.jpg sur ma page et je fais un lien vers montagne.jpg , pour que l'image agrandie s'affiche lorsqu'on clique sur la miniature.
Voici le code HTML que je vais utiliser pour cela :
Code : Tout sélectionner
<p>
Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br />
<a href="img/montagne.jpg"><img src="img/montagne_mini.jpg" alt="Photo de montagne" title="Cliquez pour agrandir" /></a>
</p>
Les figures
Au cours de la lecture de ce cours, vous avez déjà rencontré plusieurs fois des figures. Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.
Les figures peuvent être de différents types :
images ;
codes source ;
citations ;
etc.
Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images mais, contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte.
En HTML5, on dispose de la balise <figure> . Voici comment on pourrait l'utiliser :
Code : Tout sélectionner
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
</figure>
Code : Tout sélectionner
<figure>
<img src="images/blocnotes.png" alt="Bloc-Notes" />
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>
Bien comprendre le rôle des figures
Un peu plus tôt dans ce chapitre, je vous ai dit que les images devaient être situées dans des paragraphes (placées à l'intérieur d'une balise <p></p> ). Ce n'est pas tout à fait vrai.
Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe.
STRUCTURER UNE PAGE EN HTML
Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web :
<header> : en-tête ;
<footer> : pied de page ;
<nav> : liens principaux de navigation ;
<section> : section de page ;
<aside> : informations complémentaires ;
<article> : article indépendant.
Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.
Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent. On pourrait très bien placer l'en-tête en bas de la page, si on le souhaitait.
LES TABLEAUX
Un tableau s'insère avec la balise <table> et se définit ligne par ligne avec <tr> .
Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'en-tête).
Le titre du tableau se définit avec <caption> .
On peut ajouter une bordure aux cellules du tableau avec border . Pour fusionner les bordures, on utilise la propriété CSS border-collapse .
Un tableau peut être divisé en trois sections : <thead> (en-tête), <tbody> (corps) et <tfoot> (bas du tableau). L'utilisation de ces balises n'est pas obligatoire.
On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Il faut indiquer combien de cellules doivent être fusionnées.
LES FORMULAIRES
Créer un formulaire
Lorsqu'il vous prend subitement l'envie d'insérer un formulaire dans votre page HTML, vous devez pour commencer écrire une balise <form> </form> . C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.
Code : Tout sélectionner
<p>Texte avant le formulaire</p>
<form>
<p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>
Les zones de saisie basiques
Pour insérer une zone de texte dans une ligne, on va utiliser la balise <input />
On retrouvera cette balise plusieurs fois dans la suite de ce chapitre. À chaque fois, c'est la valeur de son attribut type qui va changer.
Pour créer une zone de texte à une ligne, on doit écrire :
Code : Tout sélectionner
<input type="text" />
Pour donner un nom à un élément de formulaire, on utilise l'attribut name . Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo :
Code : Tout sélectionner
<input type="text" name="pseudo" />
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p><input type="text" name="pseudo" /></p>
</form>
Les libellés
Cette zone de texte est bien jolie mais si votre visiteur tombe dessus, il ne sait pas ce qu'il doit écrire. C'est justement le rôle de la balise <label> :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
<label>Votre pseudo</label> : <input type="text" name="pseudo" />
</p>
</form>
Mais cela ne suffit pas. Il faut lier le label à la zone de texte.
Pour ce faire, on doit donner un nom à la zone de texte, non pas avec l'attribut name mais avec l'attribut id (que l'on peut utiliser sur toutes les balises).
Un name et un id sur le champ ? Cela ne va-t-il pas faire double emploi ?
Pas du tout ! En fait, l'id est utilisé pour identifier l'élément HTML pour pouvoir y accéder et le manipuler. Il est donc unique pour cet élément.
Le name , lui, réfère à la variable du formulaire que l’élément concerne. Ici, il n’y a qu’un seul élément qui pourra référer à la variable pseudo ; name et id auront donc la même valeur. Mais lorsque nous utiliserons des checkbox ou des radio , plusieurs éléments correspondront à la même variable. Par exemple, la variable couleur avec un élément pour rouge, un pour bleu et un pour vert. Ils auront donc le même name , mais pas le même id .
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l' id du champ… Le mieux est de le voir sur un exemple :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo" id="pseudo" />
</p>
</form>
Quelques attributs supplémentaires
On peut ajouter un certain nombre d'autres attributs à la balise <input /> pour personnaliser son fonctionnement :
on peut agrandir le champ avec size ;
on peut limiter le nombre de caractères que l'on peut saisir avec maxlength ;
on peut préremplir le champ avec une valeur par défaut à l'aide de value ;
on peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce qu'il faut saisir ; le champ fait 30 caractères de long mais on ne peut écrire que 10 caractères maximum à l'intérieur :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
</p>
</form>
Zone de mot de passe
Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une « zone de mot de passe », c'est-à-dire une zone où on ne voit pas à l'écran les caractères saisis. Pour créer ce type de zone de saisie, utilisez l'attribut type="password" .
Je complète mon formulaire. Il demande maintenant au visiteur son pseudo et son mot de passe :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" id="pseudo" />
<br />
<label for="pass">Votre mot de passe :</label>
<input type="password" name="pass" id="pass" />
</p>
</form>
Zone de texte multiligne
Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser <textarea> </textarea> .
Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser un label qui explique de quoi il s'agit.
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
<label for="ameliorer">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>
</form>
Comme vous pouvez le constater, c'est un peu petit ! Heureusement, on peut modifier la taille du <textarea> de deux façons différentes.
En CSS : il suffit d'appliquer les propriétés CSS width et height au <textarea> .
Avec des attributs : on peut ajouter les attributs rows et cols à la balise <textarea> . Le premier indique le nombre de lignes de texte qui peuvent être affichées simultanément, et le second le nombre de colonnes.
Pourquoi ouvre-t-on la balise <textarea> pour la fermer juste après ?
Vous pouvez préremplir le <textarea> avec une valeur par défaut. Dans ce cas, on n'utilise pas l'attribut value : on écrit tout simplement le texte par défaut entre la balise ouvrante et la balise fermante !
<
Code : Tout sélectionner
form method="post" action="traitement.php">
<p>
<label for="ameliorer">
Comment pensez-vous que je puisse améliorer mon site ?
</label>
<br />
<textarea name="ameliorer" id="ameliorer" rows="10" cols="50">
Améliorer ton site ?!
Mais enfin ! Il est tellement génialissime qu'il n'est pas nécessaire de l'améliorer !
</textarea>
</p>
</form>
Les zones de saisie enrichies
HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De nouveaux types de champs sont en effet apparus avec cette version. Il suffit de donner à l'attribut type de la balise <input /> l'une des nouvelles valeurs disponibles. Faisons un petit tour d'horizon !
Tous les navigateurs ne connaissent pas encore ces zones de saisie enrichies. À leur place, les anciennes versions des navigateurs afficheront une simple zone de saisie monoligne (comme si on avait écrit type="text" ). Entre nous, c'est parfait : les nouveaux navigateurs peuvent profiter des dernières fonctionnalités, tandis que les anciens affichent une zone de texte de remplacement qui convient tout aussi bien.
Vous avez donc tout intérêt à utiliser ces nouvelles zones de saisie dès aujourd'hui ! Au mieux, vos visiteurs profiteront des nouvelles fonctionnalités, au pire, ils ne verront aucun problème.
Vous pouvez demander à saisir une adresse e-mail :
Code : Tout sélectionner
<input type="email" />
Une URL
Avec le type url , on peut demander à saisir une adresse absolue (commençant généralement par http:// ) :
Code : Tout sélectionner
<input type="url" />
Numéro de téléphone
Ce champ est dédié à la saisie de numéros de téléphone :
Code : Tout sélectionner
<input type="tel" />
Nombre
Ce champ permet de saisir un nombre entier :
Code : Tout sélectionner
<input type="number" />
Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :
min : valeur minimale autorisée ;
max : valeur maximale autorisée ;
step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).
Un curseur
Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider), comme à la figure suivante :
Code : Tout sélectionner
<input type="range" />
Vous pouvez utiliser là aussi les attributs min, max et step pour restreindre les valeurs disponibles.
Couleur
Ce champ permet de saisir une couleur :
Code : Tout sélectionner
<input type="color" />
Attention, tous les navigateurs ne connaissent pas encore ce type de champ, mais la compatibilité progresse.
Date
Différents types de champs de sélection de date existent :
date : pour la date (05/08/1985 par exemple) ;
time : pour l'heure (13:37 par exemple) ;
week : pour la semaine ;
month : pour le mois ;
datetime : pour la date et l'heure (avec gestion du décalage horaire) ;
datetime-local pour la date et l'heure (sans gestion du décalage horaire).
Exemple :
Code : Tout sélectionner
<input type="date" />
Surveillez bien quels navigateurs gèrent ce type de champ, il n'est pas encore complètement reconnu.
Recherche
On peut créer un champ de recherche comme ceci :
Code : Tout sélectionner
<input type="search" />
Les éléments d'options
HTML vous offre une ribambelle d'éléments d'options à utiliser dans votre formulaire. Ce sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités. Nous allons passer en revue :
les cases à cocher ;
les zones d'options ;
les listes déroulantes.
Les cases à cocher
Créer une case à cocher ? Rien de plus simple ! Nous allons réutiliser la balise <input /> , en spécifiant cette fois le type checkbox :
Code : Tout sélectionner
<input type="checkbox" name="choix" />
Rajoutez un <label> bien placé, et le tour est joué !
<form method="post" action="traitement.php">
<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />
<input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />
<input type="checkbox" name="epinards" id="epinards" /> <label for="epinards">Epinards</label><br />
<input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
</p>
</form>
Enfin, sachez que vous pouvez faire en sorte qu'une case soit cochée par défaut, avec l'attribut checked :
Code : Tout sélectionner
<input type="checkbox" name="choix" checked />
Si cela vous perturbe, sachez que vous pouvez donner n'importe quelle valeur à l'attribut (certains webmasters écrivent parfois checked="checked" , mais c'est un peu redondant !). Dans tous les cas, la case sera cochée.
Les zones d'options
Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de possibilités. Elles ressemblent un peu aux cases à cocher, mais il y a une petite difficulté supplémentaire : elles doivent être organisées en groupes. Les options d'un même groupe possèdent le même nom ( name ), mais chaque option doit avoir une valeur ( value ) différente.
La balise à utiliser est toujours un <input /> , avec cette fois la valeur radio pour l'attribut type .
Les choses seront plus claires sur l'exemple ci-dessous :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>
</p>
</form>
Essayez d'enlever les attributs name , vous verrez qu'il devient possible de sélectionner tous les éléments d'options. Or, ce n'est pas ce que l'on veut ; c'est pour cela qu'on les « lie » entre eux en leur donnant un nom identique.
Vous noterez que cette fois on a choisi un id différent de name . En effet, les valeurs de name étant identiques, on n'aurait pas pu différencier les id (et vous savez bien qu'un id doit être unique !). Voilà donc pourquoi on a choisi de donner à l' id la même valeur que value .
Si vous avez deux zones d'options différentes, il faut donner un name unique à chaque groupe, comme ceci :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
<input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
<input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />
<input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
<input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>
</p>
<p>
Sur quel continent habitez-vous ?<br />
<input type="radio" name="continent" value="europe" id="europe" /> <label for="europe">Europe</label><br />
<input type="radio" name="continent" value="afrique" id="afrique" /> <label for="afrique">Afrique</label><br />
<input type="radio" name="continent" value="asie" id="asie" /> <label for="asie">Asie</label><br />
<input type="radio" name="continent" value="amerique" id="amerique" /> <label for="amerique">Amérique</label><br />
<input type="radio" name="continent" value="australie" id="australie" /> <label for="australie">Australie</label>
</p>
</form>
Les listes déroulantes
Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs possibilités. Le fonctionnement est un peu différent. On va utiliser la balise <select> </select> qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name à la balise pour donner un nom à la liste.
Puis, à l'intérieur du <select> </select> , nous allons placer plusieurs balises <option> </option> (une par choix possible). On ajoute à chacune d'elles un attribut value pour pouvoir identifier ce que le visiteur a choisi.
Voici un exemple d'utilisation :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</select>
</p>
</form>
Code : Tout sélectionner
<option value="canada" selected>Canada</option>
Code : Tout sélectionner
<form method="post" action="traitement.php">
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br />
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</p>
</form>
Les groupes ne peuvent pas être sélectionnés. Ainsi, dans notre exemple, on ne peut pas choisir « Europe » : seuls les noms de pays sont disponibles pour la sélection.
Finaliser et envoyer le formulaire
Nous y sommes presque. Il ne nous reste plus qu'à agrémenter notre formulaire de quelques dernières fonctionnalités (comme la validation), puis nous pourrons ajouter le bouton d'envoi du formulaire.
Regrouper les champs
Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset> . Chaque <fieldset> peut contenir une légende avec la balise <legend> . Regardez cet exemple :
Code : Tout sélectionner
<form method="post" action="traitement.php">
<fieldset>
<legend>Vos coordonnées</legend> <!-- Titre du fieldset -->
<label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom" />
<label for="prenom">Quel est votre prénom ?</label>
<input type="text" name="prenom" id="prenom" />
<label for="email">Quel est votre e-mail ?</label>
<input type="email" name="email" id="email" />
</fieldset>
<fieldset>
<legend>Votre souhait</legend> <!-- Titre du fieldset -->
<p>
Faites un souhait que vous voudriez voir exaucé :
<input type="radio" name="souhait" value="riche" id="riche" /> <label for="riche">Etre riche</label>
<input type="radio" name="souhait" value="celebre" id="celebre" /> <label for="celebre">Etre célèbre</label>
<input type="radio" name="souhait" value="intelligent" id="intelligent" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label>
<input type="radio" name="souhait" value="autre" id="autre" /> <label for="autre">Autre...</label>
</p>
<p>
<label for="precisions">Si "Autre", veuillez préciser :</label>
<textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>
</p>
</fieldset>
</form>
Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec l'attribut autofocus . Dès que le visiteur chargera la page, le curseur se placera dans ce champ.
Par exemple, pour que le curseur soit par défaut dans le champ prenom :
Code : Tout sélectionner
<input type="text" name="prenom" id="prenom" autofocus />
Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required .
Code : Tout sélectionner
<input type="text" name="prenom" id="prenom" required />
Les anciens navigateurs, qui ne reconnaissent pas cet attribut, enverront le contenu du formulaire sans vérification. Pour ces navigateurs, il sera nécessaire de compléter les tests avec, par exemple, des scripts JavaScript.
On dispose de pseudo-formats en CSS pour changer le style des éléments requis ( :required ) et invalides ( :invalid ). N'oubliez pas non plus que vous disposez du pseudo-format :focus pour changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.
Code : Tout sélectionner
:required
{
background-color: red;
}
Il ne nous reste plus qu'à créer le bouton d'envoi. Là encore, la balise <input /> vient à notre secours. Elle existe en quatre versions :
type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire ;
type="reset" : remise à zéro du formulaire ;
type="image" : équivalent du bouton submit , présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image ;
type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page. Nous ne l'utiliserons pas ici.
On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value .
Pour créer un bouton d'envoi, on écrira donc par exemple :
Code : Tout sélectionner
<input type="submit" value="Envoyer" />
Lorsque vous cliquez sur le bouton « Envoyer », le formulaire vous amène alors à la page indiquée dans l'attribut action . Souvenez-vous, nous avions imaginé une page fictive : traitement.php .