Comment faire un formulaire 1/2
Bonjour !
Alors une des demandes fréquentes dans la section des demandes de codes est celle du fameux "formulaire". Un formulaire pour passer une commande, un formulaire pour poster une présentation, un formulaire pour les demandes de partenariats, etc.
Ce tutorial vous montrera comment créer le formulaire de votre choix par vous-même. On y verra aussi comment mettre des champs obligatoires, comment gérer les différents types de champs à remplir et comment personnaliser le résultat du formulaire.
Voici un petit exemple du type de résultat qu'on peut obtenir :
http://libertia.forumsrpg.com/h25-formulaire-de-bouffeEt un autre exemple d'un formulaire de présentation :
https://www.never-utopia.com/t60709-formulaire-de-presentationDurant ce tutoriel, je ferai référence à quelques reprises au premier exemple.
À noter que puisque la majorité des membres s'intéressent plus à l'application d'un formulaire dans le cadre de forumactif, le tutoriel fera de même.
Vous pouvez quand même utiliser la plupart des notions apprises ici à l'extérieur de forumactif. Cependant, ce tutoriel ne traite pas du traitement PHP qui est nécessaire dans la majorité des cas si vous avez votre propre.
Étape 1 - Squelette du formulaire
Étape 1.1 - Juste le formulaire
La première étape, afin de créer un formulaire, c'est de se créer une page
HTML dans lequel nous allons mettre le squelette du formulaire.
Pour ceux qui n'ont jamais utlisé une page
HTML, voici un petit tuto sur les pages
HTML fait par Nyo :
https://www.never-utopia.com/t50282-creer-une-page-html-pour-fiche-de-pub-formulaires-etcBref, vous créez une page
HTML (en mode avancé, pas le mode simple) et vous y mettez la base de toute page
HTML :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Auteur" />
<title>Titre de la Page</title>
<style type="text/css">
/* Ici le CSS! */
</style>
<script type="text/javascript">
//<!--
/* Ici le Javascript */
//-->
</script>
</head>
<body>
<!-- Ici le HTML! -->
</body>
</html>
C'est le temps d'enregistrez votre page
html pour la première fois.
Nous allons maintenant créer le squelette du formulaire entre les balises "body". Pour cela, il va falloir modifier la page
HTML que vous avez enregistrée.
Lorsque vous modifiez votre formulaire, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.
Bref, on va commencer le squelette du formulaire par ceci :
- Code:
<form id="nomId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
Contenu du formulaire
</form>
Hé, minute papillon! De késsé?
J'imagine que vous l'avez deviné, mais la balise "form" est une balise de formulaire. Dans cette balise, il y a plusieurs attributs.
Le "id" permet de donne un id unique au formulaire pour le sélectionner plus tard.
Le "action" permet d'indiquer au formulaire où on va envoyer les données du formulaire pour qu'elles soient traitées. Dans notre cas, on met "/posting.forum" parce qu'on c'est la page de forumactif qui permet de poster un nouveau message/sujet).
Si vous avez créé une page de traitement php parce que vous avez votre propre site, ce serait cette adresse qu'il faudrait mettre. Si vous vouliez envoyer un mail, vous pourriez utiliser l'adresse de traitement du logiciel de messagerie de votre choix, ce qui ferait "mailto:nomdudestinataire@hotmail.fr" par exemple.
Le "method" indique la façon dont le formulaire est envoyé, soit selon la méthode "get" qui met les données dans la barre d'URL (dans la plupart des cas, très peu utile) ou selon la méthode "post" qui met les données dans le contenu
html de la page de réception. Nous, c'est la méthode "post" qu'on veut.
Le "name" est simplement un nom quelconque qu'on donne à ce formulaire. On va s'en servir plus tard dans le javascript.
Le "enctype" précise la façon dont les données sont cryptées. C'est assez compliqué à expliquer alors disons simplement que dans la majorité des situations, on utilise le enctype "multipart/form-data".
Le "target", dans cette situation, nous dit d'ouvrir un nouvel onglet pour poster le formulaire. Si vous mettez le formulaire dans un iframe plus tard, cela vous évitera de poster un message dans un message.
Note : Si ce n'est pas déjà fait, enregistrez votre page
html avant de la perdre !
Étape 1.2 - Comprendre les différents types de champs à remplir
On a maintenant un formulaire, sauf qu'il est vide. Tout formulaire qui se respecte doit avoir des champs à remplir pour que l'utilisateur puisse fournir des informations.
Ok, et à quoi ressemble un champ à remplir?
À ceci :
- Code:
<label for="question1">Question 1</label><br />
<input id="question1" name="question1" value="" type="text" size="50"></input>
Vous voyez qu'il y a 2 nouvelles types de balises, "label" et "input".
Balise
LabelLa balise "label" est une "étiquette", elle sert à "étiquetter" un champ à remplir. En soi, cette balise n'a rien de spécial, à l'exception que lorsqu'on clique dessus, cela met le focus sur le champs à remplir qui y est lié.
D'ailleurs, c'est à cela que sert l'attribut "for", à associer un label à un input. La valeur de l'attribut "for" doit absolument être le même que le "id" du champ à remplir qui y est associé.
-----------
Balise
InputLa balise "input" est un champ à remplir.
Le "id" permet de lier le champ au label (ne pas oublier qu'un id est "unique", alors ne mettez pas le même id à plusieurs champ).
Le "name" sert à donner un nom au champ à remplir. Ce nom servira, plus tard, à sélectionner la valeur du champ dans un javascript pour transformer les données en un message. Il doit être unique pour chaque champ à remplir. Les seules exceptions sont celles du champ "radio" et du champ "checkbox" (on les verra plus tard).
Le "value" permet d'ajouter une valeur de base au champ. De base, il y a souvent rien du tout. Si on aurait mis "Machin", il y aurait déjà eu "Machin" d'écrit dans le champ dès le début. Par contre, il y a des situations où il faut toujours mettre une valeur, soit quand le type de champ est "checkbox" ou "radio". On verra les détails plus loin.
Le "size" contrôle la longueur du champ (en nombre de caractères). Cela fonctionne avec les champ text, mais pas tous les types de champ.
Enfin, le "type" permet d'indiquer quel est le type de champ. Voici une petite liste des "type" de champ possibles :
Cette liste n'est pas complète parce qu'il y a des "type" moins utilisés et qui ne sont pas acceptés sur tous les navigateurs. Pour une liste complète, on va
à cet endroit.
Aussi, je vous mets sous spoiler ce tutoriel de Riku qui démontre un peu plus les différents champs et certaines options à mettre dans les champs (readonly, disabled, selected, checked, etc.) :
- Tutoriel de Riku:
Bonsoir les cocos.
Je sais bien que ces quelques lignes ne serviront pas à grand monde... mais un jour peut-être vous en aurez besoin, et là je sais qu'elles vous serviront.
Dans cette espoir je vous fais un petit topo sur la structuration d'un formulaire en
HTML !! Je dis bien en
HTML, le traitement en PHP c'est une autre histoire
Formulaire en HTML
Je vais vous faire peur d'entrée... voici un code :
- Code:
<form action="mailto:destinataire@hotmail.fr" method="post" enctype="text/plain">
<input type="hidden" name="Riku Asakura" value="Formulaire" />
Votre nom : <input type="text" name="nom" />
<br />
Votre Prénom : <input type="text" name="Prénom" />
<br />
Votre adresse : <input type="text" name="Adresse" size="80" />
<br />
<textarea name="texte" cols=35 rows=10></textarea>
<br />
Votre mot de passe : <input type="password" name="pass" size=9 maxlenght=10 />
<br />
Votre site : <input type="text" name="url" size=50 value="http://" />
<br />
<input type="submit" value="Envoyer le formulaire " name="submit" />
<br />
<input type="reset" value="Effacer " name="reset" />
Ce qui donne:
Quelques explications :
- action : Donne l'adresse du script qui va gérer les données envoyées. Si vous avez appris le php, vous saurez qu'on peut aussi utiliser une page de traitement. Ce formulaire là vous permet de faire envoyer un mail en passant par un logiciel de messagerie (outlook, live mail etc..).
- disabled : créé une liste ou un champs grisé.
- "hidden" : Contenu de type="" - Créé une liste ou un champs masqué.
- "checkbox" : Contenu de type="" - Créé une case à cocher.
- "radio" : Contenu dans type="" - Créé un bouton avec choix unique mais varié.
- "button" : Contenu de type="" - Créé un bouton cliquable.
- cols : Détermine le nombre maximum de caractères que peut contenir une ligne.
- maxlenght : délimite le nombre de caractères maximum dans un champ.
- method : Dans la balise form. C'est la méthode employée pour traiter les données. Il faut savoir qu'il en existe deux : POST et GET. L'un fait passer les données du formulaire via l'url (GET) l'autre via un traitement PHP plus précis (POST), je ne rentrerai pas dans les détails ici.
- name : Nomme un champs du formulaire. Pour les boutons de type Radio il vous faudra le même
- name pour créer un même groupe de bouton.(cf. exemple plus bas)
- readonly : empêche les utilisateur de modifier le texte par défaut d'un champ.
- rows : Représente le nombre de lignes définies pour la hauteur d'un champ textarea.
- "password" : contenu de type="" - Créé un champ de saisie crypté.
- value : Donne une valeur par défaut à un champ.
- "reset" : Contenu dans type="" - Créé un bouton d'effacement (déconseillé)
- "submit" : Bouton d'envoi de données.
- type : Le fameux type="". Il est placé dans une balise < input >, il permet de faire un choix entre différents input (bouton, radio, chekbox, champs mdp, champs texte etc..)
- size : définit la largeur d'un champ.
Voici un autre bout de code qui vous permettra d'ajouter une liste déroulante à votre formulaire.
- Code:
<form>
N-U est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>
Résultat :
- Créer un choix par défaut dans une liste déroulante - Code:
<form>
Never-Utopia est :
<select name="liste">
<option value="excellent">Excellent</option>
<option value="super" selected="selected">Super</option>
<option value="pas mal">Pas mal</option>
<option value="pas top">Pas top</option>
<option value="nul">Nul</option>
</select></form>
Donnera :
Vous pouvez voir que pour créer ce choix par défaut j'ai rajouté l'attribut
- Code:
selected="selected"
dans l'option à sélectionner par défaut.
On peut faire pareil avec un choix fait par défaut dans des boutons radio, ou checkbox.
Radio - Code:
<form>
Les tutos de N-U sont :
<input type="radio" name="tuto" value="excellents" />Excellents<br />
<input type="radio" name="tuto" value="bons" checked="checked" />bons<br />
<input type="radio" name="tuto" value="pas-mal" />Pas Mal<br />
<input type="radio" name="tuto" value="bof" />bof<br />
<input type="radio" name="tuto" value="nuls" />nuls</form>
Sauf qu'ici on aura utilisé
- Code:
checked="checked"
pour présélectionner un choix.
On peut faire de la même manière avec de véritables checkbox (donc plusieurs choix possibles).
Checkbox - Code:
<form>Vous trouvez que je suis :
<input type="checkbox" value="excellent" />Barbant<br />
<input type="checkbox" value="bon" checked="checked" />Agréable<br />
<input type="checkbox" value="pas-mal" checked="checked" />Beau gosse<br />
<input type="checkbox" value="bof" />Trop long<br />
<input type="checkbox" value="nul" />Je sais pô...</form>
Ainsi ici on aura deux présélections, mais la possibilités de désélectionner ou d'avoir d'autres choix.
Voilà... bon ne faites pas attention aux présélections, en fait je ne suis pas que beau gosse XD
ptdr !
Enjoy
J'ai parlé d'une exception du "name" pour le type "radio" et le type "checkbox", n'est-ce pas? Le "name" nous sert dans le javascript à sélectionner la valeur d'un champ, donc il est important que tous les champs aient un "name" différent.
Pour le type "radio" et le type "checkbox", il y a un petit pépin. En effet, pour une même question (un même label), il y a plusieurs champs (plusieurs input).
Histoire de pouvoir démêler cela un peu, on va se servir du "checked" pour vérifier si un champ est coché ou non (on va voir le checked plus tard). Du coup, il n'y a plus besoin de mettre un "name" différent pour chaque input. Plutôt le contraire en fait.
Il est important que, dans les cas de champs "radio" et "checkbox", tous les champs qui font partie d'une même question aient le même "name".
Pourquoi? Parce que le "name" va permettre aux différents champs de rester associés entre eux. Dans le cas d'un champ de type "radio", on peut seulement cocher un champ parmi ceux qui ont le même "name" et si on coche un autre champ qui a le même "name", celui qui était coché précédemment se décoche.
Perdu? Voilà un petit exemple pour vous montrer comme cela fonctionne quand on clique sur un champ radio :
Et l'exemple en code :
- Code:
<label for="question_quelconque">Question quelconque</label><br />
<label for="option1">Option 1</label> <input id="option1" name="question_quelconque" value="Mon option 1" type="radio"></input><br />
<label for="option2">Option 2</label> <input id="option2" name="question_quelconque" value="Mon option 2" type="radio"></input>
Outre les balises "input" et "label", il y en a 3 autres qui peuvent être utile dans un formulaire.
Il s'agit des balises "
textarea", "
select" et "
option".
Voilà à quoi elles ressemblent (en code) :
- Code:
<textarea name="arara" id="blablabla">Bla bla bla.</textarea>
<select name="restaurants" id="restaurants">
<option>McDo</option>
<option>PFK</option>
<option>Mike</option>
<option>Subway</option>
<option>A&W</option>
<option>Les frites de Suzanne</option>
</select>
Et voilà leur utilité/apparence :
Étape 1.3 - Créer les champs de notre formulaire
J'ai vraiment besoin de l'expliquer?
Maintenant que vous savez comment fonctionnent les champs, à vous de d'essayer de construire vos questions et vos champs pour votre formulaire ^^
Voici les questions et les champs pour l'exemple que je vous avais montré tout à l'heure :
- Code:
<form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="f" value="10" />
<input type="hidden" name="subject" id="titre" value="" />
<h1>Formulaire de commande de Bouffe, miam miam !</h1>
<h2>Mes informations</h2>
<label for="nom">Nom<span class="redd">*</span> :</label><br />
<input type="text" size="50" name="nom" id="nom" /><br />
<br />
<label for="adresse">Adresse<span class="redd">*</span> :</label><br />
<input type="text" size="70" name="adresse" id="adresse" /><br />
<br />
<label for="phone">Numéro de téléphone<span class="redd">*</span> :</label><br />
<input type="text" size="20" name="phone" id="phone" /><br />
<br />
<h2>Commande</h2>
<label for="resto">Nom du restaurant<span class="redd">*</span> :</label><br />
<select name="resto" id="resto">
<option>McDo</option>
<option>PFK</option>
<option>Buffet Chinois Hans</option>
<option>Mike</option>
<option>Subway</option>
<option>Sushi Shop</option>
<option>Chez Angelo l'Italien</option>
<option>Les frites de Suzanne</option>
</select><br />
<br />
<label for="livraison">À faire livrer ou non?<span class="redd">*</span></label><br />
<label for="livrer">Oui</label> <input type="radio" name="livraison" id="livrer" checked="checked" value="Oui" /><br />
<label for="nonlivrer">Non</label> <input type="radio" name="livraison" id="nonlivrer" value="Non" /><br />
<br />
<h3>Commande avec menu prédéfini</h3>
<label for="nmenu">N° de menu :</label><br />
<input type="number" style="width: 50px;" name="nmenu" id="nmenu" max="20" min="1" value="1" /><br />
<br />
<label for="nperso">Nombre de personnes qui commandent :</label><br />
<input type="number" style="width: 50px;" name="nperso" id="nperso" max="20" min="1" value="1" /><br />
<br />
<h3>Commande personnalisée</h3>
<label for="commande">Contenu de la commande</label><br />
<textarea name="commande" id="commande"></textarea><br />
<br />
<h2>Paiement</h2>
<label for="paie">Type de paiement<span class="redd">*</span> :</label><br />
<label for="visa">Carte Visa</label> <input type="radio" name="paie" id="visa" checked="checked" value="Carte Visa" /><br />
<label for="mastercard">Carte Mastercard</label> <input type="radio" name="paie" id="mastercard" value="Carte Mastercard" /><br />
<label for="cash">Argent comptant</label> <input type="radio" name="paie" id="cash" value="Argent comptant" /><br />
<label for="debit">Carte de débit</label> <input type="radio" name="paie" id="debit" value="Carte de débit" /><br />
<br />
<label for="trucs">Trucs pour faire baisser le montant total :</label><br />
<label for="coupon">Coupon-rabais</label> <input type="checkbox" name="coupon" id="coupon" value="Coupon-rabais" /><br />
<label for="ami">"Ami" du proprio</label> <input type="checkbox" name="ami" id="ami" value="Ami du proprio" /><br />
<label for="cadeau">Cartes cadeaux</label> <input type="checkbox" name="cadeau" id="cadeau" value="Cartes cadeaux" /><br />
<br />
<label for="secret">Mon code secret VIP de "Chez Angelo l'Italien" :</label><br />
<input type="password" size="30" name="secret" id="secret" /><br />
<br />
<br />
<div style="text-align: center;">
<input type="reset" name="reseta" value="Rénitialiser le formulaire" />
<input type="submit" name="post" value="Envoyer le formulaire" />
</div>
<br />
</form>
Note : Les h1, h2 et h3 sont simplement des balises de titres.
Note2 : Les br sont des retour à la ligne, cela remplace un "enter" classique qui, dans une page
HTML, ne sert à rien.
À vous de jouer pour faire votre propre formulaire maintenant !Note : Si ce n'est pas déjà fait, enregistrez votre page
html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^
Attention au champ pour envoyer le message !
Sur forumactif, le champ pour envoyer le message, celui qui a pour type "submit", doit absolument avoir "post" dans son "name". Le name "post" sert à indiquer qu'on veut poster notre message et non pas faire quelque chose d'autre avec.
Du coup, il doit ressembler à cela :
- Code:
<input type="submit" name="post" value="Envoyer le formulaire" />
D'ailleurs, si jamais vous voulez rajouter l'option de "prévisualiser" le message avant qu'il soit posté, vous pouvez faire un copier/coller du bouton, mais en utilisant le name "preview" à la place de "post".
Du coup, le bouton prévisualiser ressemblerait à ceci :
- Code:
<input type="submit" name="preview" value="Prévisualiser le formulaire" />
Étape 2 - Les champs invisibles de notre formulaire
Houston, on a un problème! Mais de quoi elle parle, des champs invisibles ? WTF ?
Roh, allez, c'est pas si effrayant, je vous en ai déjà parlé tout à l'heure !
Je parle ici des balises "input" de type "hidden", ceux qu'on peut mettre partout sans que la personne qui rempli le formulaire ne les voit.
Mais pourquoi on en aurait besoin ??!
Vous croyez peut-être que votre formulaire, une fois rempli, va savoir qu'il doit aller dans se poster en réponse à un sujet déjà créé ou qu'il doit créer un nouveau sujet dans un sous-forum précis? Nope, il n'en sait rien.
Heureusement, on est là pour l'aider ^^
Donc voilà les champs invisibles qui seront à ajouter directement après la balise "form" :
- Code:
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="f" value="10" />
<input type="hidden" name="subject" id="titre" value="" />
.... Et ça veut dire quoi, ça? C'est bien beau d'aider le formulaire à savoir où aller, mais j'en ai pas plus idées que lui moi ><
Ouais, j'imagine XD Allez, passons chaque ligne au peigne fin !
- Code:
<input type="hidden" name="mode" value="newtopic" />
Cela sert à définir le mode du message.
Si on met "newtopic" comme valeur, c'est qu'on crée un nouveau sujet. Si on met "reply" comme valeur, c'est qu'on répond à un sujet déjà existant. Si on met "move" comme valeur, c'est qu'on veut déplacer un sujet.
Je ne nommerai pas tous les modes, mais il y en a beaucoup, un pour presque chaque option possible sur forumactif.
Nous, ce qui nous intéresse pour le moment, c'est le "newtopic" pour créer un nouveau sujet et le "reply" pour répondre à un sujet.
- Code:
<input type="hidden" name="topictype" value="0" checked="checked" />
Cela sert à dire quel type de sujet on crée.
Si c'est un message normal, on lui donne la valeur "0".
Si c'est une note (post-it), ce sera la valeur "1".
Si c'est une annonce, ce sera la valeur "2".
Si c'est une annonce globale, ce sera la valeur "3".
- Code:
<input type="hidden" name="message" value="" />
Il s'agit du contenu du message qui sera posté. Comme le message va prendre les données du formulaire, on le met vide pour le moment et on ira s'occuper de le remplir plus tard grâce au javascript.
- Code:
<input type="hidden" name="f" value="10" />
C'est le "où". Où est-ce que le message doit être posté?
Le "f" dans le "name" indique que c'est dans un forum ou sous-forum.
Si on voulait que ce soit dans une catégorie, on aurait mis la valeur "c".
Si on aurait voulait que ce soit dans un sujet déjà créé, on aurait mis la valeur "t".
Ensuite, le "10" dans le "value" indique dans quel forum/sous-forum/catégorie/sujet le message doit être posté.
Autrement dit, vous vous rendez sur la page du sujet/sous-forum/etc. où vous voulez que le sujet soit posté et vous regardez dans la barre d'adresse.
Directement après le "f" (ou c ou t), vous verrez un nombre.
C'est ce nombre qu'il faut mettre dans "value".
- Code:
<input type="hidden" name="subject" id="titre" value="" />
C'est simplement le titre du sujet. Si vous voulez que la personne le remplisse par elle-même, vous pouvez changer le "type" pour "text" et l'intégrer au reste du formulaire. Sinon, laissez-le caché et on ira remplir le titre à l'aide du javascript plus tard ^^
Note : Si ce n'est pas déjà fait, enregistrez votre page
html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^
Et voilà pour cette section \o/
les gifs se mettent automatiquement à la bonne taille, je conseillerai néanmoins de passer par des réducteurs de liens pour ne pas surcharger l'espace "signature" 
Je viens vous présenter cet ouvrage :
Alony sur 
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.
), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.
), j'ai décidé de frapper fort en vous codant un panneau latéral gris fixe ! Je recommande plutôt Mozilla Firefox pour l'utiliser, mais il fonctionne sous Chrome et Internet Explorer/Microsoft Edge (même si il y a un pas élégant espace). Et pour me faire pardonner de ce petit imprévu, ce code est adapté pour 2 versions de forums (Je suis trop forte je sais huhu) 
