ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 Code NFA053, 6 ECTS Chapitre 05 HTML / LES FORMULAIRES
Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information complète et fiable. Cependant, le Cnam Champagne-Ardenne n'assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle. Le Cnam ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque nature que ce soit pouvant résulter de l'utilisation de ces exemples ou programmes. Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs propriétaires respectifs. Ce support pédagogique a été rédigé par Maxime MONNY, enseignant vacataire au Cnam Champagne- Ardenne. Copyright 2009-20010 Centre d'enseignement A Distance du Cnam Champagne-Ardenne. Tous droits réservés. L'utilisation du support pédagogique est réservée aux formations du Cnam dispensées à distance. Tout autre usage suppose l'autorisation préalable écrite du Cnam Champagne-Ardenne. Toute utilisation, diffusion ou reproduction du support, même partielle, par quelque procédé que ce soit, est interdite sans autorisation préalable écrite du Cnam Champagne-Ardenne. Une copie par xérographie, photographie, film, support magnétique ou autre, constitue une contrefaçon passible des peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la protection des droits d'auteur.
CHAPITRE 05 LES FORMULAIRES 1. QU'EST QU'UN FORMULAIRE? Le formulaire HTML va vous permettre de récupérer des informations que va saisir l'internaute sur votre site. L'internaute va saisir ses informations soit en remplissant des champs texte (input), soit sélectionnant un élément dans une liste déroulante (select) ou en sélectionnant une case à cocher (radio, checkbox). Une fois les informations saisies, l'internaute va valider en cliquant sur un bouton de soumission (submit). Alors les informations seront transmises soit à une adresse e-mail (mailto) soit à un CGI (Common Gateway Interface), soit à une page dynamique de type PHP, ASP, JSP... Le but de ce chapitre sera donc d étudier la partie conception du formulaire. Nous étudierons par la suite le traitement de ce formulaire avec l étude de PHP. 2. LA BALISE FORM Un formulaire HTML se définit par la balise HTML <form>. <form> <!-- contenu du formulaire --> </form> La balise HTML <form> doit contenir deux attributs indispensables. - ACTION qui définit la destination où sont envoyées les donnés, en règle générale c'est un cgi ou une page dynamique type php ou asp... - METHOD qui définit la méthode d'envoi (POST et GET). <form method="post" action="script_qui_va_traiter_le_form.php"> <!-- contenu du formulaire --> </form> Une balise <FORM> ne doit pas contenir une autre balise <FORM>. Une page HTML peut contenir plusieurs formulaires. 3. MAILTO Le formulaire avec une action MAILTO est un formulaire très simple qui permet rapidement de créer un formulaire HTML avec demande de renseignement. Une fois le formulaire rempli par l internaute, celui-ci va le valider et cette action déclenchera l ouverture d un nouvel email avec contenant les informations du formulaire. Il suffira, pour l internaute, d envoyer le mail en cliquant sur le bouton «envoyer» de son logiciel de messagerie. Nous allons étudier dans ce chapitre l'attribut METHOD de type "post" et l'attribut ACTION de type "mailto: Votre e-mail". <form action="mailto:votremail" method="post" enctype="text/plain"> ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 1
ENCTYPE précise la méthode MINE de codification (format d'envoi) qui va être utilisé pour l'envoi. "Text/plain" est la valeur qui doit être utilisée lorsque les informations sont envoyées par courrier électronique. L exemple ci-dessous représente un formulaire très simple demandant 3 informations : le nom, le prénom et le mail du visiteur : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>mailto</title> </head> <body> <form action="mailto:m.monny3@ne.pleiad.net" method="post" enctype="text/plain"> <p>nom : <input type="text" name="nom" value="" /></p> <p>prénom : <input type="text" name="prenom" value="" /></p> <p>email : <input type="text" name="email" value="" /></p> <input type="reset" name="reset" value="rétablir" /> <input type="submit" name="submit" value="envoyer" /> </form> </body> </html> Lorsque vous recevez le formulaire (avec cette méthode et cette action), il sera sous cette forme : nom=monny prenom=maxime email=maxime@ne.pleiad.net submit=envoyer En fait, le premier mot est en général associé à l'attribut name d'une balise et le second après le = est la valeur attribuée à value de cette même balise. Il y a des exceptions que nous verrons lorsque nous étudierons la balise. La valeur de NAME doit être la plus significative de l'information que vous demandez, la valeur ne doit pas comporter d'accent ni de virgule. Dans un formulaire vous devez avoir obligatoirement deux boutons. - Un bouton pour réinitialiser le formulaire : <input type="reset" name="nom" value="rétablir"> - Un bouton pour envoyer le formulaire : <input type="submit" name="nom" value="envoyer"> «Value» correspond au texte affiché sur le bouton. Type définit pour ces deux boutons l'action à exécuter : «reset» pour réinitialiser, «submit» pour envoyer. Dans un formulaire, il ne peut y avoir qu'un seul bouton «Envoyer» et «Rétablir». HTML / LES FORMULAIRES 2
4. LES CHAMPS DE TEXTE Il existe deux types de champs de texte : - le champ simple d'une ligne, - le champ multi-lignes. 4.1. LE CHAMP SIMPLE : Le code HTML d un champ simple d une ligne : <input type="text" name="nom" value="" size="5" /> - «type» définit la forme de la balise «<input>», donc pour une zone de texte simple c'est "text". - «name» donne un nom au champ texte. Très important car à ce nom est associé la valeur. - «value» définit le texte mis au départ dans le champ, si le champ est vide alors value="". Sachez que si vous rentrez une valeur par défaut, l'internaute sera obligé de sélectionner le texte de votre champ texte puis de l'effacer pour pouvoir écrire un nouveau texte. - «size» correspond à la longueur du champ, ce n'est pas des pixels, approximativement cela correspond à l'encombrement total horizontal de la lettre la plus large (w). 4.2. MULTI-LIGNES Le champ multi-lignes : <textarea name="nom" cols="30" rows="5">texte défaut</textarea> «cols» correspond à la longueur du champ, ce n'est pas des pixels, mais le même principe que pour l attribut «size» du champs simple. «rows» correspond à la hauteur du champ c'est à dire le nombre de ligne. 5. LES CASES A COCHER ET LES BOUTONS RADIO Il est important de faire la différence entre le bouton radio et la case à cocher : la case à cocher permet de faire plusieurs choix sur un ensemble de propositions alors que le bouton radio permet de faire un seul choix sur un ensemble de propositions. Cases à cocher, plusieurs choix possibles Boutons radios, un seul choix possible ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 3
5.1. LES CASES A COCHER, (CHECKBOX) Le code HTML de la case à cocher s'écrit : <input type="checkbox" name="nom" value="nom_du_choix"> «type» définit la forme de la balise <input>, donc pour une case à cocher, c'est "checkbox". «name» donne un nom à la case. Très important car à ce nom est associé à la valeur (value) lorsque l'on réceptionne le formulaire. «value» est la valeur de la sélection. 5.2. LES BOUTONS RADIO (RADIO) Le code html du bouton radio s'écrit : <input type="radio" name="nom" value="nom_du_choix"> «type» définit la forme de la balise <input>, donc pour un bouton radio, c'est "radio". «name» donne un nom. Très important car à ce nom est associé une valeur qui est en faite le texte saisit par l'internaute. IMPORTANT : Pour faire un seul choix dans un ensemble de propositions, le nom doit être identique pour tous les boutons radios qui sont, en quelque sorte, liés. «value» c'est la valeur de la sélection. 6. LES MENUS DEROULANT Vous pouvez faire des menus déroulant pour par exemple remplacer vos boutons radio, ou parce que vous n'avez pas assez de place... On écrira : <select name="composant" size="1" multiple> <option value="champignons">champignons</option> <option value="tomates">tomates</option> <option value="choux">choux</option> <option value="carottes">carottes</option> </select> «name» est le nom de la sélection, il est associé à la valeur de la balise <option>. «size» détermine le nombre d'options visibles. Il doit être < ou = au nombre de balises <option>. Attention tout de même, car cet attribut n est pas beaucoup respecté par les navigateurs qui considère 2 types de listes la liste simple avec un seul élément affiché ou la liste multiple avec tous les éléments d affichés. «multiple» signifie que l'on peut faire plusieurs sélections. Si vous ne le mettez pas, l'internaute ne pourra faire qu'une sélection. La balise <option> correspond à un élément de la liste. «value» est la valeur renvoyée dans le formulaire, elle sera associée «name» de la balise <select>. HTML / LES FORMULAIRES 4
7. EXERCICES 7.1. EXO1 : MOT DE PASSE ET ESSAI DU MAILTO Après avoir cherché dans votre moteur de recherche préféré comment faire un champ de mot de passe, c està-dire un champ de saisie identique au type texte sauf que la valeur est cachée par des étoiles, vous reproduirez le formulaire ci-dessous : Vous vérifierez si le mot de passe est indiqué en clair ou avec des étoiles dans le mail d envoie du formulaire. 7.2. EXO2 : CHECKBOX ET RADIO Reproduisez en html les 2 copies d écrans suivantes : Cases à cocher, plusieurs choix possibles Boutons radios, un seul choix possible Vérifiez bien que le checkbox permet le choix multiple contrairement au bouton radio. ALGORITHME PROGRAMMATION INTERNET NIVEAU 1 5
7.3. EXO3 : SELECT SIMPLE OU MULTIPLE Pour cet exercice vous reproduirez le code de la partie 6 concernant la balise <select>. Vous ferez une page html avec l attribut «multiple» et une seconde sans cet attribut. Vous comparerez ainsi visuellement les différences. 7.4. EXO4 : INSCRIPTION Vous devrez réaliser le formulaire d inscription ci-dessous. Celui devra fournir les informations décrites à côté dans un mail lors de sa validation par le bouton «Envoyer» L ensemble des codes pour cet exercice et les exercices précédents seront, bien entendu, validés par le site de la W3C. HTML / LES FORMULAIRES 6