Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Insertion objets de formulaire

Ce tutoriel va illustrer l'insertion d'objets de formulaire dans Dreamweaver.

Dans la section précédente, nous avons créé un formulaire vide appelé Formulaire.

Maintenant, nous allons insérer des objets dans le formulaire. Les objets peuvent être du texte ou des images, des champs à remplir par le visiteur, liste d'éléments à choisir et ainsi de suite. Alors que certains de ces objets peuvent sembler assez compliqués, Dreamweaver fait habituellement la majeure partie du travail pour que les objets sur un formulaire fassent ce qu'ils doivent faire.

Nous allons développer un formulaire qui prend les commandes pour les fleurs. Nous allons donc commencer par une boîte où le client va entrer son nom.

Donc, allea à Insertion >> Formulaire puis à Champ de texte:

Insertion champ de texte

Pour une seule ligne de texte, insérez un champ de texte.

Maintenant, nous voyons la boîte de dialogue Attributs d'accessibilité des balises d'entrée:

Attributs accessibilité balises entrée

Entrez un ID, qui doit être unique. Choisissez un nom qui vous rappelle l'objet.

Entrez une Etiquette pour l'objet. Ceci indique au visiteur l'objet du champ qu'il va remplir.

Sélectionnez un style et la position de l'étiquette.

Entrez une clé d'accès. La façon dont cela fonctionne est que en appuyant sur la touche Alt + la touche d'accès fournit un raccourci clavier sur l'objet. Ainsi, par exemple, en entrant ici N signifie que le raccourci clavier est Alt + N.

Entrez un Ordre des tabulation. Les valeurs des indices de tabulation déterminent l'ordre dans lequel les objets sur le formulaire ne seront échangés si un visiteur appuie sur la touche Tab à plusieurs reprises pour travailler à travers Entrée. La pratique normale est pour cette "Ordre des tabulationst" est d'être du coin supérieur gauche au coin inférieur droit sur un formulaire. Dans ce cas, je saisis 1.

Voici la boîte de dialogue terminée.

Boîte attributs accessibilité

J'ai appuyé sur OK, et le champ de texte avec son étiquette apparaît sur le formulaire.

Champ texte inéré

Notez comment l'étiquette est positionnée sur la gauche de la zone de texte tel que spécifié.

Maintenant, nous allons ajouter un autre champ, cette fois-ci contient un message qui sera ajouté aux fleurs. Dans une situation où le texte peut porter sur plus d'une ligne, on utilise habituellement une Zone de texte.

Insertion zone de texte

Sélectionnez Zone de texte dans Insertion de Formulaire et remplissez la boîte de dologue Attributs d'accessibilité des balises d'entrée. Voici ma version terminée.

Insertion zone de texte

Appuyez sur OK et la zone de texte apparaît.

Formulaire zone de texte inséré

Comme nous serons amenés à insérer de nouveaux objets, nous pouvons faire de l'espace en appuyant sur la touche clavier Entrée à la fin de chaque ligne sur la page, comme ici.

Espace entre objets formulaires

Les objets que nous avons insérées maintenant ont besoin un peu de travail sur leur mise en forme, et c'est ce que nous allons voir dans la prochaine section.

Voici le code généré par Dreamweaver:

<form name="form1" action="">
Votre nom
<input type="text" name="nomclient" id="nomclient" accesskey="N" tabindex="1">
</form>
<form name="form2" method="post" action="">
<p>
<label for="Message1">Message</label>
<textarea name="Message1" id="Message1" cols="45" rows="5" accesskey="M" tabindex="2"></textarea>
</p>
</form>

Le prochain tuto: Mise ne forme des objets de formulaire

 

   

 

 

Chaîne YouTube

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site