Nous avons vu, avec les liens, qu'il est possible de nous contacter à partir de notre site grâce aux courriels. Dans beaucoup de cas, ce ne sera pas suffisant. C'est pourquoi il existe les formulaires qui offrent des possibilités de choix assez intéressantes. Pour créer des formulaires, nous disposons de tout ce qui est nécessaire.
Zone de saisie simple
<form method="post" action="mailto:adresse_mail">
<label for="prenom">Votre prénom : </label>
<input type="text" name="prenom" id="prenom" placeholder="Séraphin">
</form>
La balise <form></form> est obligatoire. Tout ce qui fait partie du formulaire doit être compris entre les deux balises form. method="post" signifie que les données du formulaire vous parviendront par mail tandis que action="mailto:adresse_mail" est l'adresse mail du destinataire.
Notre zone de saisie est composée de deux parties, une étiquette et la zone de saisie à proprement parler. L'étiquette (label) est là pour indiquer quel type de donnée il faut saisir. Elle fait le lien avec la zone de saisie à l'aide de for="prenom". Bien que n'étant pas obligatoire, for est intéressant dans la mesure où, si on clique sur l'étiquette, le curseur de la souris se déplace dans la zone de saisie. input type="text" définit la zone de saisie. Il faut lui donner un nom et un identifiant. Il n'est pas obligatoire que les deux portent le même nom, cela ne change rien à l'affaire. Pour finir, placeholder="texte" représente le texte affiché qui s'efface dès que l'on commence à saisir.
Zone de saisie d'un mot de passe
<form method="post" action="mailto:adresse_mail">
<label for="pw">Mot de passe : </label>
<input type="password" name="pw" id="pw" maxlength="8" placeholder="********">
</form>
Je ne vous parle de cette zone de saisie que parce qu'elle existe. Nous verrons plus tard comment gérer ce type de champ. Très peu de choses changent par rapport à la zone de saisie simple. Dans input, type="password" indique que c'est un mot de passe qui va être saisi, les caractères saisis ne seront pas affichés à l'écran. maxlength="8" limite la saisie à 8 caractères.
Zone de saisie d'un texte
<form method="post" action="mailto:adresse_mail">
<label for="txt">Entrez votre commentaire</label><br>
<textarea name="txt" id="txt" minlength="20" rows="5" cols="50" maxlength="400" placeholder="Saississez votre commentaire tout en restant correct">
</textarea>
</form>
Voici sans doute la zone de saisie la plus utilisée dans les formulaires car elle permet aux visiteurs de donner leur avis sur tel ou tel sujet. Elle diffère de la zone de saisie simple car elle est multilignes. Le nom de la balise change, au lieu de input, nous avons <textarea></textarea>. Nous avions vu maxlength, ici nous avons en plus minlength, tout aussi facultatif. Le champ ne sera pas validé s'il n'a pas le nombre de caractères spécifiés. rows="5" cols="50" indiquent le nombre de lignes et de colonnes affichées. Si le commentaire est plus long que l'espace qui lui est réservé, la barre de défilement vertical est automatiquement affichée. Par défaut, la zone de saisie est redimensionnable. Si vous voulez que la taille reste fixe, vous pouvez ajouter dans la balise <textarea> style="resize:none;". Entre les balises <textarea> et </textarea> vous pouvez placer du texte. Celui-ci viendra remplacer celui affiché par placeholder. L'utilisateur devra supprimer lui-même le texte affiché.
Les boutons radio
<form method="post" action="mailto:adresse_mail">
<fieldset style="width:300px">
<legend>Quel est votre navigateur ?</legend>
<input checked type="radio" name="radio" id="radio1" value="chrome"> <label for="radio1">Chrome</label><br>
<input type="radio" name="radio" id="radio2" value="fire"> <label for="radio2">Firefox</label><br>
<input type="radio" name="radio" id="radio3" value="IE"> <label for="radio3">Internet Explorer</label><br>
<input type="radio" name="radio" id="radio4" value="opera"> <label for="radio4">Opera</label><br>
<input type="radio" name="radio" id="radio5" value="safari"> <label for="radio5">Safari</label><br>
</fieldset>
</form>
On les rencontre un peu partout car ils rendent bien service. Les boutons radio permettent d'effectuer un choix unique parmi un nombre limité d'options.
<fieldset> et </fieldset> délimitent le groupe de boutons. Dans l'exemple, J'ai limité la largeur à 300 pixels sinon, le groupe de boutons occuperait toute la largeur de la page.
<legend> </legend> représente le texte affiché au-dessus des boutons.
Chaque bouton est déclaré dans la balise <input type="radio">. Tout les boutons doivent impérativement porter le même nom. On les différencie les uns des autres grâce à l'id. Vous pouvez présélectionner une option en ajoutant l'attibut checked à une option.
Si vous préférez que votre étiquette soit à gauche du bouton, écrivez votre ligne de la façon suivante : <label for="radio1">Chrome</label><input type="radio" name="radio" id="radio1">
Les cases à cocher
<form method="post" action="mailto:adresse_mail">
Vous préférez ?<br>
<label><input type="checkbox" name="cbox" id="cbox1" value="choco"> Le chocolat</label><br>
<label><input type="checkbox" name="cbox" id="cbox2" value="bombon"> Les bombons</label><br>
<label><input type="checkbox" checked name="cbox" id="cbox3" value="gateau"> Les gâteaux</label><br>
<label><input type="checkbox" name="cbox" id="cbox4" value="glace"> Les glaces</label><br>
<label><input type="checkbox" name="cbox" id="cbox5" value="choco"> Les épinards en boîte</label>
</form>
Il n'y a pas grand chose à dire si ce n'est que cela permet au visiteur d'effectuer plusieurs choix. value est la valeur qui sera retournée. Il est possible de cocher une plusieurs cases à l'avance avec l'attribut checked. De la même façon que pour les boutons radio vous pouvez inverser la présentation en mettant l'étiquette avant la case. Faire cela de préférence pour une présentation en ligne plutôt qu'en colonne.
Les listes déroulantes
|
|
<form method="post" action="mailto:adresse_mail">
<legend>Mois de naissance</legend>
<select name="liste" size="3">
<option name="optlist" id="ol01">Janvier</option>
<option name="optlist" id="ol02">Février</option>
<option name="optlist" id="ol03">Mars</option>
<option name="optlist" id="ol04" selected>Avril</option>
<option name="optlist" id="ol05">Mai</option>
<option name="optlist" id="ol06">Juin</option>
<option name="optlist" id="ol07">Juillet</option>
<option name="optlist" id="ol08">Août</option>
<option name="optlist" id="ol09">Septembre</option>
<option name="optlist" id="ol10">Octobre</option>
<option name="optlist" id="ol11">Novembre</option>
<option name="optlist" id="ol12">Décembre</option>
</select>
</form>
Les listes déroulantes peuvent prendre plusieurs formes. Les listes sont délimitées par les balises <select> et </select>. Les deux listes représentées ici permettent un choix unique. Ce qui différencie les deux, c'est l'attribut size="3". Celui-ci spécifie le nombre d'options affichées à l'écran. Si l'attribut est omis, une seule option est affichée.
Chaque option est ensuite décrite dans l'ordre ou vous voulez les voir apparaître. L'attribut selected vous permet de définir une option par défaut. Si aucune optioon n'a cet attribut, ce sera la première option de la liste qui sera affichée en premier.
Voilà une nouvelle présentation de la liste déroulante qui n'a de déroulante que le nom dans la mesure où on affiche toutes les options possibles. Ce qui la différencie des deux autres, c'est que l'on peut, à l'aide de la touche Ctrl, choisir plusieurs options. <select name="liste" size="7" multiple>. size="7" permet d'afficher les sept jours de la semaine et l'attribut multiple autorise la sélection de plusieurs options.
<form method="post" action="mailto:adresse_mail">
<legend>Et pour finir...</legend>
<select name="liste" multiple>
<optgroup style="color:red;" label="Fromage">
<option style="color:black;" name="from" id="from1">Camembert</option>
<option style="color:black;" name="from" id="from2">Gruyère</option>
<option style="color:black;" name="from" id="from3">Roquefort</option>
</optgroup>
<optgroup style="color:red;" label="Ou dessert">
<option style="color:black;" name="dess" id="dess1">Tartelette</option>
<option style="color:black;" name="dess" id="dess2">Salade de fruits</option>
<option style="color:black;" name="dess" id="dess3">Glace au chocolat</option>
</optgroup>
</select>
</form>
Pour terminer avec les listes déroulantes, en voici une un peu plus sophistiquée. Elle permet, dans une seule liste de faire un ou des choix sur différents sujets. La balise <select> peut être agrémentée de size="x" et de multiple. Si vous ne mettez pas multiple, une seule option de votre liste sera affichée.
Les options sont regroupées entre les balises <optgroup> et <optgroup> et respectent les mêmes règles que les options des autres listes. Elles peuvent bien entendu recevoir des styles. Dans cette liste, pour mettre les intitulés en rouge, j'ai mis la balise optgroup en rouge et j'ai repassé chaque option en noir. Sans cela, les options auraient été également en rouge.
Les boutons de commande
<form method="post" action="mailto:adresse_mail">
<input type="submit" value="Envoyer">
<br><br>
<input type="reset" value="Effacer">
</form>
Que serait un formulaire si on ne pouvait pas l'envoyer? Rien. C'est pour ça que le bouton de soumission a été inventé. Sa syntaxe est simple. type="submit" se passe de commentaire. Dans value="" on marque quelque chose d'explicite que le visiteur comprend tout de suite. Il n'y a rien d'autre à mettre, tout est dans la balise form. Le bouton reset fonctionne de la même manière. En cliquant dessus, le visiteur réinitialise l'ensemble des champs à leurs valeurs de départ.
<style type="text/css">
<!--
#cadre {
width:600px;
height:430px;
background-color:skyblue;
border-radius: 20px 20px 0 0;
background: linear-gradient(135deg, lawngreen, gray 60%);
padding:0px;
}
#titreform {
border-radius: 20px 20px 0 0;
text-align:center;
font-weight:bold;
font-family:Arial;
font-size:20px;
background-color:yellow;
color:brown;
}
#pseudo {
width:460px;
height:60px;
background-color:rgba(255, 235, 180, 0.3);
margin-top:25px;
padding-top:5px;
border-style:solid;
border-width:2px;
border-color:navy;
}
#pseu {
width:160px;
}
#fs {
border:none;
height:0px;
}
#sujet {
width:274px;
}
#commentaire {
width:600px;
text-align:left;
font-family:Arial;
margin-left:70px;
}
#comment {
width:460px;
}
//-->
</style>
Si sur un site pro le fait d'avoir des formulaires quelque peu stricts n'est pas gênant, sur un site perso, un peu de fantaisie ne peut pas nuire à la qualité. l'exemple ci-dessus est simple dans la mesure où il ne comprend que quelques champs. Toute la présentation réside dans la feuille de style qui y est associée. Comme le formulaire est simple, j'ai mis le style directement dans la Page. Pour un formulaire plus complexe, il peut-être préférable de lettre la feuille de style dans un fichier .css à part afin de faciliter la lecture.
J'ai divisé le code du formulaire en deux parties. Tout d'abord la feuille de style ci-dessus et ensuite le code du formulaire.
#cadre {} : C'est le fond du formulaire.width: et height: fixent les dimensions. background-color: donne la couleur de fond par défaut pour le cas où le dégradé ne pourrait pas être affiché (sur les anciens navigateurs).
border-radius: fixe les arrondis en haut du formulaire. Il y a quatre valeurs qui représentent les quatre angles en partant du coin supérieur gauche et en tournant dans le sens des aiguilles d'une montre.
background: linear-gradient() est le dégradé du fond. On l'a abordé sur la page traitant des photos. Les valeurs entre parenthèses représentent l'angle du dégradé suivi des couleurs. Il est possible de donner l'intensité des couleurs en l'exprimant en pourcentage.
Angle : 0deg
Angle : 90deg
Angle : 180deg
Dans cet exemple, blue est la première couleur, yellow la seconde.
Nous ne sommes pas limités dans le nombre de couleurs, vous pouvez faire de beaux arcs en ciel.
padding:0px; nous permet de ne pas avoir de marge intérieure ce qui facilite la mise en place des divers éléments du formulaire.
#titreform {} : C'est le bandeau jaune en haut du formulaire. La seule subtilité dans sa présentation, c'est qu'en utilisant la propriété border-radius: 20px 20px 0 0; le bandeau épouse l'arrondi des angles du formulaire.
#pseudo {} : C'est le rectangle avec les champs prénom et sexe. La particularité de rectangle est qu'il est transparent. Cette transparence est obtenue grâce à une notation des couleurs plus explicite que celle que vous avez vue sur la page "Couleurs". Il s'agit de la méthode RGBa. Ici les couleurs sont exprimées en décimal. Les trois premières valeurs représentent le rouge, le vert et le bleu (entre 0 et 255). La quatrième valeur comprise entre 0 et 1 est le pourcentage de transparence apporté à la couleur. Avec 1 la couleur est opaque et, plus on tend vers le 0, la couleur devient transparente jusqu'à disparaître.
#pseu {} : On donne juste la largeur de l'étiquette afin d'équilibrer le formulaire.
#fs {} : Pour fieldset. On retire la bordure qui, normalement, entoure les boutons radio.
#sujet {} : On fixe la largeur de la zone de saisie du sujet
#commentaire {} : C'est l'ensemble étiquette et zone de saisie du commentaire (textarea).
#comment {} : C'est la zone de saisie à proprement parler. La largeur est fixée en pixels plutôt qu'en nombre de caratères (cols). Cela facilite la mise en page du formulaire.
<center>
<div id="cadre">
<!-- Début du formulaire -->
<form method="post" action="mailto:adresse_mail">
<!-- Donnez votre avis -->
<legend id="titreform"> D o n n e z v o t r e a v i s </legend>
<!-- Le rectangle transparent -->
<div id="pseudo">
<!-- Le prénom -->
<label for="pseu">Votre prénom (ou pseudo) : </label>
<input type="text" name="pseu" id="pseu" placeholder="Votre prénom">
<!-- Le sexe -->
<fieldset id="fs">
Quel est votre sexe ?
<input type="radio" name="sex" id="sex1" value="femme"> <label for="sex1">Femme</label>
<input type="radio" name="sex" id="sex2" value="homme"> <label for="sex2">Homme</label>
</fieldset>
<!-- Fin du rectangle transparent -->
</div>
<!-- Sujet du message -->
<br><br>
<label for="sujet">Sujet de votre message : </label>
<input type="text" name="sujet" id="sujet" placeholder="Question ou commentaire">
<br><br>
<!-- Le commentaire ou la question -->
<div id="commentaire">
<label for="comment">A vous la parole</label><br>
<textarea name="comment" id="comment" minlength="20" rows="8" placeholder="Posez votre question ou entrez vos remarques">
</textarea>
</div>
<!-- Les boutons -->
<br>
<input type="submit" value="Envoyer">
<input type="reset" value="Effacer">
</form>
</div>
</center>
Il n'y a rien de spécial à dire. Les "objets" du formulaire sont placés les uns derrière les autres. Dans l'exemple du formulaire, on comprend bien l'utilité des feuilles de style. On peut régler la présentation en ajustant les différentes valeurs du formulaire sans avoir à fouiller dans un code qui peut rapidement prendre du volume.