Guide d'utilisation Annuler

Création de formulaires web

Rechercher
Dreamweaver

Dreamweaver

Ouvrir l’application
  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver
  19. Résolution des problèmes
    1. Problèmes résolus
    2. Problèmes connus

 

 

Remarque :

La prise en charge des éléments de formulaire HTML a été améliorée dans les mises à jour de Dreamweaver Creative Cloud. Pour plus d’informations, consultez Prise en charge améliorée de HTML5 pour les éléments de formulaire.

À propos des formulaires web

Lorsqu’un visiteur saisit des informations dans un formulaire web affiché dans un navigateur web et clique sur le bouton d’envoi, les informations sont envoyées à un serveur, où une application ou un script côté serveur les traite. Le serveur répond en renvoyant les informations traitées à l’utilisateur (ou au client) ou en exécutant une autre action déterminée par le contenu du formulaire.

Vous pouvez créer des formulaires qui envoient des données à la plupart des serveurs d’application, dont PHP, ASP et ColdFusion. Si vous utilisez ColdFusion, vous pouvez également ajouter des contrôles de formulaire spécifiques à ColdFusion dans vos formulaires.

Remarque :

Vous pouvez également envoyer des données de formulaire directement à une adresse électronique.

Objets de formulaire

Sous Dreamweaver, les types d’entrées de formulaire sont appelés des objets de formulaire. Les objets de formulaire sont les éléments qui permettent aux utilisateurs d’entrer des données. Vous avez la possibilité d’ajouter les objets de formulaire suivants à un formulaire :

Champs de texte

Acceptent tout type d’entrée alphanumérique. Vous pouvez afficher le texte sur une seule ligne, sur plusieurs lignes et sous la forme d’un champ de mot de passe dans lequel le texte saisi est remplacé par des astérisques ou des puces afin d’être masqué.

Remarque :

Les mots de passe et tout autre type d’informations envoyés à un serveur à l’aide d’un champ de mot de passe ne sont pas cryptés. Les données transférées peuvent donc être interceptées et lues en tant que texte alphanumérique. Aussi devez-vous prévoir le cryptage systématique des données que vous souhaitez protéger.

Champs masqués

Stockent des informations saisies par un utilisateur, telles qu’un nom, une adresse électronique ou une préférence d’affichage, puis réutilisent ces informations lors de la prochaine visite de l’utilisateur sur le site.

Boutons

Exécutent des actions lorsque l’utilisateur clique dessus. Vous pouvez ajouter une étiquette ou un nom personnalisé à un bouton ou utiliser l’une des étiquettes prédéfinies : Envoyer ou Rétablir. Utilisez un bouton pour l’envoi des données du formulaire au serveur ou pour la réinitialisation du formulaire. Vous pouvez également attribuer à un bouton d’autres tâches de traitement préalablement définies dans un script. Un bouton peut ainsi calculer le montant total des éléments sélectionnés en fonction des valeurs que vous leur avez attribuées.

Cases à cocher

Permettent les réponses multiples au sein d’un même groupe d’options. Un utilisateur peut sélectionner toutes les options qu’il juge nécessaires. L’exemple suivant montre trois éléments case à cocher sélectionnés : Surfing, Mountain biking et Rafting sont activées.

Boutons radio

Représentent des choix exclusifs. Lorsqu’un utilisateur clique sur un bouton dans un groupe de boutons radio, cela désélectionne tous les autres boutons du groupe (un groupe comprend plusieurs boutons dotés du même nom). Dans l’exemple ci-dessous, Rafting est l’option sélectionnée. Si l’utilisateur clique sur Surfing, l’option Rafting est automatiquement désactivée.

Listes déroulantes

Affichent des valeurs d’option au sein d’une liste déroulante qui permet aux utilisateurs de sélectionner plusieurs options. L’option Liste affiche les valeurs d’option dans un menu et permet aux utilisateurs de sélectionner un seul élément. Utilisez des menus lorsque vous disposez d’un espace réduit et que vous devez afficher de nombreux éléments, ou lorsque vous souhaitez contrôler les valeurs renvoyées au serveur. A la différence des champs de texte, dans lesquels les utilisateurs peuvent taper ce qu’ils veulent, y compris des données non valides, c’est à vous de définir les valeurs exactes renvoyées par un menu.

Remarque :

Un menu déroulant de formulaire HTML est différent d’un menu déroulant graphique. Pour plus d’informations sur la création, la modification, l’affichage et le masquage d’un menu déroulant graphique, cliquez sur le lien à la fin de cette section.

Menus de reroutage

Sont des listes de navigation ou des menus déroulants qui vous permettent d’insérer un menu dans lequel chaque option est reliée à un document ou à un fichier.

Champs de fichier

Permettent aux utilisateurs de rechercher un fichier sur leur ordinateur et de le télécharger en tant que données de formulaire.

Champs d’image

Permettent d’insérer une image dans un formulaire. Utilisez les champs d’image pour créer des boutons graphiques (bouton Envoyer ou Réinitialiser, par exemple). Vous devez associer un comportement à l’objet de formulaire pour pouvoir utiliser une image afin d’effectuer une tâche autre que l’envoi de données.

Création d’un formulaire HTML

(Utilisateurs de Creative Cloud uniquement) : Dans le cadre de la prise en charge de HTML5, de nouveaux attributs ont été ajoutés au panneau Propriétés pour les éléments de formulaire. En outre, quatre nouveaux éléments du formulaire (E-mail, recherche, téléphone, URL) ont été ajoutés à la section Formulaires du panneau Insertion. Pour plus d’informations, consultez Prise en charge améliorée de HTML5 pour les éléments de formulaire.

  1. Ouvrez une page et placez le point d’insertion à l’endroit où vous souhaitez insérer le formulaire.
  2. Choisissez Insertion > Formulaire ou, dans le panneau Insertion, cliquez sur la catégorie Formulaires, puis sur l’icône Formulaire.

    Dans une page affichée en mode Création, les formulaires sont indiqués par une bordure rouge en pointillé. Si vous ne voyez pas cette bordure, choisissez Affichage > Assistances visuelles > Eléments invisibles.

  3. Définissez les propriétés du formulaire HTML dans l’inspecteur Propriétés (Fenêtre > Propriétés) :

    a. Dans la fenêtre de document, cliquez sur la bordure du formulaire afin de le sélectionner.

    b. Dans la zone Nom du formulaire, tapez un nom unique afin d’identifier le formulaire.

    Vous rendez ainsi possible son référencement ou son contrôle à l’aide d’un langage de script, tel que JavaScript ou VBScript. Si vous n’attribuez aucun nom au formulaire, Dreamweaver génère un nom en utilisant la syntaxe formn et augmente la valeur de n pour chaque nouveau formulaire ajouté à la page.

    c. Dans la zone Action, indiquez la page ou le script qui va traiter les données du formulaire en entrant son chemin d’accès ou en cliquant sur l’icône du dossier pour naviguer jusqu’à la page ou jusqu’au script approprié. Exemple : processorder.php.

    d. Dans le menu déroulant Méthode, spécifiez la méthode permettant de transmettre les données du formulaire au serveur.

    Parmi les options suivantes, définissez celles de votre choix :

    Par défaut Permet de se baser sur le paramétrage par défaut du navigateur pour envoyer les données du formulaire au serveur. En général, la valeur par défaut est la méthode GET.

    GET Permet d’annexer la valeur à l’URL demandant la page.

    POST Permet d’incorporer les données du formulaire dans la requête HTTP.

    N’utilisez pas la méthode GET pour envoyer des formulaires longs. Les URL sont limitées à 8192 caractères. Si la quantité de données envoyées est trop importante, celles-ci seront tronquées, ce qui peut produire des résultats inattendus ou un échec du traitement.

    Il est possible d’ajouter des signets aux pages dynamiques générées par des paramètres transmis par la méthode GET, car toutes les valeurs nécessaires pour régénérer la page sont contenues dans l’URL affichée dans la zone Adresse du navigateur. En revanche, il n’est pas possible d’ajouter de signet aux pages dynamiques générées par des paramètres transmis par la méthode POST.

    Si vous rassemblez des noms d’utilisateur et des mots de passe, des numéros de cartes de crédit ou d’autres informations confidentielles, la méthode POST peut sembler plus sûre que la méthode GET. Toutefois, les informations envoyées par la méthode POST ne sont pas codées. Par conséquent, les pirates peuvent les récupérer facilement. Pour garantir leur sécurité, utilisez une connexion sécurisée à un serveur sécurisé.

     

    e. (Facultatif) Utilisez le menu contextuel Enctype pour définir le type de codage MIME des données envoyées au serveur pour traitement.

    Le paramètre par défaut de application/x-www-form-urlencode est généralement utilisé en combinaison avec la méthode POST. Si vous créez un champ de téléchargement de fichier, spécifiez le type de codage MIME multipart/form-data.

     

    f. (Facultatif) Utilisez le menu déroulant Cible pour spécifier la fenêtre dans laquelle les données renvoyées par le programme appelé s’affichent.

    Si la fenêtre indiquée n’est pas encore ouverte, une nouvelle fenêtre du même nom apparaît. Définissez l’une des valeurs cible suivantes :

    _blank Ouvre le document de destination dans une nouvelle fenêtre sans nom.

    _parent Ouvre le document de destination dans la fenêtre parente de celle affichant le document actif.

    _self Ouvre le document de destination dans la même fenêtre que celle dans laquelle le formulaire a été envoyé.

    _top Ouvre le document de destination au sein de la fenêtre en cours. Cette valeur permet de s’assurer que le document de destination occupe la fenêtre entière, même si le document d’origine était affiché dans un cadre.

  4. Insérez des objets de formulaire dans la page :

    a. Placez le point d’insertion à l’endroit où l’objet de formulaire doit s’afficher dans le formulaire.

    b.Choisissez l’objet dans le menu Insertion >Formulaire, ou dans la catégorie Formulaires du panneau Insertion.

    c. Complétez la boîte de dialogue Attributs d’accessibilité des balises d’entrée. Pour plus d’informations, cliquez sur le bouton Aide de la boîte de dialogue.

    Remarque :

    Si la boîte de dialogue Attributs d’accessibilité des balises d’entrée n’est pas visible, il se peut que le point d’insertion se trouvait en mode Code lorsque vous avez tenté d’insérer l’objet de formulaire. Assurez-vous que le point d’insertion se trouve bien en mode Création, puis réessayez. Pour plus d’informations à ce sujet, consultez l’article Creating HTML forms in Dreamweaver (en anglais) de David Powers.

    d. Définissez les propriétés des objets.

    e. Entrez un nom pour l’objet dans l’inspecteur Propriétés.

    Chaque objet champ de texte, champ caché, case à cocher et liste/menu doit posséder un nom unique identifiant l’objet dans le formulaire. Les noms d’objets de formulaire ne peuvent comporter ni espaces, ni caractères spéciaux. Vous pouvez utiliser toutes les combinaisons de caractères alphanumériques ainsi qu’un caractère de soulignement (_). L’étiquette que vous attribuez à l’objet correspond au nom de la variable où la valeur du champ (les données saisies) sera stockée. Il s’agit de la valeur envoyée au serveur pour traitement.

    Remarque :

    Tous les boutons radio d’un même groupe doivent porter le même nom.

    f. Pour attribuer une étiquette à l’objet champ de texte, case à cocher ou bouton radio dans la page, cliquez en regard de l’objet et tapez le texte souhaité.

  5. Améliorez la mise en forme du formulaire.

    Utilisez des sauts de ligne, des sauts de paragraphes, du texte préformaté ou des tableaux pour mettre en forme vos formulaires. Vous ne pouvez pas insérer un formulaire dans un autre formulaire (c’est-à-dire superposer des balises), mais vous pouvez inclure plusieurs formulaires dans une même page.

    Lors de la conception de formulaires, n’oubliez pas de libeller les champs du formulaire sous forme de texte descriptif, afin que les utilisateurs sachent ce qu’ils ont à faire (par exemple, « Entrez votre nom » pour demander des informations de nom).

    Utilisez des tableaux pour fournir une structure pour les objets et les étiquettes de champ. Assurez-vous, lorsque vous utilisez des tableaux dans un formulaire, que toutes les balises table sont incluses entre les balises form.

Vous trouverez un didacticiel consacré à la création de formulaires à l’adresse www.adobe.com/go/vid0160_fr.

Vous trouverez un didacticiel consacré à la mise en page de formulaires à l’aide de CSS à l’adresse www.adobe.com/go/vid0161_fr.

Propriétés de l’objet Champ de texte

Sélectionnez l’objet champ de texte et définissez les options suivantes dans l’inspecteur Propriétés :

Largeur car.

Définit le nombre maximal de caractères pouvant être affichés dans le champ. Ce nombre peut être inférieur à Nbre max. de caract., qui définit le nombre maximal de caractères pouvant être entrés dans le champ. Ainsi, si le champ Largeur de caractère est défini sur la valeur par défaut 20 et qu’un utilisateur saisit 100 caractères, ce dernier ne pourra voir que 20 de ces caractères dans le champ de texte. Bien que l’utilisateur ne voie pas tous les caractères saisis dans le champ, ils sont reconnus par l’objet de champ et envoyés au serveur pour traitement.

Nbre max. de caract.

Définit le nombre maximum de caractères qu’il est possible de saisir dans le champ pour les champs de texte à une seule ligne. Utilisez Nbre max. de caract. pour limiter un code postal à 5 chiffres, un mot de passe à 10 caractères, etc. Si vous ne renseignez pas la zone de texte Nbre max. de caract., les utilisateurs peuvent saisir un texte d’une longueur illimitée. Si l’entrée de l’utilisateur dépasse la largeur des caractères du champ, le texte défile. Si l’entrée de l’utilisateur dépasse le nombre maximum de caractères, le formulaire émet un son d’alerte.

Nbre lignes

(Disponible lorsque l’option Multiligne est sélectionnée) Définit la hauteur du champ pour les champs de texte à plusieurs lignes.

Désactivé

Désactive la zone de texte.

Lecture seule

Transforme la zone de texte en zone en lecture seule.

Type

Désigne le type de champ : ligne simple, multiligne ou mot de passe.

Ligne simple

Permet de positionner une balise input dont l’attribut type est fixé à text. Le paramètre Larg. des caractères représente l’attribut size ; Nbre max. de caract. représente l’attribut maxlength.

Lignes multiples

Permet de positionner une balise textarea. Le paramètre Larg. des caractères est relié à l’attribut cols ; Nbre caract. max. est relié à l’attribut rows.

Mot de passe

Permet de positionner une balise input dont l’attribut type est fixé à password. Les paramètres Larg. des caractères et Nbre max. de caract. sont reliés aux mêmes attributs que les champs de texte à une seule ligne. Lorsqu’un utilisateur entre des données dans un champ mot de passe, le texte apparaît sous forme de puces ou d’astérisques pour le protéger du regard de tiers.

Init val

Attribue la valeur affichée dans le champ lors du premier chargement du formulaire. Ainsi pouvez-vous indiquer, par exemple, que l’utilisateur doit saisir des informations de type remarque ou exemple dans le champ.

Classe

Permet d’appliquer des règles CSS à l’objet.

Options de l’objet Bouton

Nom de bouton

Attribue un nom au bouton. Les deux noms réservés, Envoyer et Réinitialiser, indiquent respectivement au formulaire d’envoyer les données du formulaire à l’application ou au script de traitement et de réinitialiser les valeurs initiales des champs du formulaire.

Valeur

Détermine le texte apparaissant sur le bouton.

Action

Détermine ce qui se passe lorsque le bouton est cliqué.

Envoyer le formulaire

Envoie les données du formulaire pour traitement lorsque l’utilisateur clique sur le bouton. Les données sont envoyées à la page ou au script spécifié par la propriété Action du formulaire.

Réinitialiser le formulaire

Rétablit le contenu à ses valeurs par défaut lorsque l’utilisateur clique sur le bouton.

Aucun

Spécifie l’action a exécuter lorsque l’utilisateur clique sur le bouton. Par exemple, vous pouvez ajouter un comportement JavaScript qui ouvre une autre page lorsque l’utilisateur clique sur le bouton.

Classe

Applique des règles CSS à l’objet.

Options de l’objet Case à cocher

Valeur

Définit la valeur à envoyer au serveur lorsque la case à cocher est activée. Par exemple, dans un sondage, vous pouvez définir une valeur de 4 pour « approuve fortement » et une valeur de 1 pour « désapprouve fortement ».

Etat initial

Détermine si la case à cocher est sélectionnée lorsque le formulaire est chargé dans le navigateur.

Dynamique

Permet au serveur de déterminer de façon dynamique l’état initial de la case à cocher. Par exemple, vous pouvez présenter visuellement les informations Oui/Non stockées dans un enregistrement de base de données à l’aide de cases à cocher. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l’exécution, le serveur lit l’enregistrement de base de données et active la case à cocher si la valeur est Oui.

Classe

Applique des règles CSS (Cascading Style Sheets, feuilles de style en cascade) à l’objet.

Options de l’objet Bouton radio unique

Valeur

Définit la valeur à envoyer au serveur lorsque le bouton radio est sélectionné. Par exemple, vous pouvez taper ski dans la zone de texte Valeur pour indiquer qu’un utilisateur a choisi le ski.

Etat initial

Détermine si le bouton radio est sélectionnée lorsque le formulaire est chargé dans le navigateur.

Dynamique

Permet au serveur de déterminer de façon dynamique l’état initial du bouton radio. Par exemple, vous pouvez présenter visuellement des informations stockées dans un enregistrement de base de données à l’aide de boutons radio. Au stade de la conception, vous ne connaissez pas ces informations. Au moment de l’exécution, le serveur lit l’enregistrement de base de données et vérifie si la valeur du bouton radio correspond à celle que vous avez spécifiée.

Classe

Applique des règles CSS à l’objet.

Liste/Menu

Attribue un nom au menu. Ce nom doit être unique.

Type

Indique si le menu se déroule lorsque l’utilisateur clique dessus (option Menu) ou s’il affiche une liste déroulante d’éléments (option Liste). Sélectionnez l’option Menu si vous souhaitez qu’un seul choix soit visible lorsque le formulaire s’affiche dans un navigateur. Pour afficher les autres choix, l’utilisateur doit cliquer sur la flèche vers le bas.

Sélectionnez l’option Liste pour afficher quelques-unes ou l’ensemble des options lorsque le formulaire s’affiche dans un navigateur, afin de permettre aux utilisateurs de sélectionner plusieurs éléments.

Hauteur

(Type Liste uniquement) Définit le nombre d’éléments affichés dans le menu.

Sélections

(Type Liste uniquement) Indique si l’utilisateur peut sélectionner plusieurs éléments dans la liste.

Valeurs de la liste

Ouvre une boîte de dialogue qui vous permet d’ajouter les éléments à un menu de formulaire :

  1. Utilisez les boutons Plus (+) et Moins (-) pour ajouter et supprimer des éléments de la liste.

  2. Tapez un libellé ainsi qu’une valeur optionnelle pour chaque élément de menu.

    Chaque élément de la liste possède un libellé (le texte qui apparaît dans la liste) et une valeur (la valeur envoyée à l’application de traitement si l’élément est sélectionné). Si aucune valeur n’est spécifiée, le libellé est envoyé à l’application de traitement.

  3. Utilisez les boutons fléchés Haut et Bas pour réorganiser les éléments de la liste.

    Les éléments apparaissent dans le menu dans le même ordre qu’ils apparaissent dans la boîte de dialogue Valeurs de la liste. Le premier élément sur la liste est l’élément sélectionné lorsque la page est chargée dans un navigateur.

Dynamique

Permet au serveur de sélectionner de façon dynamique un élément dans le menu lors de son affichage initial.

Classe

Permet d’appliquer des règles CSS à l’objet.

Initialement sélectionné

Définit les éléments sélectionnés par défaut dans la liste. Cliquez sur un ou plusieurs éléments dans la liste.

Insertion de champs de téléchargement de fichier

Vous pouvez créer un champ de téléchargement de fichier permettant aux utilisateurs de sélectionner un fichier sur leur ordinateur (tel qu’un document de traitement de texte ou un fichier graphique) et de le télécharger sur le serveur. Un champ de fichier est similaire à un champ de texte, mais contient également un bouton Parcourir. L’utilisateur peut soit saisir manuellement le chemin d’accès au fichier à télécharger, soit cliquer sur le bouton Parcourir pour le rechercher et le sélectionner.

Avant d’utiliser les champs de téléchargement de fichiers, vous devez disposer d’un script côté serveur ou d’une page capable de traiter les soumissions de fichiers. Consultez la documentation de la technologie serveur à utiliser pour traiter les données des formulaires. Par exemple, si vous utilisez PHP, consultez la section « Handling files uploads » (Gestion des chargements de fichiers) dans le manuel PHP à l’adresse http://us2.php.net/features.file-upload.php.

Les champs de fichier nécessitent l’utilisation de la méthode POST pour transmettre des fichiers depuis un navigateur vers le serveur. Le fichier est transféré à l’adresse indiquée dans la zone de texte Action du formulaire.

Remarque :

Avant d’utiliser le champ de fichier, vérifiez auprès de votre administrateur de serveur que le téléchargement anonyme de fichiers est autorisé.

  1. Insérez un formulaire dans la page (Insertion > Formulaire).
  2. Sélectionnez le formulaire pour en afficher l’inspecteur Propriétés.
  3. Dans le menu déroulant Méthode, sélectionnez POST.
  4. Dans le menu déroulant Enctype, sélectionnez multipart/form-data.
  5. Dans la zone de texte Action, spécifiez le script côté serveur ou la page capable de traiter le fichier téléchargé.
  6. Placez le point d’insertion à l’intérieur de la bordure du formulaire et sélectionnez Insertion > Formulaire > Champ de fichier.
  7. Définissez les options suivantes dans l’inspecteur Propriétés :

    Champ de fichier

    Indique le nom de l’objet champ de fichier.

    Largeur car.

    Définit le nombre maximal de caractères pouvant être affichés dans le champ.

    Nbre max. de caract.

    Indique le nombre maximum de caractères que peut contenir le champ. Si l’utilisateur parcourt l’arborescence pour trouver le fichier, le nom du fichier et son chemin d’accès risquent de comporter un nombre de caractères supérieur à celui indiqué dans le champ Nbre max. de caract. Par contre, si l’utilisateur tente de taper le nom du fichier et son chemin d’accès, le champ de fichier ne lui permet pas d’entrer un nombre de caractères supérieur à celui indiqué.

Insertion d’un bouton d’image

Vous pouvez utiliser des images en qualité d’icônes de bouton. Vous devez associer un comportement à l’objet de formulaire pour pouvoir utiliser une image afin d’effectuer une tâche autre que l’envoi de données.

  1. Dans le document, placez le point d’insertion dans la bordure du formulaire.
  2. Sélectionnez Insertion > Formulaire > Champ d’image.

    La boîte de dialogue Sélectionnez la source de l’image s’affiche.

  3. Sélectionnez l’image souhaitée pour le bouton dans la boîte de dialogue Sélectionnez la source de l’image, puis cliquez sur OK.
  4. Définissez les options suivantes dans l’inspecteur Propriétés :

    Zone_image

    Attribue un nom au bouton. Les deux noms réservés, Envoyer et Réinitialiser, indiquent respectivement au formulaire d’envoyer les données du formulaire à l’application ou au script de traitement et de réinitialiser les valeurs initiales des champs du formulaire.

    Src

    Spécifie l’image à utiliser pour le bouton.

    Alt

    Permet de saisir un texte descriptif au cas où l’image ne parvient pas à se charger dans le navigateur.

    Alignement

    Définit l’attribut d’alignement de l’objet.

    Modifier image

    Lance votre éditeur d’image par défaut et ouvre le fichier d’image afin que vous puissiez le modifier.

    Classe

    Permet d’appliquer des règles CSS à l’objet.

  5. Pour associer un comportement JavaScript au bouton, sélectionnez l’image, puis sélectionnez le comportement dans le panneau Comportements (Fenêtre > Comportements).

Options de l’objet Champ masqué

Champ masqué

Indique le nom du champ.

Valeur

Attribue une valeur au champ. Cette valeur est transmise au serveur lors de l’envoi du formulaire.

Insertion d’un groupe de boutons radio

  1. Placez le point d’insertion dans la bordure du formulaire.

  2. Sélectionnez Insérer > Formulaire > Groupe de boutons radio.

  3. Complétez les options de la boîte de dialogue, puis cliquez sur OK.

    a. Dans la zone Nom, tapez le nom du groupe de boutons radio.

     Si vous définissez les boutons radio pour qu’ils renvoient des paramètres au serveur, ces derniers seront associés au nom du groupe. Par exemple, si vous nommez le groupe myGroup et fixez la méthode du formulaire sur GET (en d’autres termes, vous voulez que le formulaire transmette au serveur des paramètres d’URL plutôt que des paramètres de formulaire lorsque l’utilisateur clique sur le bouton d’envoi), l’expression myGroup="CheckedValue" est transmise au serveur via l’URL.

    b. Cliquez sur le bouton Plus (+) pour ajouter un bouton radio au groupe. Saisissez l’étiquette et la valeur du nouveau bouton.

    c. Cliquez sur les flèches haut ou bas pour réorganiser les boutons.

    d. Pour définir un bouton radio précis de façon à ce qu’il soit sélectionné à l’ouverture de la page dans un navigateur, dans la zone de texte Sélectionner une valeur égale à, saisissez une valeur égale à celle du bouton radio.

    Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l’icône en forme d’éclair (en regard de la zone de texte), puis sélectionnez un jeu d’enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indiquée doit correspondre à celle de l’un des boutons radio du groupe. Pour afficher les valeurs des boutons radio, sélectionnez chaque bouton, puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés).

    e. Sélectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les boutons. Utilisez soit des sauts de ligne, soit un tableau pour mettre les boutons en forme. Si vous activez l’option du tableau, Dreamweaver crée un tableau à une seule colonne en plaçant les boutons radio sur la gauche et les étiquettes sur la droite.

    Vous pouvez également définir les propriétés à l’aide de l’inspecteur Propriétés ou directement en mode Code.

Insertion d’un groupe de cases à cocher

  1. Placez le point d’insertion dans la bordure du formulaire.

  2. Choisissez Insérer > Formulaire > Groupe de cases à cocher.

  3. Complétez les options de la boîte de dialogue, puis cliquez sur OK.

    a. Dans la zone Nom, tapez le nom du groupe de cases à cocher.

    Si vous définissez les cases à cocher pour qu’elles renvoient des paramètres au serveur, ces derniers seront associés au nom du groupe. Par exemple, si vous nommez le groupe myGroup et fixez la méthode du formulaire sur GET (en d’autres termes, vous voulez que le formulaire transmette au serveur des paramètres d’URL plutôt que des paramètres de formulaire lorsque l’utilisateur clique sur le bouton d’envoi), l’expression myGroup="CheckedValue" est transmise au serveur via l’URL.

    b. Cliquez sur le bouton Plus (+) pour ajouter une case à cocher au groupe. Saisissez l’étiquette et la valeur de la nouvelle case à cocher.

    c. Cliquez sur les flèches haut ou bas pour réorganiser les cases à cocher.

    d. Pour définir une case à cocher précise de façon à ce qu’elle soit sélectionnée à l’ouverture de la page dans un navigateur, dans la zone de texte Sélectionner une valeur égale à, saisissez une valeur égale à celle de la case à cocher.

    Saisissez une valeur statique ou dynamique. Pour saisir une valeur dynamique, cliquez sur l’icône en forme d’éclair (en regard de la zone de texte), puis sélectionnez un jeu d’enregistrements contenant des valeurs possibles. Dans les deux cas de figure, la valeur indiquée doit correspondre à celle de l’une des cases à cocher du groupe. Pour afficher les valeurs des cases à cocher, sélectionnez chacune d’elles puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés).

    e. Sélectionnez la mise en forme que Dreamweaver doit utiliser pour mettre en forme les cases à cocher.

    Utilisez soit des sauts de ligne, soit un tableau pour mettre les cases à cocher en forme. Si vous activez l’option du tableau, Dreamweaver crée un tableau à une seule colonne en plaçant les cases à cocher sur la gauche et les étiquettes sur la droite.

    Vous pouvez également définir les propriétés à l’aide de l’inspecteur Propriétés ou directement en mode Code.

À propos des objets de formulaire dynamiques

Un objet de formulaire dynamique est un objet de formulaire dont l’état initial est déterminé par le serveur lorsque la page est demandée au serveur, et non par le concepteur du formulaire lors de sa création. Par exemple, lorsqu’un utilisateur recherche une page PHP contenant un formulaire dans lequel se trouve un menu, un script PHP inséré dans la page renseigne automatiquement le menu par des valeurs stockées dans une base de données. Le serveur envoie ensuite la page terminée au navigateur de l’utilisateur.

Le fait de rendre les objets de formulaire dynamiques permet de simplifier la maintenance d’un site. Par exemple, de nombreux sites utilisent des menus pour présenter aux utilisateurs un ensemble d’options. Si un menu est dynamique, vous pouvez ajouter, supprimer ou modifier des éléments de menu en un seul endroit (la table de base de données dans laquelle sont stockés ces éléments) afin de mettre à jour toutes les instances de ce même menu sur le site.

Insertion ou modification d’un menu de formulaire HTML dynamique

Vous avez la possibilité de renseigner un menu de formulaire ou une liste déroulante HTML de façon dynamique à l’aide des entrées d’une base de données. Pour la majorité des pages, vous pouvez utiliser un objet de menu HTML.

Avant de commencer, vous devez insérer un formulaire HTML dans une page ColdFusion, PHP ou ASP, puis définir un jeu d’enregistrements ou une autre source de contenu dynamique pour le menu.

  1. Insertion d’un objet de formulaire Liste/Menu HTML dans votre page

        a. Cliquez à l’intérieur du formulaire HTML sur la page (Insérer > Formulaire > Formulaire).

        b. Choisissez Insérer > Formulaire > Liste/Menu pour insérer l’objet de formulaire.

  2. Effectuez l’une des opérations suivantes :

    • Sélectionnez le nouvel objet de formulaire Liste/Menu HTML ou un objet existant, puis cliquez sur le bouton Dynamique de l’inspecteur Propriétés.

    • Choisissez Insertion > Objets de données > Données dynamiques > Liste de sélection dynamique.

  3. Complétez les options de la boîte de dialogue Liste/Menu dynamique, puis cliquez sur OK.

      a. Dans le menu déroulant Options du jeu d’enregistrements, choisissez le jeu d’enregistrements à utiliser comme source de contenu. Ce menu vous permet également de modifier ultérieurement les éléments de menu ou de liste statiques et dynamiques.

      b. La zone Options statiques vous permet de saisir un élément par défaut dans la liste ou le menu. Cette option vous permet aussi de modifier les entrées statiques d’un objet de formulaire de liste ou de menu après que vous avez ajouté un contenu dynamique.

      c. (Facultatif) Utilisez les boutons Plus (+) et Moins (-) pour ajouter et supprimer des éléments de la liste. Les éléments sont dans le même ordre que dans la boîte de dialogue Valeur de la liste. Le premier élément sur la liste est l’élément sélectionné lorsque la page est chargée dans un navigateur. Utilisez les boutons fléchés Haut et Bas pour réorganiser les éléments de la liste.

      d. Dans le menu déroulant Valeurs, sélectionnez le champ contenant les valeurs des éléments de menu.

      e. Dans le menu déroulant Étiquettes, sélectionnez le champ contenant les étiquettes des éléments de menu.

      f. (Facultatif) Pour spécifier qu’un élément de menu particulier soit sélectionné à l’ouverture de la page dans un navigateur ou lorsqu’un enregistrement est affiché dans le formulaire, indiquez une valeur égale à celle de l’élément de menu dans la zone de texte Sélectionner une valeur égale à.

        Vous pouvez indiquer une valeur statique ou dynamique, en cliquant sur l’icône en forme d’éclair (à côté de la zone de texte), puis en sélectionnant une valeur dynamique dans la liste des sources de données. Dans les deux cas, la valeur indiquée doit correspondre à l’une des valeurs des éléments de menu.

     

Ajout de la fonctionnalité dynamique à des menus de formulaire HTML existants

  1. En mode Création, sélectionnez l’objet de formulaire liste/menu.
  2. Dans l’inspecteur Propriétés, cliquez sur le bouton Dynamique.
  3. Complétez les options de la boîte de dialogue, puis cliquez sur OK.

Affichage de contenu dynamique dans des champs de texte HTML

Vous pouvez afficher un contenu dynamique dans des champs de texte HTML lorsque le formulaire est affiché dans un navigateur.

Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, puis définir un jeu d’enregistrements ou une autre source de contenu dynamique pour la zone de texte.

  1. Sélectionnez le champ de texte dans le formulaire HTML de votre page.
  2. Dans l’inspecteur Propriétés, cliquez sur l’icône en forme d’éclair située en regard de la zone de texte Val. init. pour afficher la boîte de dialogue Données dynamiques.
  3. Sélectionnez la colonne du jeu d’enregistrements qui doit fournir une valeur au champ de texte, puis cliquez sur OK.

Définition des options de la boîte de dialogue Champ de texte dynamique

  1. Dans le menu déroulant Champ de texte, sélectionnez le champ de texte que vous souhaitez rendre dynamique.
  2. Cliquez sur l’icône en forme d’éclair située en regard de la zone de texte Définir la valeur à, puis sélectionnez une source de données dans la liste des sources disponibles.

    Cette source doit contenir des informations textuelles. Si aucune source de données n’apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source.

Activation dynamique d’une case à cocher HTML

Vous pouvez laisser le serveur déterminer l’éventuelle activation d’une case à cocher lors de l’affichage du formulaire dans un navigateur.

Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, puis définir un jeu d’enregistrements ou une autre source de contenu dynamique pour ces cases à cocher. L’idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false.

  1. Sélectionnez un objet de formulaire correspondant à une case à cocher dans votre page.
  2. Dans l’inspecteur Propriétés, cliquez sur le bouton Dynamique.
  3. Renseignez la boîte de dialogue Case à cocher dynamique, puis cliquez sur OK.

    • Sélectionnez l’icône en forme d’éclair, à côté de la zone de texte Cocher si, puis sélectionnez le champ dans la liste des sources de données.

      La source de données doit contenir des données booléennes telles que Yes et No, ou true et false. Si aucune source de données n’apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source.

    • Dans la zone de texte Egal à, tapez la valeur que le champ doit contenir pour que la case à cocher soit activée.

      Par exemple, pour que la case soit activée lorsqu’un champ donné d’un enregistrement a la valeur Yes, tapez Yes dans la zone de texte Egal à.

    Remarque :

    Cette valeur est également renvoyée au serveur si l’utilisateur clique sur le bouton Envoyer du formulaire.

Activation dynamique d’un bouton radio HTML

Activez dynamiquement un bouton radio HTML lorsqu’un enregistrements s’affiche dans le formulaire HTML dans un navigateur.

Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, puis insérer au moins un groupe de boutons radio HTML (Insertion > Formulaire > Groupe de boutons radio). Vous devez également définir un jeu d’enregistrements ou une autre source de contenu dynamique pour les boutons radio. L’idéal serait que la source de contenu contienne des données booléennes, telles que Yes/No ou true/false.

  1. En mode Création, sélectionnez un bouton radio dans le groupe.
  2. Dans l’inspecteur Propriétés, cliquez sur le bouton Dynamique.
  3. Complétez les options de la boîte de dialogue Groupe de boutons radio dynamiques, puis cliquez sur OK.

Définition des options de la boîte de dialogue Groupe de boutons radio dynamiques

  1. Dans le menu déroulant Groupe de boutons radio dynamiques, sélectionnez un formulaire et un groupe de boutons radio de la page.

    La zone Valeurs de boutons radio affiche la valeur de chaque bouton radio du groupe.

  2. Dans la liste des valeurs affichées, sélectionnez la valeur à présélectionner dynamiquement. Cette valeur s’affiche dans la zone de texte Valeur.
  3. Cliquez sur l’icône en forme d’éclair située en regard de la zone de texte Sélectionner une valeur égale à, puis sélectionnez un jeu d’enregistrements contenant des valeurs possibles pour les boutons radio du groupe.

    Le jeu d’enregistrements que vous sélectionnez contient des valeurs correspondant à celles des boutons radio. Pour afficher les valeurs des boutons radio, sélectionnez chaque bouton, puis ouvrez son inspecteur Propriétés (Fenêtre > Propriétés).

  4. Cliquez sur OK.

Définition des options de la boîte de dialogue Groupe de boutons radio dynamiques (ColdFusion)

  1. Dans le menu déroulant Groupe de boutons radio, sélectionnez un groupe de boutons radio et un formulaire.
  2. Cliquez sur l’icône en forme d’éclair en regard de la zone de texte Sélectionner une valeur égale à.

  3. Renseignez la boîte de dialogue Données dynamiques, puis cliquez sur OK.

      a. Sélectionnez une source de données dans la liste.

      b. (Facultatif) Sélectionnez un format de données pour le texte.

      c. (Facultatif) Modifiez le code que Dreamweaver insère dans votre page pour afficher le texte dynamique.

  4. Cliquez sur OK pour fermer la boîte de dialogue Groupe de boutons radio dynamiques et insérer l’espace réservé du contenu dynamique.

Validation de données de formulaire HTML

Dreamweaver permet d’ajouter un code JavaScript permettant de vérifier le contenu des champs de texte spécifiés afin de garantir que l’utilisateur a bien saisi le type de données approprié.

Vous pouvez utiliser des widgets de formulaire Spry pour créer vos formulaires et valider le contenu d’éléments de formulaires spécifiques. Pour plus d’informations, consultez les rubriques consacrées à Spry ci-dessous.

Vous pouvez également créer sous Dreamweaver des formulaires ColdFusion qui valident le contenu de certains champs. Pour plus d’informations, consultez le chapitre consacré à ColdFusion ci-dessous.

  1. Créez un formulaire HTML qui comprend au moins un champ de texte et un bouton Envoyer.

    Assurez-vous que chaque champ de texte que vous souhaitez valider porte un nom unique.

  2. Sélectionnez le bouton Envoyer.
  3. Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez le comportement Valider le formulaire dans la liste.
  4. Définissez les règles de validation de chaque champ de texte, puis cliquez sur OK.

    Par exemple, vous pouvez spécifier qu’un champ de texte utilisé pour l’âge d’une personne n’accepte que les chiffres.

    Remarque :

    Le comportement Valider le formulaire est uniquement disponible lorsqu’un champ de texte a été inséré dans le document.

Liaison de comportements JavaScript à des objets de formulaire HTML

Vous pouvez associer des comportements JavaScript stockés sous Dreamweaver à des objets de formulaire HTML tels que des boutons.

  1. Sélectionnez l’objet de formulaire HTML.
  2. Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez un comportement dans la liste.

Liaison de scripts personnalisés à des boutons de formulaire HTML

Certains formulaires utilisent JavaScript ou VBScript pour effectuer des actions (traitement du formulaire, par exemple) côté client, plutôt que d’envoyer les données de formulaire au serveur pour leur traitement. Avec Dreamweaver, vous pouvez configurer un bouton de formulaire pour exécuter un script particulier côté client lorsqu’un utilisateur clique sur le bouton.

  1. Sélectionnez un bouton Envoyer dans un formulaire.
  2. Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et choisissez Appel JavaScript dans la liste.
  3. Dans la zone Appel JavaScript, tapez le nom de la fonction JavaScript à exécuter lorsque l’utilisateur clique sur le bouton, puis cliquez sur OK.

    Vous pouvez, par exemple, indiquer le nom d’une fonction qui n’existe pas encore, comme processMyForm().

  4. Si la fonction JavaScript ne figure pas encore dans la section head du document, ajoutez-la maintenant.

    Par exemple, vous pouvez définir la fonction JavaScript suivante dans la section head du document afin d’afficher un message lorsque l’utilisateur clique sur le bouton Envoyer.

    function processMyForm(){ 
    alert('Thanks for your order!'); 
}

Création de formulaires HTML accessibles

Lorsque vous insérez un objet de formulaire HTML, vous pouvez rendre l’objet de formulaire accessible et modifier les attributs d’accessibilité ultérieurement.

Ajout d’un objet de formulaire accessible

  1. La première fois que vous ajoutez des objets de formulaire accessibles, activez la boîte de dialogue Accessibilité pour les objets de formulaire (consultez la section Optimisation de l’espace de travail pour tirer parti des fonctions de développement visuel ).

    Vous devez effectuer cette opération une seule fois.

  2. Dans le document, placez le point d’insertion à l’endroit où l’objet de formulaire doit apparaître.
  3. Choisissez Insertion > Formulaire, puis l’objet de formulaire à insérer.

    La boîte de dialogue Attributs d’accessibilité aux balises d’entrée s’affiche.

  4. Complétez les options de la boîte de dialogue, puis cliquez sur OK. Voici une liste partielle des options :
    Remarque :

    Le lecteur d’écran lit le nom que vous avez entré en tant qu’attribut Label de l’objet.

    ID

    Attribue un ID au champ de formulaire. Cette valeur peut être utilisée pour faire référence au champ à partir de JavaScript. Elle est également utilisée comme valeur de l’attribut for si vous activez l’option Joindre une balise d’étiquette à l’aide de l’attribut For du groupe Style.

    Envelopper avec une balise d’étiquette

    Entoure l’élément de formulaire d’une balise d’étiquette, comme suit :

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    Joindre une balise d’étiquette à l’aide de l’attribut ’for’

    Utilise l’attribut for pour entourer l’élément de formulaire d’une balise d’étiquette, comme suit :

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

    Si vous choisissez cette option, le navigateur place un rectangle de sélection sur le texte associé à une case à cocher ou à un bouton radio et permet à l’utilisateur d’activer la case à cocher ou le bouton radio en cliquant n’importe où dans le texte associé.

    Remarque : Il s’agit de l’option d’accessibilité la plus courante. Toutefois, cette fonction peut varier selon le navigateur utilisé.

    Aucune balise d’étiquette

    N’utilise pas de balise d’étiquette, comme suit:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    Clé d’accès

    Utilise un équivalent clavier (une lettre) et la touche Alt (Windows) ou Ctrl (Macintosh) pour sélectionner l’objet de formulaire dans le navigateur. Par exemple, si vous entrez B comme Clé d’accès, les utilisateurs de Macintosh peuvent appuyer sur Ctrl+B pour sélectionner l’objet de formulaire.

    Ordre des tabulations

    Indique l’ordre d’apparition des objets de formulaire. Si vous définissez un ordre d’apparition pour un objet, assurez-vous de le faire également pour tous les autres objets.

    La définition d’un ordre d’apparition peut se révéler utile lorsque la page contient d’autres liens et d’autres objets de formulaire et que vous voulez que l’utilisateur passe de l’un à l’autre dans un ordre particulier.

  5. Cliquez sur Oui pour insérer une balise de formulaire.

    L’objet de formulaire apparaît dans le document.

    Remarque :

    Si vous cliquez sur Annuler, l’objet de formulaire s’affiche dans le document, mais Dreamweaver ne lui associe ni les balises ni les attributs d’accessibilité.

Modification des valeurs d’accessibilité pour un objet de formulaire

  1. Dans la fenêtre de document, sélectionnez l’objet.
  2. Effectuez l’une des opérations suivantes :

    • Modifiez les attributs en mode Code.

    • Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier la balise.

Autres ressources similaires

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Liens rapides

Voir toutes vos formules Gérer vos formules
Afficher les liens rapides
Masquer les liens rapides

Mentions légales    |    Politique de confidentialité en ligne