Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

LES FORMULAIRES LES FORMULAIRES Les pages HTML peuvent être enrichie par des f

LES FORMULAIRES LES FORMULAIRES Les pages HTML peuvent être enrichie par des formulaires interactifs, qui invitent vos visiteurs à renseigner des informations : saisir du texte, sélectionner des options, valider avec un bouton… tout est possible ! Nous arrivons cependant aux limites du langage HTML car il faut ensuite pouvoir analyser les informations saisies par le visiteur… et cela ne peut se faire en langage HTML. Comme nous allons le voir, le traitement des résultats doit s'effectuer dans un autre langage, tel que le PHP. En attendant, nous avons un grand nombre de nouvelles balises HTML à découvrir. CRÉER UN FORMULAIRE Pour insérer un formulaire dans une page HTML, il faut commencer par écrire une balise <form> </form>. C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin. CRÉER UN FORMULAIRE CRÉER UN FORMULAIRE Notez qu'il faut obligatoirement mettre des balises de type block (comme <p> </p>) à l'intérieur de votre formulaire si vous souhaitez y faire figurer du texte. CRÉER UN FORMULAIRE Voilà pour la structure de base. Maintenant, soyez attentifs : ce que j'ai à vous dire n'est pas évident parce qu'on est à la limite du HTML. On va prendre un exemple pour que les choses soient claires. Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire, par exemple un message qu'il aimerait publier sur vos forums. Ce message doit être envoyé pour que vous puissiez le recevoir et l'afficher pour vos autres visiteurs. CRÉER UN FORMULAIRE Voila les problèmes à va se poser : Problème n°1 : comment envoyer le texte saisi par le visiteur ? Par quel moyen ? Problème n°2 : une fois que les données ont été envoyées, comment les traiter ? Souhaitez-vous recevoir le message automatiquement par mail ou préférez-vous qu'un programme se charge de l'enregistrer quelque part, puis de l'afficher sur une page visible par tout le monde ? Pour fournir les réponses à ces deux problèmes, vous devez ajouter deux attributs à la balise <form> : CRÉER UN FORMULAIRE method : cet attribut indique par quel moyen les données vont être envoyées (réponse au problème n°1). Il existe deux solutions pour envoyer des données sur le Web : method="get" : c'est une méthode en général assez peu adaptée car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l'adresse de la page (http://…), mais ce détail ne nous intéresse pas vraiment pour le moment. La plupart du temps, je vous recommande d'utiliser l'autre méthode : post. CRÉER UN FORMULAIRE method="post" : c'est la méthode la plus utilisée pour les formulaires car elle permet d'envoyer un grand nombre d'informations. Les données saisies dans le formulaire ne transitent pas par la barre d'adresse. action : c'est l'adresse de la page ou du programme qui va traiter les informations (réponse au problème n°2). Cette page se chargera de vous envoyer un e- mail avec le message si c'est ce que vous voulez, ou bien d'enregistrer le message avec tous les autres dans une base de données. Cela ne peut pas se faire en HTML et CSS, on utilisera en général un autre langage dont vous avez peut-être entendu parler : PHP. CRÉER UN FORMULAIRE On va donc maintenant compléter la balise <form> avec les deux attributs qu'on vient de voir. Pour method, vous l'aurez deviné, je vais mettre la valeur post. Pour action, je vais taper le nom d'une page fictive en PHP (traitement.php). C'est cette page qui sera appelée lorsque le visiteur cliquera sur le bouton d'envoi du formulaire. CRÉER UN FORMULAIRE CRÉER UN FORMULAIRE Pour le moment, on ne sait pas ce qu'il se passe à l'intérieur de la page traitement.php. Notre priorité, pour le moment, est de découvrir en HTML/CSS comment faire pour insérer des zones de texte, des boutons et des cases à cocher dans votre page web. C'est ce que nous allons voir maintenant. LES ZONES DE SAISIE BASIQUE Nous allons passer en revue les différentes balises HTML permettant de saisir du texte dans un formulaire. Il faut savoir qu'il y a deux zones de texte différentes : La zone de texte monoligne : comme son nom l'indique, on ne peut y écrire qu'une seule ligne. Elle sert à saisir des textes courts, par exemple un pseudo. La zone de texte multiligne : cette zone de texte permet d'écrire une quantité importante de texte sur plusieurs lignes, par exemple une dissertation sur l'utilité du HTML dans le développement des pays d'Asie du Sud-Est. ZONE DE TEXTE MONOLIGNE La figure suivante montre à quoi ressemble une zone de texte monoligne. 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 : ZONE DE TEXTE MONOLIGNE Ce n'est pas encore suffisant : il faut donner un nom à votre zone de texte. Ce nom n'apparaît pas sur la page mais il vous sera indispensable par la suite. En effet, cela vous permettra (en PHP par exemple) de reconnaître d'où viennent les informations : vous saurez que tel texte est le pseudo du visiteur, tel texte est le mot de passe qu'il a choisi, etc. 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 : ZONE DE TEXTE MONOLIGNE Essayons donc de créer un formulaire très basique avec notre champ de texte : ZONE DE TEXTE MONOLIGNE Essayez ce code chez vous afin d'observer le résultat. 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> : LES LIBELLÉS Ce code donne exactement le résultat que vous avez pu observer à la figure précédente. 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). LES LIBELLÉS 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 : LES LIBELLÉS Essayez de cliquer sur le texte « Votre pseudo » : vous allez voir que le curseur se place automatiquement dans la zone de texte correspondante. D’AUTRES ATTRIBUTS DE INPUT 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. D’AUTRES ATTRIBUTS DE INPUT 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 : D’AUTRES ATTRIBUTS DE INPUT Testez vous-mêmes le résultat pour observer le comportement du champ. En attendant, voici le rendu du champ dans son état initial en figure suivante. D’AUTRES ATTRIBUTS DE INPUT D’AUTRES ATTRIBUTS DE INPUT 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 : ZONES MOTS DE PASSE Testez la zone de mot de passe : vous verrez que les caractères ne s'affichent pas à l'écran, comme sur la figure suivante. RÉSULTAT À L’ECRAN ZONES DE TEXTES MULTILIGNES 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. ZONES DE TEXTES MULTILIGNES RESULTAT À L’ECRAN ZONE DE TEXTE MULTILIGNE Il est possible de 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 ? VALEURS PAR DEFAUT POUR LES TEXTAREA Vous pouvez pré-remplir le <textarea> uploads/Finance/ les-formulaires.pdf