PDF (adobe.com)

Création d'un formulaire HTML



  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) :
    1. Dans la fenêtre de document, cliquez sur la bordure du formulaire afin de le sélectionner.
    2. 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.

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

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

      Le paramètre par défaut application/x-www-form-urlencode est généralement utilisé en conjonction 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.

    6. (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 :
    1. Placez le point d'insertion à l'endroit où l'objet de formulaire doit s'afficher dans le formulaire.
    2. Choisissez l'objet dans le menu Insertion > Formulaire, ou dans la catégorie Formulaires du panneau Insertion.
    3. Définissez les propriétés des objets.
    4. 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.
    5. 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.

Wrap
(Disponible lorsque l'option Multiligne est sélectionnée) Indique la manière dont les données saisies par l'utilisateur sont affichées lorsqu'il saisit plus d'informations que celles que la zone de texte définie peut afficher. Les options de retour à la ligne sont les suivantes :
Désactivé(e) ou Par défaut
Empêche le retour à la ligne automatique du texte. Lorsque l'entrée dépasse la limite droite de la zone de texte, le texte défile vers la gauche. L'utilisateur doit appuyer sur la touche Retour pour déplacer le point d'insertion sur la ligne suivante de la zone de texte.

Virtuel
Définit un retour à la ligne automatique dans la zone de texte. Lorsque l'entrée dépasse la limite droite de la zone de texte, le texte est renvoyé automatiquement à la ligne. Lors de l'envoi des données pour traitement, le retour à la ligne n'est pas appliqué. Les données sont envoyées en tant que chaîne unique.

Physique
Définit un retour à la ligne automatique des données dans la zone de texte ainsi que lors de leur envoi pour traitement.

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.

Options du menu

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 télé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 et 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.

    Sec
    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 Insertion > Formulaire > Groupe de boutons radio.
  3. Complétez les options de la boîte de dialogue, puis cliquez sur OK.
    1. Dans la zone de texte 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 attribuez le nom myGroup au groupe de boutons radio et définissez la méthode du formulaire sur GET (en d'autres termes, vous souhaitez 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" sera transmise au serveur via l'URL.

    2. Cliquez sur le bouton Plus (+) pour ajouter un bouton radio au groupe. Saisissez l'étiquette et la valeur du nouveau bouton.
    3. Cliquez sur les flèches haut ou bas pour réorganiser les boutons.
    4. 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 représentant un é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).

    5. 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 Insertion > Formulaire > Groupe de cases à cocher.
  3. Complétez les options de la boîte de dialogue, puis cliquez sur OK.
    1. 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 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.

    2. Cliquez sur le bouton Plus (+) pour ajouter une case à cocher au groupe. Saisissez l'étiquette et la valeur de la nouvelle case à cocher.
    3. Cliquez sur les flèches haut ou bas pour réorganiser les cases à cocher.
    4. Pour définir une case à cocher préciser 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 représentant un é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).

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