Contexte d'information Titre du document cours HTML Nom de fichier html11.pdf Les formulaires Objectifs : Collecter des informations (texte, choix, fichiers...) auprès d'un utilisateur dans un document HTML Comprendre les méthodes de transfert des données vers le serveur 1] Présentation Jusqu'à présent nous avons vu une relation client/serveur simple : l'utilisateur demande des pages au serveur, qui examine la requête et fournit par le biais du navigateur la page HTML demandée. Il arrive fréquemment qu'un site ait besoin de collecter et d'utiliser des données fournies par l'utilisateur. Les formulaires correspondent à ce besoin d'interactivité. Formulaires et script CGI Les formulaires (FORMS en anglais) sont des ensembles de composants, appelés aussi champs qui permettent à l'utilisateur d'entrer des informations, d'exprimer des choix, de saisir du texte. Les données sont alors transmises au serveur qui passe la main à un programme spécifique (ou à un de ses modules) appelé script CGI. CGI correspond à Common Gateway Interface, standard de communication des serveurs avec des programmes externes, maintenant tombé en désuétude Le programme est écrit à l'avance, placé et reconnu par et sur le serveur Langages de scripts Les langages les plus utilisés côté serveur sont historiquement : PERL PYTHON, PHP et d'autres... (utilisables avec APACHE ou Internet Information Server). Côté client, le langage "naturel" utilisable avec HTML est bien sûr JavaScript. Le langage PHP est devenu incontournable sur le WEB : surtout pour sa capacité à utiliser les bases de données. Et ce qui ne gâche rien, il fait partie de la philosophie des licences libres (comme PERL) et donc gratuit... 2] La création d'un formulaire HTML s'occupe de la partie descriptive du formulaire. Celui-ci regroupe un certain nombre de contrôles (au minimum un) du type saisie de texte, case à cocher, liste déroulante, etc... Tout formulaire HTML comprend au moins deux types de composants : l'en-tête de formulaire et un champ de saisie ou de sélection : La balise <form> et la transmission des données La définition d'un formulaire s'effectue entre les balises <form> et </form>. Celle-ci possède plusieurs attributs permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur, c'est à dire lorsque l'on cliquera sur le bouton de validation. Les principaux attributs sont les suivants : Page 1 sur 7
action : telnet, spécifie l'url (et donc le protocole : http, ftp, gopher, file, mailto, news,...) du script qui doit traiter les données du formulaire. Cet attribut est théoriquement obligatoire. En fait en son absence, c'est l'url de la page qui reçoit l'information : le script doit donc être dans la page. method target name : indique la méthode HTTP employée pour transmettre les données au serveur. Deux valeurs possibles : GET, valeur par défaut, indique au navigateur qu'il doit concaténer les données du formulaire à l'url spécifié dans action après avoir inséré un point d'interrogation ; POST, génère une requête http transmise au serveur et contenant les données.. : indique le cadre vers lequel la réponse du script doit être dirigée. : nom du formulaire, utile afin d'identifier l'objet formulaire. Cette partie sera développée lors de l'étude du langage javascript. Remarque : Le navigateur met en cache les données afin de nous aider. GET : Avantages : un questionnaire peut être conservé sous forme d'une URL rapide si peu d'argument à transmettre (principe d'utilisation des moteurs de recherche) il permet à l'utilisateur d'utiliser le bouton précédent de son navigateur sans renvoyer les données. Utile essentiellement pour la navigation (tri, page, etc...) Inconvénients : la chaîne de caractères a une taille limitée et peu varier d'un navigateur à l'autre (256 caractères environ). l'url est en clair et si elle se trouve dans les signets, elle peut être vue par quelqu'un qui regarderait l'historique de navigation Page 2 sur 7
POST : Avantages : la taille de la requête n'est pas restreinte par la taille de URL utiliser toujours POST si votre formulaire propose un élément textarea car ce dernier pourrait contenir un grand nombre de données à utiliser pour des transactions bancaires mais attention la transaction nécessite une couche de sécurité supplémentaire comme SSL (Secure Sockets Layer) pour protéger vos données des intrus. Inconvénients : impossibilité de garder la requête autrement que sous un fichier Les contrôles de formulaire Tout contrôle doit au moins avoir : une propriété initiale (chaîne de caractères) et une valeur initiale (chaîne de caractères). Ces valeurs sont changées par l'utilisateur et/ou des scripts qui leur sont associés. Les contrôles sont dits valides quand la paire nom-valeur est expédiée. la balise > Elle gère la plupart des types de champs, n'a pas de balise de fermeture et possède les attributs suivants : type="text/password/checkbox/radio/submit/reset/file/hidden/button/image" type du contrôle inséré (password est à éviter car sécurité minime). Par défaut le type est text name="texte" nom attribué au contrôle, obligatoire pour le JavaScript value="texte" valeur initiale du contrôle, optionnel sauf pour les boutons de type radio size="spécifie la largeur d'un champs (Nombre de caractères)". A utiliser seulement pour "password" et texte src="fichier source". Source de l'image pour le bouton de type image usemap="fichier source". Source de l'image MAP pour le type image maxlength="nombre de caractères" détermine le nombre maximum de caractères. Si ce paramètre ne figure pas dans la déclaration d'input, le nombre de caractères possibles est infini. disabled désactive le contrôle checked élément pré-sélectionné, pour les types boutons radio, cases à cocher... Exemples : <!-- Type text --> type="text" name="nomchamp" value="mon texte initial" /> type="text" name="nommail" value="identifiant@fournisseur.fr" /> type="text" name="nomcode" value="0000000000" maxlength="10" size="10" /> Tapez votre nom : Mon texte initial Tapez votre adresse e-mail: identifiant@fournisseur.fr Page 3 sur 7
Tapez votre numéro de téléphone : chiffres) 0000000000 (tapez exactement 10 <!-- Type password --> type="password" name="motpasse" value="" maxlength="8" size="10" /> Entrez votre mot de passe : ******* (le mot tapé est caché par des *) <!-- Type case à cocher --> type="checkbox" name="unix" checked="checked" />Je connais Unix<br /> type="checkbox" name="winnt" />Je connais Windows NT Je connais Unix Je connais Windows NT <!-- Autre syntaxe possible --> type="checkbox" name="systeme[]" checked="checked" />Je connais Unix<br /> type="checkbox" name="systeme[]" />Je connais Windows NT <!-- Cette syntaxe permet de récupérer les valeurs dans un tableau qui sera indicé automatiquement en fonction des choix --> <!-- Type bouton radio. Les options s'excluent mutuellement, il faut donc --> <!-- indiquer un groupe de boutons par un même nom --> Vous préférez : <br /> value="c" value="t" value="l" value="s" />Cinéma<br /> />Télévision<br /> />Lecture<br /> checked="checked" />Sport<br /> Vous préférez : Cinéma Télévision Lecture Sport <!-- Type bouton de commande. Ils ont pour fonction de déclencher un --> <!-- évènement par exemple en JavaScript --> type="button" name= "Commande" value="ok" /> type="submit" name= "Envoi" value="envoyer les données" /> type="reset" value="effacer" /> OK Envoyer les données Effacer la balise <select> Elle permet un choix dans une liste de plusieurs options présentées sous forme de liste déroulante et possède la balise et les attributs suivants : size attribut qui précise le nombre de lignes visibles avec possibilité de barre de défilement (ascenseur) <option value="valeur"> balise qui donne un élément de la liste <option selected> l'attribut selected pour sélectionner l'option par défaut Page 4 sur 7
multiple l'attribut multiple (facultatif et non conseillé) autorise à sélectionner plusieurs options dans la liste. Il est possible de sélectionner plusieurs choix en appuyant au préalable sur la touche CTRL puis en cliquant avec la souris. <option label> donne un descriptif à l'élément (pour les non-voyants utilisant un lecteur vocal). Exemples : Choisissez un langage : <select name="langage" size="4"> <option label = "html" value="html">html</option> <option label = "java" value="java">java</option> <option label = "perl" value="perl" selected="selected" />PERL</option> <option label = "php" value="php">php</option> </select> Choisissez un langage : Quel(s) est(sont) votre(vos) genre(s) de lecture? <select name="genre[]" multiple="multiple" size="3"> <option value="p" selected="selected">policier</option> <option value="r">roman</option> <option value="sf">science fiction</option> <option value="a">aventure</option> <option value="h">histoire</option> <option value="n">nature</option> <option value="e">encyclopédie</option> </select> <!-- Remarque : Le value reste optionnelle pour la liste déroulante. La valeur transmise sera alors celle située entre <option> et </option> --> Quel(s) est(sont) votre(vos) genre(s) de lecture? Autre possibilité : <select name="genre" size="1" />... Quel est votre choix? <!-- Affiche une seule ligne dans le menu déroulant. Le size a une valeur par défaut de 1. ATTENTION : cela ne marche pas pour un choix multiple. Il faudra une taille supérieure. --> la balise <textarea> Elle permet à l'utilisateur de saisir un texte de plusieurs lignes appelé aussi (type memo). Les attributs sont : rows et cols qui précise le nombre de lignes et colonnes de la fenêtre de saisie. Exemple : <textarea name="avis" Merci.</textarea> rows="5" cols="60" />Donnez votre avis Page 5 sur 7 ici.
Donnez votre avis ici. Merci. ATTENTION : Un formulaire sous HTML est "idiot" car il prend les valeurs et... c'est tout! Pour les utiliser vous devez soit faire des scripts JavaScript, soit côté serveur des scripts CGI ou PHP. Toutes les données récupérées dans un formulaire sont considérées comme étant de type texte. 3] Que mettre en plus dans un formulaire Fieldset et legend Label Page 6 sur 7
Envoyer un fichier type="file" name="fic" /> Remarque : le mot "Parcourir" est automatiquement rajouté. 4] Présenter un formulaire Tableau ou non? Les avis divergent. Présenter un formulaire avec CS peut être plus difficile mais possible. Les formulaires on souvent une présentation tabulaire, il est donc possible d'utiliser les tableaux pour la mise en pages et les styler ensuite avec des CSS. Exemples de mise en pages : Page 7 sur 7