Faire un formulaire avec Dreamweaver cs5. MC Benveniste

Transcription

1 Faire un formulaire avec Dreamweaver cs5 MC Benveniste 2013

2 Première partie : création du formulaire

3 Vérifiez dans les préférences que les attributs d accessibilité sont bien cochés pour les objets de formulaire dans édition > préférences sur pc dans dreamweaver > préférences sur mac

4 Allez dans les insertions de formulaires Assurez-vous de travailler dans la partie création de la page

5 Choisir la première icône : insérer un formulaire Cliquez : vous devez voir apparaître des pointillés rouge dans la page le code insère la balise <form> avec des attributs, ouverte et fermez l inspecteur de propriétés est celui du formulaire

6 Remplissez les attributs du formulaire Nommer le formulaire Cliquez sur l icône de dossier pour aller chercher la page en php dans la liste des fichiers de votre site, afin de lui donner une action,

7 Objets de formulaire : bouton radio tapez civilité : Allez dans les objets de formulaire choisir groupe de boutons radio

8 Objets de formulaire : bouton radio rappel: les boutons radio servent à un choix unique, on ne peut n en cocher qu un seul Donnez un nom au groupe de bouton, cohérent par rapport à ce que vous voulez récupérer comme information : (sans espace, ni accent) ici civilite Etiquette sera le mot écrit à côté du bouton radio, valeur sera ce que vous allez récupérer comme information, lorsque l utilisateur aura coché le bouton correspondant + et - permettent d ajouter ou de supprimer des boutons radio

9 Objets de formulaire : bouton radio : résultat Une mise en page avec des sauts de lignes est créée, mais nous reviendrons sur la mise en page dans la deuxième partie du tutoriel. Insérez un paragraphe après le dernier bouton radio avec la touche enter dans la partie création

10 Objets de formulaire : champ de texte ID doit être unique dans la page, et correspondre à la valeur que vous souhaiterez récupérer Etiquette est ce qui sera écrit à côté du champ de texte Joindre avec une balise d étiquette servira à l'accessibilité et à la mise en page

11 Objets de formulaire : champ de texte : résultat

12 Propriétés du champ de texte Remplir les propriétés manquantes du champ de texte largeur de caractères indique le nombre de caractères visibles à l écran, ensuite les caractères défileront dans la boîte nombre de caractères maximum indique le nombre de caractère que vous autorisez l utilisateur à entrer dans ce champ (soyez assez généreux pour les adresses mail!)

13 Objets de formulaire : champ de texte recommencez pour les autres champs de texte souhaités par exemple : adresse mail Résultat

14 Objets de formulaire : liste déroulante par exemple une liste de pays Remplissez comme précédemment Donnez les valeurs de la liste en cliquant dans valeurs de la liste dans l inspecteur des propriétés

15 Objets de formulaire : liste déroulante par exemple une liste de pays Etiquette de l élément est ce qui apparaîtra dans la liste Valeur est l information telle que vous la récupérerez dans le mail + et - permettent d ajouter ou de supprimer des éléments de la liste et les flèches à droite de changer l ordre

16 Objets de formulaire : liste déroulante Résultat Par défaut, ce sera le premier élément de la liste qui apparaîtra. Si vous souhaitez qu un autre apparaisse en premier sur la page web cochez-le dans les propriétés de la liste, dans initalement sélectionné

17 Objets de formulaire : cases à cocher souvent utilisés pour des centres d'intérêts elles permettent un, plusieurs ou aucun choix, en cochant ou décochant Après avoir fait un saut de paragraphe après notre liste déroulante, tapez : Vos centres d'intérêts puis allez dans les objets de formulaires, choisir : groupe de cases à cocher et procédez comme pour les boutons radio

18 Objets de formulaire : cases à cocher

19 Objets de formulaire : zone de texte

20 Objets de formulaire : zone de texte Vous pouvez modifier la largeur et la hauteur de la boîte dans l inspecteur de propriétés largeur de caractères correspondra aux nombres de caractères visibles avant le retour à la ligne en bout de boîte nombre de lignes correspond au nombre de lignes avant l'apparition de la barre de défilement

21 Objets de formulaire : bouton envoyer Si vous remplissez l étiquette le mot apparaîtra à côté du bouton, et est donc inutile Assurez-vous que l action est bien d envoyer le formulaire!

22 Code complet du formulaire ainsi créé. Formulaire dans le navigateur

23 FIN!