Les formulaires sont parmi les outils les plus importants utilisés par un webmaster pour récolter d'importantes informations sur un utilisateur internet, de l'information tel qu'un e-mail, nom, adresse, téléphone ou n'importe quelle autre sorte d'information.
En cas de besoin l'information peut même être stockée dans un fichier, vous pouvez faire des statistiques, formulaires d'inscription ou de souscription à l'information présentée dans votre page internet, et pleins d'autres
"},{"htm":"","css":"","js":""}],[{"text":"Avant de rentrer dans les détails, nous devons exposer un peu les bases d'un formulaire. Les champs de texte ont quelques attributs qui doivent être mentionnés pour commencer:
type - établit le type de champ de texte. Par exemple: texte, envoi, ou mot de passe.
name - donne un nom au champ pour référence ultérieure.
size - définit la taille du champ.
maxlenght - la valeur maximale des caractères qui peuvent être tapés.
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
\tName: <input type=\"text\" size=\"10\" maxlength=\"40\" name=\"name\" /><br />
\tPassword: <input type=\"password\" size=\"10\" maxlength=\"10\" name=\"password\" />
</form>
Copier et exécuter le code ci-dessous.
N'UTILISEZ PAS ce code. Les données du formulaire ne seront pas encryptées et ne seront pas sûres en terme de sécurité
","title":"Champs de texte"},{"htm":"","css":""}],[{"text":"Ajoutons le bouton d'envoi à présent. Généralement, le bouton d'envoi doit être le dernier et avoir l'attribut nommé 'Send', 'Submit', ou quelque chose comme ça.
Nous devons aussi spécifier une destination pour les données entrées dans le formulaire, tout comme le mode de transfert. Cela peut être fait en ajoutant les attributs de formulaires suivants:
method - Nous utiliserons le \"post\" method. Cela envoie le formulaire avec l'information insérée sans afficher les données de l'utilisateur.
action - Cela sera utilisé pour spécifier l'URL ou l'information sera envoyée.
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
\tName: <input type=\"text\" size=\"10\" maxlength=\"40\" name=\"name\" /><br />
\tPassword: <input type=\"password\" size=\"10\" maxlength=\"10\" name=\"password\" /><br />
\t
\t<input type=\"submit\" value=\"Send\" />
\t
</form>
Ecrire et tester le code.
Changez simplement ladresse e-mail en une existante pour que cela fonctionne!
","title":"Email formulaires"},{"htm":"","css":""}],[{"text":"Les boutons radio sont très populaires, utiles et faciles à utiliser. L'exemple le plus utilisé serait une question avec plus d'un choix de réponses. Les attributs que vous devez connaitre sont les suivants:
value - spécifie ce qui sera envoyé si l'utilisateur sélectionne un certain bouton. Seulement une valeur sera envoyée.
name - décide à quel ensemble de boutons appartient le bouton sélectionné.
HTML :
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
\t<p>Quel type de chaussures vous portez ?</p>
\t
\t<label>Color:</label> <br />
\t<input type=\"radio\" name=\"color\" value=\"sombre\" /> Sombres <br />
\t<input type=\"radio\" name=\"color\" value=\"clair\" /> Claires <br />
\t
\t<label>Size:</label> <br />
\t<input type=\"radio\" name=\"size\" value=\"petite\" /> Petites <br />
\t<input type=\"radio\" name=\"size\" value=\"moyenne\" /> Moyennes <br />
\t<input type=\"radio\" name=\"size\" value=\"grande\" /> Grandes <br />
\t
\t<input type=\"submit\" value=\"M'envoyer un Email\" />
</form>
Ecrire et tester le code.
Si vous remplacez l'adresse email par la votre vous recevrez un email avec: 'size=(choisir) color=(choisir)'.
","title":"Boutons Radio"},{"htm":"","css":"","js":""}],[{"text":"En utilisant les cases à cocher l'utilisateur à la possibilité de choisir une, deux ou plus, variantes de réponses. Les attributs name et value sont utilisés de la même maniere que pour le bouton radio.
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
\t<p>Quelle couleur de chaussures vous préférez?</p>
\t<input type=\"checkbox\" name=\"shoes\" value=\"noires\" /> Simple Noires <br/>
\t<input type=\"checkbox\" name=\"shoes\" value=\"blanches\" /> Simple Blanches <br/>
\t<input type=\"checkbox\" name=\"shoes\" value=\"grises\" /> Nuances de gris <br/>
\t<input type=\"checkbox\" name=\"shoes\" value=\"noires&blanches\" /> Noires et blanches<br/>
\t
\t<input type=\"submit\" value=\"M'envoyer un Email\" />
</form>
Ecrire et tester le code
Un autre modèle de formulaire de liste est le suivant, dans lequel cas l'utilisateur sélectionne une certaine ligne qui sera envoyée comme l'option choisie.
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
\t<p>Préférences musicales</p>
\t
\t<select multiple name=\"musique\" size=\"4\">
\t\t<option value=\"emo\" selected>Emo</option>
\t\t<option value=\"metal/rock\" >Metal/Rock</option>
\t\t<option value=\"hiphop\" >Hip Hop</option>
\t\t<option value=\"ska\" >Ska</option>
\t\t<option value=\"jazz\" >Jazz</option>
\t\t<option value=\"country\" >Country</option>
\t\t<option value=\"classique\" >Classique</option>
\t\t<option value=\"alternative\" >Alternative</option>
\t\t<option value=\"retro\" >Retro</option>
\t\t<option value=\"techno\" >Techno</option>
\t</select><br />
\t
\t<input type=\"submit\" value=\"M'envoyer un Email\" />
</form>
Ecrire et tester le code.
Un autre modèle de formulaire est le menu 'déroulant'. Cela sera affiché comme un champ, qui montrera ensuite une liste lorsqu'un clic aura été effectué dessus.
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
\t<p>Niveau d'éducation?</p>
\t
\t<select name=\"education\">
\t\t<option>Choisir</option>
\t\t<option>Lycée </option>
\t\t<option>College</option>
\t\t<option>Doctorat</option>
\t</select><br />
\t
\t<input type=\"submit\" value=\"M'envoyer un Email\" />
</form>
Ecrire et tester le code.
Premièrement il doit être mentionné que ce formulaire est seulement l'interface, la partie visible avec lequel l'utilisateur sera capable de travailler. Pour créer un formulaire d'upload complet des connaissances et compétences en PHP et PERL, sans mentionner javascript, sont requises.
Un formulaire d'upload est composé de plusieurs parties. Nous commencerons par établir la taille du fichier qui sera uploadé. Cela est fait en utilisant un champ caché. Après cela, nous créérons le champ dans lequel l'utilisateur sera capable d'écrire l'adresse du fichier ou sera capable de le rechercher dans une fenêtre 'explorateur'.
HTML
<input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"100\" /> <input name=\"file\" type=\"file\" />
Ecrire et tester le code.
Généralement, les zones de texte sont utilisées pour envoyer des commentaires. Les blogs et forums sont les pages internet principales qui utilisent ce genre d'options. Néanmoins, il y a beaucoup de sites qui utilisent ces zones de texte pour découvrir l'opinion de leur utilisateur sur un certain sujet.
Pour créer une zone de texte nous spécifierons tout d'abord les attributs rows et cols à l'intérieur de la balise <textarea> . 'Rows' définira la hauteur du champ, et 'cols' sa longueur, en terme de caractères. Dans l'exemple suivant il y a 5 lignes de 20 caractères chacun. Aussi, nous devons spécifier les attributs de la balise warp, ceux-ci étant:
wrap=
\"off\"
\"virtuel\"
\"physique\"
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
\t<textarea rows=\"5\" cols=\"20\" wrap=\"physique\" name=\"commentaires\">Ecrivez un commentaire</textarea><br />
\t<input type=\"submit\" value=\"M'envoyer un Email\" />
\t
</form>
Ecrire et tester le code.
Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :
Smashing Magazine a de très bons articles à propos de l'expérience utilisateur dans les formulaires, mais le plus intéressant est certainement leur « Guide complet pour des formulaires web facilement utilisables ».
UXMatters est une ressource bien pensée avec de très bons conseils allant des meilleures pratiques de base jusqu'à des sujets plus complexes tels que les formulaires sur plusieurs pages.
Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.
![\"Le](\"https://mdn.mozillademos.org/files/15999/0006.png\")
Le croquis du formulaire que l'on veut créer
Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.
","title":"Concevoir votre formulaire"},{"htm":"","css":""},{"edit":" "}],[{"text":"Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : <form>, <label>, <input>, <textarea> et <button>.
Avant de poursuivre, faites une copie locale de notre simple modèle HTML — vous y incorporerez votre formulaire.
L'élément <form>
Tous les formulaires HTML débutent par un élément <form> comme celui-ci :
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\">
Le formulaire sera ici.
</form>
Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments <div> ou <p>, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs action et method est considéré comme de bonne pratique.
L'attribut action définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.
L'attribut method définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
Note : Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article « Envoi des données de formulaire ».
Ecrire et tester le code.
","title":"Apprentissage actif : mise en œuvre de notre formulaire HTML"},{"htm":"","css":""},{"edit":" "}],[{"text":"Pour le moment, ajoutez l'élément <form> ci dessus dans le corps de votre HTML.
Les éléments <label>, <input> et <textarea>
Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.
En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.
HTML
<form action=\"/ma-page-de-traitement\" method=\"post\">
<div>
<label for=\"name\">Nom :</label>
<input type=\"text\" id=\"name\" name=\"user_name\">
</div>
<div>
<label for=\"mail\">e-mail :</label>
<input type=\"email\" id=\"mail\" name=\"user_mail\">
</div>
<div>
<label for=\"msg\">Message :</label>
<textarea id=\"msg\" name=\"user_message\"></textarea>
</div>
</form>
Les éléments <div> sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut for sur tous les éléments <label>. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'id de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : Comment structurer un formulaire HTML.
Concernant l'élément <input>, l'attribut le plus important est l'attribut type. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément <input>. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des widgets natifs pour formulaire.
Dans notre exemple nous n'utilisons que la valeur text — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.
Pour le deuxième entrée, nous utilisons la valeur email qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaire.
Ecrire et tester le code.
Last but not least, remarquez la syntaxe de <input> vs <textarea></textarea>. C'est une des bizarreries du HTML. La balise <input> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, <textarea> n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément <input> vous devez utiliser l'attribut value de la manière suivante :
<input type=\"text\" value=\"par défaut cet élément sera renseigné avec ce texte\">
A contrario, si vous souhaitez définir la valeur par défaut d'un élément <textarea>, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément <textarea> de la manière suivante :
<textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
L'élément <button>
Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément <button> ; ajoutez‑le juste avant la balise fermante </form> :
<div class=\"button\">
<button type=\"submit\">Envoyer le message</button>
</div>
Comme vous le voyez l'élément <button> accepte aussi un attribut de type — il peut prendre une des trois valeurs : submit, reset ou button.
Un clic sur un bouton submit (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut action de l'élément <form>.
Un clic sur un bouton reset réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.
Un clic sur un bouton button ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.
Note : Vous pouvez aussi utiliser l'élément <input> avec le type approprié pour produire un bouton, par exemple <input type=\"submit\">. Le principal avantage de <button> par rapport à l'élément <input> est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément <button> permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.
Ecrire et tester le code.
"},{"htm":"","css":""},{"edit":" "}],[{"text":"Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.
Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez first-form.html ( ou également directement).
Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.
Tout d'abord, ajoutons un élément <style> à notre page, dans l'en‑tête HTML. Comme ceci :
<style>
</style>
Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :
CSS
form {
/* Uniquement centrer le formulaire sur la page */
margin: 0 auto;
width: 400px;
/* Encadré pour voir les limites du formulaire */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
/* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* Pour s'assurer que tous les champs texte ont la même police.
Par défaut, les textarea ont une police monospace */
font: 1em sans-serif;
/* Pour que tous les champs texte aient la même dimension */
width: 300px;
box-sizing: border-box;
/* Pour harmoniser le look & feel des bordures des champs texte */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* Pour souligner légèrement les éléments actifs */
border-color: #000;
}
textarea {
/* Pour aligner les champs texte multi‑ligne avec leur étiquette */
vertical-align: top;
/* Pour donner assez de place pour écrire du texte */
height: 5em;
}
.button {
/* Pour placer le bouton à la même position que les champs texte */
padding-left: 90px; /* même taille que les étiquettes */
}
button {
/* Cette marge supplémentaire représente grosso modo le même espace que celui
entre les étiquettes et les champs texte */
margin-left: .5em;
}
Mettre le code html de la page précédente dans html.
Ecrire le code ci-dessus dans le css et tester.
Désormais notre formulaire a une bien meilleure allure.
Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).
Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.
L'élément <form> définit où et comment les données sont envoyées, merci aux attributs action et method.
Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.
Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :
HTML
<form method=\"post\" action=\"https://www.sciencesappliquees.com/serveur.php\"> <div>
<label for=\"name\">Nom :</label>
<input type=\"text\" id=\"name\" name=\"user_name\" />
<div>
<div>
<label for=\"mail\">E-mail :</label>
<input type=\"email\" id=\"mail\" name=\"user_email\" />
</div>
<div>
<label for=\"msg\">Message:</label>
<textarea id=\"msg\" name=\"user_message\"></textarea>
</div>
....
</form>
...
Dans notre exemple, le formulaire enverra trois informations nommées respectivement « user_name », « user_email » et « user_message ». Ces informations seront envoyées à l'URL « /my-handling-form-page » avec la méthode HTTP POST.
Du côté du serveur, le script à l'URL action=\"https://www.sciencesappliquees.com/serveur.php\" recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. Vous vérez en Nsi comment ce script manipulera les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données.
Ecrire et tester le code.
Copier les codes css et html précédents dans html et css ci-dessous.
Exécuter et tester le code.
Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :
Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.
Pour aller plus loin.
https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML