Remerciez-le!

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

Développement des Applications Web L'Ecole Supérieure de Management, d'Informat

Développement des Applications Web L'Ecole Supérieure de Management, d'Informatique et de Télécommunication, Sup MIT Applications Web Les Formulaires Ahmed ZELLOU SUP MIT, 2012-2013. Plan Les formulaires La balise FORM Le conteneur FORM La balise INPUT Un champ de texte Les formulaires 2 Un champ de texte Un mot de passe Cases à cocher Bouton radio Fichier attaché Inclure des données cachées A.ZELLOU Plan La balise TEXTAREA La balise SELECT La balise <label> La soumission L’annulation Les formulaires 3 L’annulation Personnalisez vos boutons Mise en forme des formulaires Envoi des données Les bonnes pratiques Ateliers A.ZELLOU Les formulaires Les formulaires permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant de dialoguer avec les internaute. Un formulaire fournit un espace sur la page html où l'utilisateur peut entrer des Les formulaires 4 A.ZELLOU l'utilisateur peut entrer des données Ces données seront envoyées vers un serveur pour un éventuel traitement. Les formulaires Ceux sont des zones dans un page Web qui permettent de récupérer des données auprès des visiteurs. Ils peuvent ainsi créer une certaine interactivité avec les visiteurs : – Questionnaire – Sondage Les formulaires 5 – Sondage – Renseignements personnels (adresse, email…) – Zone privée (mot de passe) – Affichage de texte ciblé – Menus, choix de rubriques, choix de liens… – Zone de texte pour forums, blogs, livre d'or… A.ZELLOU Les formulaires C’est une fiche que l'utilisateur peut remplir, ces informations ainsi saisies sont traitées par le serveur WWW à l'aide d'un programme CGI (Common Gateway Interface). Le lecteur saisit des informations, puis appuie Les formulaires 6 A.ZELLOU informations, puis appuie sur un bouton de soumission (submit) pour l'envoyer à un URL (adresse e-mail, script de page web dynamique PHP/ASP, script CGI). Des exemples de formulaires Les formulaires Zone de saisie Boutons Boutons radio (choix unique) Zone de saisie simple 7 A.ZELLOU Zone de saisie simple Liste déroulante Zone de saisie à lignes multiples Cases à cocher Des exemples de formulaires Les formulaires 8 A.ZELLOU Principe des formulaires Les formulaires 1. Mettre à disposition du visiteur des zones de textes, des choix, des informations 2. Récupérer les données qui sont fournies par le visiteur Formulaire à proprement parler Soit envois d'un email soit à une autre page web sur le serveur 9 A.ZELLOU le visiteur 3. Valider, traiter, classer ces données 4. Les stocker, les afficher ou les réutiliser dans un autre formulaire le serveur Script dynamique Exemple : PHP Affichage sur une page Bases de données Exemple : SQL Principe des formulaires Les formulaires Base de données Bonjour toto 10 A.ZELLOU Script de vérification Bonjour toto Voici la partie privée du site. Les formulaires Un formulaire est composé d'un ou plusieurs éléments d'entrée englobés par la balise <form>. <form method="post" action="programme" > <p>Entrez votre nom : <input type="text" name="nom" /></p> <p>Entrez votre prénom : <input type="text" name="prenom" /></p> </form> délimités par Les formulaires 11 Il regroupe plusieurs champs: boutons, champs de saisie, liste de choix, cases à cocher, … L'information est ensuite envoyée, à l'aide de scripts, sur le serveur puis renvoyée, dans la plupart des cas, à une adresse électronique. A.ZELLOU délimités par Les formulaires Il possède plusieurs attributs : 1. ACTION adresse le formulaire vers l'URL qui accepte l'information et vous le retourne suivant les paramètres définis. Les valeurs les plus utilisées sont : fichierdescript Pour l'envoi des données vers un fichier qui va les traiter. Les formulaires 12 fichier qui va les traiter. "mailto:webmaster@siteMIT.com" : Pour l'envoi du formulaire par le logiciel de messagerie de votre visiteur. 2. METHOD indique sous quelle forme seront envoyées les réponses « POST » correspond à un envoi de données stockées dans le corps de la requête, « GET » correspond à un envoi des données codées dans l'URL, et séparées de l'adresse du script par ? A.ZELLOU La balise FORM 3. ENCTYPE (facultatif) spécifie le format des données envoyées Il possède plusieurs valeurs dont : "application/x-www-form-urlencoded ", encode le contenu du formulaire selon une forme url "text/plain" : le contenu du formulaire est retourné en format Les formulaires 13 "text/plain" : le contenu du formulaire est retourné en format texte.t texte lisible par le destinataire; option accompagnée le plus souvent de ACTION=mailto: "multipart/form-data" : Valeur utilisée dans le cas où le formulaire comprendrait un fichier attaché (<input type="file" ...>) 4. L'attribut ACCEPT (facultatif) permet de définir les types MIME (Multipurpose Internet Mail Extensions) des données pouvant être envoyées par le formulaire. A.ZELLOU Le conteneur FORM FORM est un conteneur qui regroupe des éléments qui vont permettre à l'utilisateur de choisir ou de saisir des données. Les éléments à l’intérieur du formulaire sont : La balise INPUT: un ensemble de boutons et de champs Les formulaires 14 La balise INPUT: un ensemble de boutons et de champs de saisie La balise TEXTAREA: une zone de saisie La balise SELECT: une liste à choix multiples Il est aussi possible d'insérer n'importe quel élément HTML de base dans une balise FORM (textes, boutons, tableaux, liens,...) A.ZELLOU La balise INPUT La balise essentielle des formulaires. <INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément"> L'attribut name Sert à retrouver l’objet afin de l'exploiter en javascript. Egalement utilisé lors de l'envoi du formulaire vers un Les formulaires 15 Egalement utilisé lors de l'envoi du formulaire vers un serveur afin d'extraire les données saisies par l'utilisateur. L'attribut id (idem que name) Sert à nommer un objet dans une page web Contrairement à name, les id doivent être uniques dans toute la page. A.ZELLOU La balise INPUT L'attribut value Permet de spécifier la valeur par défaut d'un champ. L'attribut type Précise le type d'élément que représente la balise INPUT : Les formulaires 16 INPUT : 1. text: un champ de saisie permettant la saisie d'une ligne de texte. 2. password: un champ de saisie, dans lequel les caractères saisis apparaissent sous forme d'astérisques. 3. checkbox: cases à cocher pouvant admettre deux états : checked et unchecked. 4. radio: un bouton permettant un choix parmi plusieurs proposés A.ZELLOU La balise INPUT L'attribut type Précise le type d'élément que représente la balise INPUT : 1. file: permet à l'utilisateur de préciser l'emplacement d'un fichier qui sera envoyé avec le formulaire. 2. submit: le bouton de soumission permettant l'envoi du Les formulaires 17 2. submit: le bouton de soumission permettant l'envoi du formulaire. 3. reset: un bouton de remise à zéro. 4. image: est un bouton contenant une image permettant d'envoyer/mettre à zéro le formulaire. 5. hidden: champ non visible sur le formulaire. Si l'attribut type est omis, le type text est utilisé par défaut. A.ZELLOU Un champ de texte text: un champ de saisie permettant la saisie d'une ligne de texte. La taille du champ est définie à l'aide de l'attribut size La taille maximale avec l'attribut maxlength Exemple Les formulaires 18 Exemple Code Source <form> Donnez le nom : <input type=text name="nom"/> </form> A.ZELLOU Un mot de passe password: un champ de saisie, dans lequel les caractères saisis apparaissent sous forme d'astérisques. La taille du champ est définie à l'aide de l'attribut size La taille maximale avec l'attribut maxlength Exemple Les formulaires 19 Exemple Code Source <form> Donnez le mot de passe : <input type="password" name="Motdepasse"> </form> A.ZELLOU Cases à cocher La Balise <input> permet aussi de représenter une liste de cases à cocher où plusieurs choix sont possibles. Mettre l'attribut type="checkbox" (cases à cocher). Les autres attributs sont les suivants : Les formulaires Linux DOS 20 Les autres attributs sont les suivants : name : Définit le nom de la donnée (obligatoire) value : Nom de la donnée pour le choix checked : S'il est présent dans la balise <input>, le bouton sera coché par défaut A.ZELLOU Cases à cocher Exemple Les formulaires 21 Code Source <form> <input name="monchoix1" value="cas1" type="checkbox">CASE 1<br> <input name="monchoix2" value="cas2" type="checkbox">CASE 2<br> <input name="monchoix3" value="cas3" type="checkbox">CASE 3<br> </form> A.ZELLOU Bouton radio La Balise <input> permet aussi de représenter une liste "bouton radio" où un seul choix possible. Mettre l’attribut type="radio". Les formulaires Volley Foot 22 Mettre l’attribut type="radio". Les autres attributs sont les suivants : name : Définit le nom de la donnée (obligatoire) value : Nom de la donnée pour le choix checked : S'il est présent dans la balise <input>, le bouton sera coché par défaut. Les boutons d'options doivent avoir le même nom. A.ZELLOU Bouton radio Exemple d'une liste à boutons radio et son code source: Le choix 1 est coché par défaut. Les formulaires 23 uploads/Litterature/ les-formulaires.pdf