Les formulaires HTML html-forms Internet et Education © TECFA 9/11/04 Les formu

Les formulaires HTML html-forms Internet et Education © TECFA 9/11/04 Les formulaires HTML Code: html-forms Originaux url: http://tecfa.unige.ch/guides/tie/html/html-intro/html-forms.html url: http://tecfa.unige.ch/guides/tie/pdf/files/html-forms.pdf Auteurs et version • Daniel K. Schneider - Patrick Jermann - Vivian Synteta • Version: 0.3 (modifié le 9/11/04) Prérequis: • Connaître le langage HTML de base Module technique précédent: html-intro Suites possibles: PHP ou JSP/JHTML Module technique suivant: php-intro et ensuite php-html Module technique suivant: java-intro et ensuite java-jsp Les formulaires HTML - . html-forms-2 Internet et Education © TECFA 9/11/04 Objectifs: • Savoir composer un formulaire simple en HTML • Envoyer le contenu d’un formulaire par email Les formulaires HTML - 1. Table des matières détaillée html-forms-3 Internet et Education © TECFA 9/11/04 1. Table des matières détaillée 1. Table des matières détaillée 3 2. Sensibilisation 4 3. Eléments HTML les plus importants 6 3.1 La balise <form> 6 3.2 Questions ouvertes et fermées: <INPUT> 8 3.3 Menus déroulants et listes à choix multiples <SELECT> 15 3.4 Les zones de texte <TEXTAREA> 17 3.5 Formulaires HTML et e-mail 18 Les formulaires HTML - 2. Sensibilisation html-forms-4 Internet et Education © TECFA 9/11/04 2. Sensibilisation Les formulaires HTML - 2. Sensibilisation html-forms-5 Internet et Education © TECFA 9/11/04 Exemple 2-1: Sensibilisation formulaires HTML url: http://tecfa.unige.ch/guides/htmlman/formulaire_test.html <h2>Formulaire Type</h2> <form method="post" action="http://tecfa.unige.ch/cgi-bin/colin")> <h3>Coordonnees</h3> <strong>Nom</strong><br> <input type="text" name="nom" size="25"><p> <strong>Prenom</strong><br> <input type="text" name="prenom" size="25"><p> <strong>Je désire recevoir une documentation</strong> <input type="checkbox" name=”doc”><p> <strong>Pays</strong> <select name="pays" size=1> <option>CH: Suisse <option>D: Allemagne .................. </select><p><p> <strong>Sexe</strong> <input type="radio" name="sexe">Masculin <input type="radio" name="sexe">Féminin<p> <h3>Domaine(s) d'activite</h3> Vous pouvez en choisir plus qu'un...<p> <input type="checkbox" name="domaine" value="Pedagogie">Pedagogie <input type="checkbox" name="domaine" value="Psychologie">Psychologie <input type="checkbox" name="domaine" value="Informatique">Informatique <input type="checkbox" name="domaine" value="Autre">Autre <h4>Commentaire</h4> Si vous le voulez, vous pouvez decrire vos activites ou interets <p> <TEXTAREA name="comments" rows=4 cols=60></textarea><p> <input type="reset" value="Effacer les données"> <input type="submit" value="Enregistrer les donnees"><p> </form> Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-6 Internet et Education © TECFA 9/11/04 3. Eléments HTML les plus importants 3.1 La balise <form> La déclaration de base d’un formulaire se fait par: • le tag “form” • la spécification des paramètres “action”, “method” et parfois “name” <FORM ACTION=”URL” METHOD=GET ou POST> .... </FORM> • L’URL spécifié par le paramètre ACTION désigne la ressource vers laquelle l’information recueillie sera transmise. • Si ce paramètre n’est pas spécifié le document courant est utilisé par défaut. • La valeur du paramètre METHOD va dépendre du type de traitement que vous utilisez: • GET est la méthode par défaut et ajoute le contenu du formulaire à l’URL spécifié dans ACTION comme s’il s’agissait d’un query normal. • POST envoie le contenu du formulaire au serveur comme un ensemble de données sans les faire figurer à la suite de l’URL. Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-7 Internet et Education © TECFA 9/11/04 Illustrations: • Le formulaire est traité par la ressource /cgi-bin/colin: <form method=”post” action=”http://tecfa.unige.ch/cgi-bin/colin”> • Le formulaire ne sera pas envoyé à un programme cgi (eventuellement, il pourrait être traité par JavaScript): <form> • Le formulaire est traité pas la ressource "mailto:" <form enctype="application/x-www-form-urlencoded" action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post> Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-8 Internet et Education © TECFA 9/11/04 3.2 Questions ouvertes et fermées: <INPUT> A. Aperçu des widgets “<INPUT>” sert à poser des questions selon différentes modalités: <INPUT TYPE=”...” NAME=”...” VALUE=”...” CHECKED=”...” SIZE=”...” MAXLENGTH=”...”> "TYPE" spécifie le type de question: • “text” est la valeur par défaut et permet de saisir une ligne de texte. (par exemple nom, prénom, adresse etc...) Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-9 Internet et Education © TECFA 9/11/04 • “password” fait apparaître le texte entré sous forme d’astérisques. (*) • “checkbox” permet de définir un bouton qui est soit poussé ou relâché. • “radio” définit un ensemble de boutons dont un seul peut être activé à la fois. (par exemple: rouge/bleu/vert) • “submit” définit un bouton qui déclenche l’envoi du contenu du formulaire. • “reset” remet les valeurs des champs du formulaire à leur valeur par défaut. • Il existe aussi un type "button" qui crée un bouton vide (à utiliser avec JavaScript) Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-10 Internet et Education © TECFA 9/11/04 B. L’attribut "NAME" NAME sert à donner un nom à chaque champ: • Il n’apparaît pas à l’affichage • Il est est utile pour le traitement des données par le programme qui recevra les données. • Il n’est pas nécessaire de spécifier un nom de champ pour les types “submit” et “reset”. • NAME sert à regrouper des boutons “radio” (voir exemple ci-dessous) • (Sauf exception) n’utilisez pas le même name pour plusieurs “checkbox” Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-11 Internet et Education © TECFA 9/11/04 Illustrations: Lors du traitement du formulaire, la variable ‘chiffre1’ contiendra le nombre écrit dans la zone de texte. Entrez un chiffre dans cette zone: <INPUT TYPE=”text” NAME=”chiffre1” SIZE=10> • Les ‘radio-boutons’ ont le même nom, seul un peut être activé. • Lors du traitement du formulaire, la variable ‘sexe’ contiendra soit “m”, soit “f”. Sexe: <input type="radio" name="sexe" value="f">Masculin <input type="radio" name="sexe" value="m">Féminin ... voir la définition de l’attribut value à la page suivante SIZE = 10 Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-12 Internet et Education © TECFA 9/11/04 C. L’attribut "VALUE" VALUE permet de spécifier les valeurs des réponses: • Pour les questions ouvertes (text) value définit la valeur par défaut (si nécessaire) • Pour les widgets de type radio et checkbox, il définit la valeur transmise par le formulaire pour le bouton sélectionné. • Pour les types “submit”, “reset” et "button", la valeur du paramètre value correspond au texte affiché sur le bouton. <input type=”text” name=”nom_de_famille” value=”Dupuis”> <input type="checkbox" name=”doc” value=”doc_souhaitee”> <input type=”submit” value=”enregistrer”> Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-13 Internet et Education © TECFA 9/11/04 D. L’attribut "CHECKED" CHECKED permet d’“enfoncer” les boutons par défaut. • ne prends pas de valeur • s’applique qu’aux types “checkbox” et “radio”. <input type=checkbox name=age value=”mineur”> Vous êtes mineur <input type=checkbox name=age CHECKED value=”adulte”> Vous êtes adulte Sexe: <INPUT TYPE="radio" NAME="sexe" CHECKED>Masculin <INPUT TYPE="radio" NAME="sexe">Féminin CHECKED Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-14 Internet et Education © TECFA 9/11/04 E. L’attribut "SIZE" SIZE spécifie la largeur d’un champs (Nb de caractères) • s’applique aux questions ouvertes <INPUT TYPE=text NAME=nom SIZE=”10” VALUE=”100”> MAXLENGTH détermine le nombre maximum de caractères pouvant être saisis pour une question ouverte. • Si ce paramètre ne figure pas dans la déclaration d’input, le nombre de caractères possibles est infini. <input type=text name=commentaire maxlength=50> SIZE = 10 VALUE=100 Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-15 Internet et Education © TECFA 9/11/04 3.3 Menus déroulants et listes à choix multiples <SELECT> • SELECT permet de définir un menu déroulant. • Vous pouvez ainsi forcer le choix entre plusieurs possibilités. • Celles-ci sont référencées par le tag “option” Paramètres: • NAME est le nom symbolique du champ contenant la réponse. • Si SIZE=1 le browser affichera un menu déroulant classique. Si SIZE=2 ou plus les options apparaîtront dans une liste “scrollable” qui laisse apercevoir le nombre d’items spécifiés par SIZE. • MULITIPLE ne prend pas de valeur. S’il est mentionné il permet le choix de plus d’un item. Dès lors, même si SIZE=1, le browser affiche une liste “scrollable”. Le tag OPTION: • ne requiert pas de fermeture • permet d’indiquer le texte d’un élément du menu déroulant. Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-16 Internet et Education © TECFA 9/11/04 Exemple: <select name=”pays” size=1> <option>CH: Suisse <option>D: Allemagne <option>F: France <option>US: Etats-Unis <option>A: Autriche <option>I: Italie </select><p> <select name="pays" size=6> <option>CH: Suisse <option>D: Allemagne <option>F: France <option>US: Etats-Unis <option>A: Autriche <option>I: Italie </select> Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-17 Internet et Education © TECFA 9/11/04 3.4 Les zones de texte <TEXTAREA> Permet de définir une entrée qui s’étend sur plus qu’une ligne.: • A utiliser par exemple pour permettre à l’utilisateur de donner un commentaire. • Comme pour les autres champs il faut spécifier un nom symbolique pour le contenu du champ. (NAME) • La largeur et la hauteur (en nombre de lignes) de la fenêtre de saisie est déterminé par les paramètres ROWS et COLS Exemple: <TEXTAREA name=”comments” rows=4 cols=60> </textarea> Les formulaires HTML - 3. Eléments HTML les plus importants html-forms-18 Internet et Education © TECFA 9/11/04 3.5 Formulaires HTML et e-mail Exemple 3-1: Envoyer le contenu d’un formulaire avec email • Voir aussi le manuel HTML: http://tecfa.unige.ch/guides/htmlman/exo6.html Principe: • Au lieu d'appeler un script CGI-BIN avec le formulaire, la commande mailto est directement invoquée. • Notez l’utilisation de “enctype=.....” Ce qui change par rapport à l'option CGI : • Le traitement du formulaire est pris en charge par le client WWW qui envoie un e-mail contenant les réponses au formulaire. • Cette solution est la plus simple pour une interaction unidirectionnelle (vous voulez recevoir de l'info sans donner de uploads/Litterature/ html-forms 1 .pdf

  • 22
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager