Tutoriel : les formulaires Ouvrir sous NVU le fichier Exercice4.html, vous travaillerez à partir de ce fichier Sous le titre en h4 définissez un formulaire : Nom du formulaire : Inscription Url de l'action (c'est à dire l'url sur lequel vous enverrez le mail) : urfist2@ccr.jussieu.fr Méthode : Post (qui est la méthode pour envoyer par email le contenu de la saisie d'un formulaire) Encodage : text/plain (pour l'envoi par email) dans édition avancée l'attribut name aura la valeur inscri dans édition avancée > éléments javascript > attribut onsubmit aura pour valeur return valider() Une fois votre début de formulaire créé, assignez lui une légende (correspond aux balises Fieldset et legend) grâce à l'option définir les propriétés du champ. En légende, vous pouvez mettre Formulaire. Nous vous laissons libre ensuite de l'aligner à droite, à gauche ou au centre. Les différents champs que vous allez devoir créer : Nom, Prénom, Adresse, Code Postal, Numéro de fixe, Numéro de portable, Email seront des champs textes. Quel est votre opérateur? sera une liste déroulante à choix unique. Téléphonez vous régulièrement à l'étranger? Oui et non (réponse sous forme de bouton radio) Si oui dans quel pays? liste déroulante à choix multiples Je souhaite recevoir : réponse sous forme de case à cocher dont brochure sera par défaut cochée Informations complémentaires : zone de saisie libre A l'exception de la zone de saisie libre, tous les champs contiendront l'élément Label qui correspond à l'option créer une étiquette. Conseil pour sélectionner à l'aide de la souris le nom et le champ du formulaire pour insérer l'élément Label : soulignez le nom et maintenez la touche shift (représentée par une flèche sur le clavier) et cliquez sur le champ à côté. Ces deux zones devraient être sélectionnées. Pour contrôler correspond à l'élément for. La valeur donnée à for devra être répétée dans le champ du formulaire auquel il est associé par l'élément id que vous trouverez dans l'édition avancée > Attribut HTML 1. Nom : Nom du champ = Nom Taille du champ = 20 Nombre de caractères = 50 Dans édition avancée > attribut HTML : id = nom_inscription Dans édition avancée > style interne : text-transform: uppercase Taponot Céline Urfist Paris 1/6
2. Prénom : Nom du champ = Prénom Taille du champ = 20 Nombre de caractères = 50 Dans édition avancée : id = prenom_inscription 3. Adresse : Nom du champ = adresse Taille du champ = 30 Nombre de caractères = 60 Dans édition avancée : id = adresse_inscription Dans édition avancée > style interne : text-transform: lowercase 4. Code Postal : Nom du champ = Code Postal Taille du champ = 6 Nombre de caractères = 5 Dans édition avancée : id = code_inscription 5. Téléphone : Nom du champ = Téléphone Taille du champ = 11 Nombre de caractères = 10 Dans édition avancée : id = tel_inscription 6. Email : Nom du champ = Email Taille du champ = 20 Nombre de caractères = 30 Dans édition avancée : id = email_inscription 7. Quel est votre opérateur : Type de champ = Liste de sélection Nom de la liste = Opérateur Hauteur = 5 (c'est le nombre de lignes qui apparaîtront à l'écran) Pour cette liste, vous ne créez pas de groupe, vous ajoutez simplement des options : - France Télécom (dans option avancée en même temps n'oubliez pas de remplir l'élément label : telecom) - Télé 2 (label : tele2) - Cégétel (label : cegetel) - Le 9 (label : le9) Taponot Céline Urfist Paris 2/6
- British Télécom (label : british_telecom) - Italia Télécom (label : italia_telecom) 8. Téléphonez vous régulièrement à l'étranger? Type de champ = bouton radio (pour les deux) Nom du champ = réponse (pour les deux) Valeur du champ = oui pour l'un et non pour l'autre Dans édition avancée : id = oui_inscription et non_inscription 9. Si oui dans quel pays (plusieurs réponses sont possibles)? Type de champ = Liste de sélection Nom de la liste = Appel_Etranger Hauteur = 5 (c'est le nombre de lignes qui apparaîtront à l'écran) Cocher la case multiple pour pouvoir sélectionnez ensuite plusieurs réponses Ci-dessous, vous trouverez le code HTML pour ce champ. C'est la même démarche que pour la liste déroulante précédente avec l'élément ajouter un groupe en plus. Le code est surtout là pour vous indiquer les différents label à appliquer. <optgroup label="europe"> <option label="all" value="allemagne">allemagne</option> <option label="it" value="italie">italie</option></optgroup> <optgroup label="amérique"> <option label="us" value="usa">etats-unis</option> <option label="mex" value="mexique">mexique</option> <option label="br" value="bresil">brésil</option></optgroup> <optgroup label="asie"> <option label="ch" value="chine">chine</option> <option label="jap" value="japon">japon</option> <option label="inde" value="inde">inde</option> <option label="coree" value="coree">corée</option> </optgroup> 10.Je souhaite recevoir : Type de champ = case à cocher(pour les trois) Nom du champ = recevoir (pour les trois) Pour le premier champ, l'option sera préalablement cochée pour cela, aller dans option avancée > Attribut HTML > dans la liste déroulante sélectionnez checked Valeur du champ = - 1/ Brochure / id = brochure_inscription - 2/ Newsletter / id = newsletter_inscription - 3/ Téléphone / id = telephone_inscription 11.Commentaire à nous soumettre : Nom du champ = zone de texte Ligne = 5 (Cet attribut spécifie le nombre de lignes de texte visibles.) Taponot Céline Urfist Paris 3/6
Colonne = 20 (Cet attribut spécifie la largeur visible en fonction de la chasse moyenne des caractères) Retour à la ligne = défaut 12.Les Boutons : Type de champ = Bouton de validation Nom du champ = validation Valeur du champ = envoyez! Type de champ = Bouton reset Nom du champ = annulation Valeur du champ = annuler Vérifiez maintenant grâce à l'option Outil la validité de votre code HTML Source : http://www.ccr.jussieu.fr/urfist/html/formula.htm Taponot Céline Urfist Paris 4/6
Taponot Céline Urfist Paris 5/6
Taponot Céline Urfist Paris 6/6