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é.

Objets de formulaire

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.

Cases à cocher

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.

Boutons radio

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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne