Il ne nous reste plus qu'à agrémenter notre formulaire de quelques dernières fonctionnalités, puis nous pourrons ajouter le bouton d'envoi du formulaire.
Regroupez des champs avec la balise <fieldset>
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 :
method="get" action=""
Vos coordonnées <!-- Titre du fieldset -->
for="nom"Quel est votre nom ?
type="text" name="nom" id="nom"
for="prenom"Quel est votre prénom ?
type="text" name="prenom" id="prenom"
for="email"Quel est votre e-mail ?
type="email" name="email" id="email"
Votre souhait <!-- Titre du fieldset -->
Faites un souhait que vous voudriez voir exaucé :
type="radio" name="souhait" value="riche" id="riche" for="riche"Être riche
type="radio" name="souhait" value="celebre" id="celebre" for="celebre"Être célèbre
type="radio" name="souhait" value="intelligent" id="intelligent" for="intelligent"Être encore plus intelligent
type="radio" name="souhait" value="autre" id="autre" for="autre"Autre...
for="precisions"Si "Autre", veuillez préciser :
name="precisions" id="precisions" cols="40" rows="4"
On ajoute un peu de CSS pour avoir un style sur notre fieldset
et voilà le résultat :
Vous voyez : chaque groupe est comme "encadré". Cela vous permet d'ajouter du style, et de visuellement séparer vos éléments entre eux.
Sélectionnez automatiquement un champ avec autofocus
Vous pouvez également 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. C'est très pratique d'un point de vue de l'expérience utilisateur.
Par exemple, pour que le curseur soit par défaut dans le champ prenom
, on écrit :
type="text" name="prenom" id="prenom" autofocus
Rendez un champ obligatoire avec required
Vous pouvez également faire en sorte qu'un champ soit obligatoire, en lui donnant l'attributrequired
.
type="text" name="prenom" id="prenom" required
Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi, qu'il doit impérativement être rempli.
Exemple pour colorer le fond des champs requis :
:required {
background-color:#F2A3BB;
}
Créez le bouton d'envoi du formulaire avec <input>
Pour créer le bouton d'envoi, c'est encore la balise <input>
qu'on utilise.
Elle existe en quatre versions :
type="submit"
: c'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attributaction
du formulaire.type="reset"
: remise à zéro du formulaire (testez pour voir).type="image"
: équivalent du boutonsubmit
, présenté cette fois sous forme d'image. Rajoutez l'attributsrc
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, mais nous n'apprendrons pas à le faire dans le cadre de ce cours.
On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value
:
type="submit" value="Envoyer"
Ce qui nous donne un input qui a l'apparence d'un bouton :
Lorsque vous cliquez sur le bouton Envoyer, le formulaire vous amène alors à la page indiquée dans l'attribut action
. Le seul petit souci, c'est que nous n'avons pas de page à indiquer en backend ici.
Comme je vous l'avais dit au chapitre précédent, puisque nous avons gardé l'attribut action
vide dans la balise <form>
, le navigateur comprend qu'il doit rester sur la même page. En revanche, si vous observez bien la barre URL de votre navigateur, vous verrez le contenu de votre formulaire apparaître à la suite :
index.html?nom=nebra&prenom=mathieu&email=coucou%40mathieu.com&souhait=autre&precisions=Apprendre+le+machine+learning
Donc, il se passe bien quelque chose !
À vous de jouer !
Vous allez pouvoir créer un formulaire de contact pour Robbie Lens !
Vous y trouverez la structure de la nouvelle section à ajouter dans la page d'accueil. À vous de jouer pour :
ajouter un champ nom avec le label associé ;
ajouter un champ email avec le label associé ;
ajouter un textarea ayant pour label message ;
créer un bouton de validation "Envoyer".
changer le lien du bouton “Un projet?Écrivez-moi” pour le faire pointer vers le formulaire
Le formulaire aura une méthode get
et restera vide pour l'attribut action
.
En résumé
Il est possible de regrouper les champs au sein d'une balise
<fieldset>
qui comporte une légende, avec la balise<legend>
.On peut sélectionner automatiquement un champ en précisant l'attribut
autofocus
.Il est également possible de rendre un champ obligatoire avec l'attribut
required
.Le bouton qui permet de valider le formulaire est créé à partir d'une balise input en faisant :
<input type="submit" value="Envoyer">
Dans le prochain chapitre, nous allons voir comment rendre une page responsive afin qu'elle s'adapte aux différentes tailles d'écran. Alors à tout de suite !