Conseils pour les formulaires

Conseils de forme Dreamweaver®

 

Conseils sur la personnalisation des boîtes de saisie, de la liste des menus, des boutons de soumission. Apprenez également à valider les formulaires à l'aide des comportements Dreamweaver.

Astuce: La meilleure méthode pour la personnalisation des objets de formulaire est d'utiliser les feuilles de styles CSS!

Note: La personnalisation de la forme des objets en utilisant des styles CSS ne fonctionne pas sous Netscape.

Personnalisez la couleur de fond, les polices et les couleurs pour les zones de texte

  1. La première étape est de créer un style à la couleur de fond et de police que vous souhaitez pour la zone de texte. Ouvrez le mode fenêtre en cliquant sur Fenêtre> Styles CSS. Créer un nouveau style en cliquant sur le '+' icône en bas. Donnez un nom au style comme «textboxstyle 'et cliquez sur OK. Dans la catégorie 'Type', sélectionnez le type de police, la taille, la couleur... Dans la partie «Contexte» catégorie choisir la couleur que vous souhaitez pour la zone de texte. Cliquez sur OK lorsque vous avez terminé.
  2. La prochaine étape est d'insérer une zone de texte en cliquant sur Insertion> Formulaire > Zone de texte.
  3. La dernière étape consiste à appliquer le style de la zone de texte. Sélectionnez la zone de texte dans la fenêtre de Styles CSS, sélectionnez le style 'textboxstyle ». Une fois le style est appliqué à la zone de texte, cliquez sur Fichier> Aperçu dans le navigateur pour afficher la boîte de texte dans le navigateur (Internet Explorer ou Firefox...).
    S'il vous plaît noter: Vous ne serez pas en mesure de visualiser le style dans la zone de texte que si vous avez Dreamweaver CS4 et vous avez utilisé Affichage en direct.

Personnalisez la couleur de fond et la police pour les listes déroulantes

C'est la même chose que ci-dessus. Créer un style comme nous l'avons fait pour la zone de texte et l'appliquer à la liste déroulante.

Valider les formes

  1. La première étape consiste à insérer un formulaire en cliquant sur Insertion> Formulaire
  2. L'étape suivante consiste à insérer dans les 3 zones de texte: le nom, l'email et le téléphone. Choisissez Insérer> Formulaire> Champ de texte. Remplissez la première zone de texte "Nom", la deuxième "Courrier électronique" et la troisième "Téléphone" dans les Propriétés de l'inspecteur.
  3. Insérer un bouton de soumission en cliquant sur Insertion> Formulaire > Bouton
  4. Ouvrez la fenêtre des comportements, en choisissant Fenêtre> Comportements. Sélectionnez l'étiquette et le formulaire, cliquez sur l'icône e '+' dans la fenêtre des comportements. Choisissez Valider le formulaire
  5. Dans la fenêtre qui apparaît, choisir le champ de texte que vous souhaitez valider et sélectionnez la validation.
    • Sélectionnez Nom requis pour
    • Sélectionnez Email Adresse de courriel
    • Sélectionnez Numéro de téléphone
  6. Cliquez sur OK.
  7. Vérifiez la validation en cliquant sur Fichier > Aperçu dans le navigateur

Créez un bouton "soumettre"

  1.  
    La première étape est de créer un style à la couleur de fond et de police que vous souhaitez pour le bouton "soumettre". Ouvrez le mode fenêtre en cliquant sur Fenêtre> Styles CSS. Créer un nouveau style en cliquant sur le '+' en bas. Donnez un nom au style comme «boutonstyle 'et cliquez sur OK. Dans la catégorie 'Type' sélectionnez le type de police, la taille, la couleur et le poids. Dans la partie «Contexte» catégorie choisir la couleur que vous souhaitez pour la zone de texte. Cliquez sur OK lorsque vous avez terminé.
  2. La prochaine étape est d'insérer une zone de texte en cliquant sur Insertion> Formulaire > Zone de texte.
  3. La dernière étape consiste à appliquer le style de la zone de texte.Sélectionnez la zone de texte de la fenêtre Styles CSS puis sélectionner le style 'boutonstyle ». Une fois le style est appliqué à la zone de texte, cliquez sur Fichier> Aperçu dans le navigateur pour afficher la boîte de texte dans votre navigateur.
    Notez que vous ne serez pas en mesure de visualiser le style dans la zone de texte que dans Dreamweaver CS4 qui comprend un mode d'affichage en direct.

Affichage en direct