Création de formulaires web

Dernière mise à jour le 27 avr. 2021

Annotation

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ù un Script côté serveur ou une application les traite. Le Serveur répond en renvoyant les informations traitées à l'Utilisateur (ou client), ou en effectuant une autre action basée sur le contenu du formulaire.

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

Annotation

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

Objets de formulaire

Dans Dreamweaver, les types de saisie de formulaire sont appelés objets de formulaire.Les objets de formulaire sont les mécanismes qui permettent aux utilisateurs de saisir des données. Vous pouvez 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é.

Annotation

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

Stocker les informations saisies par un utilisateur, telles qu'un nom, une adresse e‑mail ou une préférence d'affichage, puis utiliser ces données lors de la prochaine visite de l'utilisateur sur le site.

Boutons

Effectuer des actions lorsqu'on clique dessus. Vous pouvez ajouter un nom ou libellé personnalisé pour un bouton, ou utiliser l'un des libellés prédéfinis « Envoyer » ou « Réinitialiser ». Utilisez un bouton pour envoyer les données du formulaire au serveur ou pour réinitialiser le formulaire.Vous pouvez aussi attribuer d'autres tâches de traitement que vous définissez dans un script.Par exemple, le bouton pourrait calculer le coût total des éléments sélectionnés en fonction des valeurs 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 de case à cocher sélectionnés : Surf, VTT et Rafting.

Boutons radio

Représentent des choix exclusifs. Sélectionner un bouton dans un groupe de cases d'option désélectionne tous les autres du groupe (un groupe se compose de deux boutons ou plus qui partagent le même nom). Dans l'exemple ci-dessous, Rafting est l'option actuellement sélectionnée.Si l'utilisateur clique sur Surfing, le bouton Rafting est automatiquement décoché.

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.

Annotation

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

Listes de navigation ou menus contextuels qui vous permettent d'insérer un menu dans lequel chaque option pointe vers un document ou un fichier.

Champs de fichier

Permettent aux utilisateurs de parcourir un fichier sur leur ordinateur et de charger le fichier comme données de formulaire.

Champs d’image

Permettent d’insérer une image dans un formulaire. Utilisez les champs image pour créer des boutons graphiques tels que les boutons Envoyer ou Réinitialiser. Utiliser une image pour effectuer des tâches autres que l'envoi de données nécessite d'attacher un comportement à l'objet de formulaire.

Création d’un formulaire HTML

(Utilisateurs Creative Cloud uniquement) : Dans le cadre de la prise en charge HTML5, de nouveaux attributs ont été introduits dans le panneau Propriétés pour les éléments de formulaire. De plus, quatre nouveaux éléments de formulaire (E‑mail, recherche, téléphone, URL) ont été introduits dans la section Formulaires du panneau Insérer. Pour plus d’informations, consultez Prise en charge améliorée de HTML5 pour les éléments de formulaire.

Ouvrez une page et placez le point d'insertion à l'endroit où vous voulez que le formulaire apparaisse.

Sélectionnez Insertion > Formulaire, ou sélectionnez la catégorie Forms dans le panneau Insertion et cliquez sur l'icône Formulaire.

En mode Création, les formulaires sont indiqués par une bordure rouge en pointillé. Si vous ne voyez pas ce contour, sélectionnez Affichage > Aides visuelles > Éléments invisibles.

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.

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.

Annotation

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.

Annotation

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

Améliorez la mise en forme du formulaire.

Utilisez les sauts de ligne, les sauts de paragraphe, le texte préformaté ou les tableaux pour mettre en forme les formulaires.Vous ne pouvez pas insérer un formulaire dans un autre formulaire (c'est-à-dire que vous ne pouvez pas imbriquer les balises), mais vous pouvez inclure plusieurs formulaires dans une page.

Lors de la conception de formulaires, n'oubliez pas de libeller les champs de formulaire avec un texte descriptif pour indiquer aux utilisateurs à quoi ils répondent, par exemple « Saisissez votre nom » pour demander des informations sur le nom.

Utilisez les tableaux pour structurer les objets de formulaire et les libellés de champs.Lors de l'utilisation de tableaux dans les formulaires, assurez-vous 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.

Pour un tutoriel sur le style des formulaires avec CSS, consultez www.adobe.com/go/vid0161.

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

Sélectionnez l'objet de champ de texte, puis définissez l'une des options suivantes dans l'inspecteur de propriétés :

Largeur car.

Spécifie le nombre maximal de caractères pouvant être affichés dans le champ.Ce nombre peut être inférieur à Caractères max., qui spécifie le nombre maximal de caractères pouvant être saisis dans le champ. Par exemple, si la largeur de caractère est définie sur 20 (la valeur par défaut) et qu'un utilisateur saisit 100 caractères, seuls 20 de ces caractères seront visibles dans le champ de texte.Bien que vous ne puissiez pas visualiser les caractères dans le champ, ils sont reconnus par l'objet de champ et sont envoyés au serveur pour traitement.

Nbre max. de caract.

Spécifie le nombre maximal de caractères que l'Utilisateur peut saisir dans le champ pour les champs de texte sur une seule ligne.Utilisez Caractères max. pour limiter les codes postaux à 5 chiffres, limiter les mot de passe à 10 caractères, et ainsi de suite.Si vous laissez la zone Caractères max. vide, les utilisateurs peuvent saisir une quantité illimitée de texte.Si le texte dépasse la largeur de caractères du champ, le texte défilera.Si un utilisateur dépasse le nombre maximal de caractères, le formulaire produit une alerte sonore.

Nbre lignes

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

Désactivé

Désactive la zone de texte.

Lecture seule

Transforme la zone de texte en zone en lecture seule.

Type

Désigne le champ comme un champ sur une seule ligne, multiligne ou de mot de passe.

Ligne simple

Génère une balise input avec son attribut type défini sur text.Le paramètre Largeur de caractère correspond à l'attribut size, et le paramètre Caractères max. correspond à l'attribut maxlength.

Lignes multiples

Permet de positionner une balise textarea. Le paramètre Largeur de caractère correspond à l'attribut cols, et le paramètre Nombre de lignes correspond à l'attribut rows.

Mot de passe

Génère une balise input avec son attribut type défini sur password.Les paramètres Largeur de caractère et Caractères max. correspondent aux mêmes attributs que dans les champs de texte sur une seule ligne.Lorsqu'un utilisateur saisit un mot de passe dans un champ de texte, la saisie s'affiche sous forme de puces ou d'astérisques pour la protéger de l'observation par d'autres personnes.

Init val

Attribue la valeur affichée dans le champ lors du premier chargement du formulaire.Par exemple, vous pouvez indiquer que l'utilisateur saisit des informations dans le champ en incluant une remarque ou une valeur d'exemple.

Classe

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

Options de l’objet Bouton

Nom de bouton

Attribue un nom au bouton. Deux noms réservés, Submit et Reset, indiquent au formulaire de soumettre les données du formulaire à l'application ou au script de traitement, ou de réinitialiser tous les champs du formulaire à leurs valeurs d'origine, respectivement.

Valeur

Détermine le texte apparaissant sur le bouton.

Action

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

Envoyer le formulaire

Soumet les données du formulaire pour traitement lorsque l'utilisateur clique sur le bouton.Les données sont soumises à la page ou au script spécifié dans 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 à effectuer 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 cochée.Par exemple, dans une enquête, vous pouvez définir une valeur de 4 pour tout à fait d'accord et une valeur de 1 pour pas du tout d'accord.

Etat initial

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

Dynamique

Permet au serveur de déterminer dynamiquement l'état initial de la case à cocher.Par exemple, vous pouvez utiliser des cases à cocher pour présenter visuellement les informations oui/non stockées dans un enregistrement de base de données.Au moment de la conception, vous ne connaissez pas cette information.Au moment de l'exécution, le serveur lit l'enregistrement de la base de données et sélectionne la case à cocher si la valeur est Oui.

Classe

Applique les règles Cascading Style Sheets (CSS) à l'objet.

Options de l’objet Bouton radio unique

Valeur

Définit la valeur à envoyer au serveur lorsque la case d'option est sélectionnée.Par exemple, vous pouvez saisir ski dans la zone Valeur cochée pour indiquer qu'un utilisateur a choisi le ski.

Etat initial

Détermine si la case d'option est sélectionnée lorsque le formulaire se charge dans le navigateur.

Dynamique

Permet au serveur de déterminer dynamiquement l'état initial de la case d'option.Par exemple, vous pouvez utiliser des cases d'option pour présenter visuellement les informations stockées dans un enregistrement de base de données.Au moment de la conception, vous ne connaissez pas cette information.Au moment de l'exécution, le serveur lit l'enregistrement de la base de données et coche la case d'option si la valeur correspond à une valeur que vous avez spécifiée.

Classe

Applique des règles CSS à l’objet.

Options du menu

Liste/Menu

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

Type

Indique si le menu se déroule lorsque vous cliquez dessus (option Menu) ou affiche une liste déroulante d'éléments (option Liste).Sélectionnez l'option Menu si vous voulez qu'une seule option soit visible lorsque le formulaire s'affiche dans un navigateur.Pour afficher les autres choix, l'utilisateur doit cliquer sur la Touche Bas.

Sélectionnez l'option Liste pour répertorier quelques options ou toutes les options lorsque le formulaire s'affiche dans un navigateur, pour 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 :

Utilisez les boutons Plus (+) et Moins (–) pour ajouter et supprimer des éléments dans la liste.
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 qui est 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 à la place.
Utilisez les boutons de flèche haut et bas pour réorganiser les éléments dans 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 liste. Le premier élément de la liste est l'élément sélectionné lorsque la page est chargée dans un navigateur.

Dynamique

Permet au serveur de sélectionner dynamiquement un élément dans le menu lorsqu'il s'affiche pour la première fois.

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 l'élément ou les éléments de la liste.

Insertion de champs de téléchargement de fichier

Vous pouvez créer un champ de chargement de fichier qui permet aux utilisateurs de sélectionner un fichier sur leur ordinateur, tel qu'un document de traitement de texte ou un fichier graphique, et de charger le fichier sur le serveur. Un champ de fichier ressemble aux autres champs de texte, sauf qu'il contient également un bouton Parcourir. L'utilisateur saisit manuellement le chemin d'accès vers le fichier qu'il souhaite charger, ou utilise le bouton Parcourir pour localiser et sélectionner le fichier.

Avant de pouvoir utiliser les champs de chargement de fichiers, vous devez disposer d'un script côté serveur ou d'une page capable de gérer les soumissions de fichiers.Consultez la documentation de la technologie serveur que vous utilisez pour traiter les données de formulaire. Par exemple, si vous utilisez PHP, consultez « Gérer les chargements de fichiers » dans le manuel PHP en ligne à l'adresse http://us2.php.net/features.file-upload.php.

Les champs de fichiers exigent que vous utilisiez la méthode POST pour transmettre les fichiers du navigateur vers le serveur. Le fichier est envoyé à l'adresse que vous spécifiez dans la zone Action du formulaire.

Annotation

Contactez l'Administrateur de votre serveur pour confirmer que les chargements anonymes de fichiers sont autorisés avant d'utiliser le champ de fichier.

Insérez un formulaire dans la page (Insertion > Formulaire).

Sélectionnez le formulaire pour en afficher l’inspecteur Propriétés.

Dans le menu déroulant Méthode, sélectionnez POST.

Dans le menu déroulant Enctype, sélectionnez multipart/form-data.

Dans la zone Action, spécifiez le Script côté serveur ou la page capable de gérer le fichier chargé.

Placez le point d'insertion dans le contour du formulaire, et sélectionnez Insertion > Formulaire > Champ de fichier.

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.

Spécifie le nombre maximum de caractères pouvant être affichés dans le champ.

Nbre max. de caract.

Spécifie le nombre maximum de caractères que le champ peut contenir. Si l'utilisateur parcourt pour localiser le fichier, le nom de fichier et le chemin d'accès peuvent dépasser la valeur Max Chars spécifiée.Cependant, si l'utilisateur tente de saisir le nom de fichier et le chemin d'accès, le champ de fichier n'autorise que le nombre de caractères spécifié par la valeur Nb max de car.

Insertion d’un bouton d’image

Vous pouvez utiliser des images en qualité d’icônes de bouton. L'utilisation d'une image pour effectuer des tâches autres que l'envoi de données nécessite d'associer un comportement à l'objet de formulaire.

Dans le document, placez le point d'insertion à l'intérieur du contour de formulaire.

Sélectionnez Insertion > Formulaire > Champ image.

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

Sélectionnez l'image pour le bouton dans la boîte de dialogue Sélectionner Image Source et cliquez sur OK.

Définissez les options suivantes dans l’inspecteur Propriétés :

Zone_image

Attribue un nom au bouton. Deux noms réservés, Submit et Reset, indiquent au formulaire d'envoyer les données de formulaire à l'application ou au script de traitement, ou de rétablir tous les champs de formulaire à leurs valeurs d'origine, respectivement.

Src

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

Alt

Permet de saisir du texte descriptif au cas où l'image ne se chargerait pas dans le navigateur.

Alignement

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

Modifier image

Démarre votre éditeur d'images par défaut et ouvre le fichier image pour modification.

Classe

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

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 lorsque le formulaire est envoyé.

Insertion d’un groupe de boutons radio

Placez le point d'insertion à l'intérieur du contour du formulaire.

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

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 le format dans lequel vous souhaitez que Dreamweaver dispose 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

Placez le point d'insertion à l'intérieur du contour du formulaire.

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

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 de formulaire lors de la conception. Par exemple, lorsqu'un utilisateur demande une page PHP qui contient un formulaire avec un menu, un script PHP dans la page remplit automatiquement le menu avec des valeurs stockées dans une base de données. Le serveur envoie ensuite la page complété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 le menu est dynamique, vous pouvez ajouter, supprimer ou modifier des éléments de menu à un seul endroit — la table de base de données dans laquelle les éléments sont stockés — pour mettre à jour toutes les instances du même menu sur le site.

Insérer ou modifier un menu de formulaire HTML dynamique

Vous pouvez remplir dynamiquement un menu de formulaire HTML ou un menu de liste avec des entrées d'une base de données. Pour la plupart 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, et vous devez définir un jeu d'enregistrements ou une autre source de contenu dynamique pour le menu.

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.

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.

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

Dans la vue Designer, sélectionnez l'objet de formulaire liste/menu.

Dans l’inspecteur Propriétés, cliquez sur le bouton Dynamique.

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

Afficher du contenu dynamique dans les champs de texte HTML

Vous pouvez afficher du contenu dynamique dans les 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, et vous devez définir un recordset ou une autre source de contenu dynamique pour le champ de texte.

Sélectionnez le champ de texte dans le formulaire HTML de votre page.

Dans l'inspecteur de propriétés, cliquez sur l'icône d'éclair à côté de la zone Init Val pour afficher la boîte de dialogue Données dynamiques.

Sélectionnez la colonne de recordset qui fournira une valeur au champ de texte, puis cliquez sur OK.

Définir les options de la boîte de dialogue Champ de texte dynamique

Sélectionnez le champ de texte à rendre dynamique dans le menu contextuel Champ de texte.

Cliquez sur l'icône d'éclair à côté de la zone Définir la valeur sur, sélectionnez une source de données dans la liste des sources de données, puis cliquez sur OK.

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

Présélectionner dynamiquement une case à cocher HTML

Vous pouvez laisser le serveur décider de sélectionner ou non une case à cocher lorsque le formulaire est affiché dans un navigateur.

Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, et vous devez définir un recordset ou une autre source de contenu dynamique pour les cases à cocher.Idéalement, la source de contenu doit contenir des données booléennes, telles que Oui/Non ou vrai/faux.

Sélectionnez un objet de formulaire correspondant à une case à cocher dans votre page.

Dans l’inspecteur Propriétés, cliquez sur le bouton Dynamique.

Renseignez la boîte de dialogue Case à cocher dynamique, puis cliquez sur OK.

Sélectionnez l’icône représentant un éclairs située en regard 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 Égal à, 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 à.

Annotation

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

Présélectionner dynamiquement une case d'option HTML

Présélectionner dynamiquement une case d'option HTML lorsqu'un enregistrement est affiché dans le formulaire HTML d'un navigateur.

Avant de commencer, vous devez créer le formulaire dans une page ColdFusion, PHP ou ASP, et insérer au moins un groupe de cases d'option HTML (Insertion > Formulaire > Groupe de cases d'option).Vous devez également définir un recordset ou une autre source de contenu dynamique pour les boutons radio.Idéalement, la source de contenu doit contenir des données booléennes, telles que Oui/Non ou vrai/faux.

Dans la vue Designer, sélectionnez une case d'option dans le groupe de cases d'option.

Dans l’inspecteur Propriétés, cliquez sur le bouton Dynamique.

Remplissez la boîte de dialogue Groupe de cases d'option dynamique, puis cliquez sur OK.

Définir les options de la boîte de dialogue Groupe de cases d'option dynamique

Dans le menu contextuel Groupe de cases d'option, sélectionnez un formulaire et un groupe de cases d'option dans la page.

La zone Valeur de case d'option affiche les valeurs de toutes les cases d'option du groupe.

Sélectionnez une valeur à présélectionner dynamiquement dans la liste de valeurs.Cette valeur s’affiche dans la zone de texte Valeur.

Cliquez sur l'icône éclair en regard de la zone Valeur sélectionnée égale à et sélectionnez un jeu d'enregistrements qui contient les valeurs cochées possibles pour les cases d'option dans le groupe.

Le jeu d'enregistrements que vous sélectionnez contient des valeurs qui correspondent aux valeurs cochées des boutons radio.Pour afficher les valeurs cochées des cases d'option, sélectionnez chaque case d'option et ouvrez son inspecteur de propriétés (Fenêtre > Propriétés).

Cliquez sur OK.

Définir les options de la boîte de dialogue Groupe de cases d'option dynamique (ColdFusion)

Sélectionnez un groupe de cases d'option et un formulaire dans le menu contextuel Groupe de cases d'option.

Cliquez sur l'icône éclair en regard de la zone Valeur sélectionnée égale à.

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.

Cliquez sur OK pour fermer la boîte de dialogue Groupe de cases d'option dynamique, et insérer l'espace réservé de contenu dynamique dans le groupe de cases d'option.

Validation de données de formulaire HTML

Dreamweaver peut ajouter du code JavaScript qui vérifie le contenu de champs de texte spécifiés pour s'assurer que l'utilisateur a saisi le type de données correct.

Vous pouvez utiliser les widgets de formulaire Spry pour créer vos formulaires et valider le contenu d'éléments de formulaire spécifiés. Pour plus d'informations, consultez les rubriques Spry répertoriées ci-dessous.

Vous pouvez également créer des formulaires ColdFusion dans Dreamweaver qui valident le contenu de champs spécifiés.Pour plus d'informations, consultez le chapitre ColdFusion répertorié ci-dessous.

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 a un nom unique.

Sélectionnez le bouton Envoyer.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez le comportement Valider le formulaire dans la liste.

Définissez les règles de validation pour chaque champ de texte, puis cliquez sur OK.

Par exemple, vous pourriez spécifier qu'un champ de texte pour l'âge d'une personne accepte uniquement des nombres.

Annotation

Le comportement Valider le formulaire n'est disponible que si un champ de texte a été inséré dans le document.

Attacher des comportements JavaScript aux objets de formulaire HTML

Vous pouvez attacher des comportements JavaScript stockés dans Dreamweaver aux objets de formulaire HTML tels que les boutons.

Sélectionnez l’objet de formulaire HTML.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+), et sélectionnez un comportement dans la liste.

Attacher des scripts personnalisés aux boutons de formulaire HTML

Certains formulaires utilisent JavaScript ou VBScript pour effectuer le traitement de formulaire ou une autre action côté client plutôt que d'envoyer les données de formulaire au serveur pour traitement.Vous pouvez utiliser Dreamweaver pour configurer un bouton de formulaire afin d'exécuter un Script côté client spécifique lorsque l'utilisateur clique sur le bouton.

Sélectionnez un bouton Envoyer dans un formulaire.

Dans le panneau Comportements (Fenêtre > Comportements), cliquez sur le bouton Plus (+) et sélectionnez Appeler JavaScript dans la liste.

Dans la zone Appeler JavaScript, entrez le nom de la fonction JavaScript à exécuter lorsque l'utilisateur clique sur le bouton, puis cliquez sur OK.

Par exemple, vous pouvez entrer le nom d'une fonction qui n'existe pas encore, comme processMyForm().

Si votre fonction JavaScript n'existe pas encore dans la section head du document, ajoutez-la maintenant.

Par exemple, vous pourriez définir la fonction JavaScript suivante dans la section head du document pour afficher un message lorsque l'utilisateur clique sur le bouton Envoyer :

function processMyForm(){

alert('Merci pour votre commande !');

}

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

La première fois que vous ajoutez des objets de formulaire accessibles, activez la boîte de dialogue Accessibilité pour les objets de formulaire (voir Optimisation de l'espace de travail pour le développement visuel).

Vous devez effectuer cette opération une seule fois.

Dans le document, placez le point d'insertion à l'endroit où vous voulez que l'objet de formulaire apparaisse.

Sélectionnez Insertion > Formulaire, puis choisissez un objet de formulaire à insérer.

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

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

Annotation

Le lecteur d'écran lit le nom que vous saisissez comme attribut Libellé pour l'objet.

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

Notes : Il s'agit de l'option recommandée pour l'accessibilité ; toutefois, la fonctionnalité peut varier selon le navigateur.

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 la touche Contrôle (Macintosh) pour sélectionner l'objet de formulaire dans le navigateur. Par exemple, si vous saisissez B comme touche d'accès, les utilisateurs avec un navigateur Macintosh peuvent taper Contrôle+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 de tabulation pour un objet, vous devez définir l'ordre de tabulation pour tous les objets.

La définition d'un ordre de tabulation est utile lorsque vous avez d'autres liens et objets de formulaire sur la page et que l'utilisateur doit les parcourir avec la tabulation dans un ordre spécifique.

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

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

Annotation

Si vous appuyez sur Annuler, l'objet de formulaire apparaît dans le document, mais Dreamweaver n'associe pas de balises ou d'attributs d'accessibilité avec lui.

Modifier les valeurs d'accessibilité d'un objet de formulaire

Dans la fenêtre de document, sélectionnez l’objet.

Effectuez l’une des opérations suivantes :

Modifiez les attributs appropriés en mode Code.
Cliquez avec le bouton droit (Windows) ou cliquez en maintenant la touche Contrôle enfoncée (Macintosh), puis sélectionnez Modifier la balise.

Articles connexes

Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.

Ouvrir l’application

Création et activations des formulaires ColdFusion sous Dreamweaver

Suiv.

Prise en charge améliorée de HTML5 pour les éléments de formulaire

Comprendre

Apprenez avec des didacticiels vidéo étape par étape et des conseils pratiques directement dans l’application.

Communauté

Participez aux discussions, trouvez des réponses, apprenez auprès d'experts et partagez vos connaissances.

Accueil Adobe

Accédez à vos applications et services Creative Cloud préférés, à la gestion des fichiers et plus encore.