Formulaires HTML - Tutoriel Dreamweaver

Les formulaires HTML avec Dreamweaver

Dans ce tutoriel, je vous propose de découvrir les formulaires HTML avec Dreamweaver.

Insertion formulaire

Balise form

Pour insérer la balise form, cliquer sur le bouton 1 .

Exemple

Quelques attributs

Attribut	Commentaire
name	nom du formulaire
method	post ou get (Lire les tutoriels sur PHP)
action	Nom de la page qui va traiter les informations envoyées via le formulaire
title	Permet d'afficher une infobulle lorsque vous passez sur la balise

Champ de texte

Pour insérer un champ de texte, cliquer sur le bouton 2

Exemple

nom

Quelques attributs

Attribut	Commentaire
label	Etiquette permettant d'afficher ici le mot "Nom"
type	Détermine le type du champ, ici text, signifie que l'on utilse un champ de type texte
name	Le nom du champ
id	Pour relier à l'étiquette for à côté du label (Peut être aussi utilisé en Javascript)
value	Peut par exemple contenir une valeur par défaut
placeholder	Permet d'afficher un texte qui sert d'exemple (En HTML5)
readonly	Active le mode lecture seul, on ne peut pas écrire dedans
disabled	Désactive le champ
required	Ne peut pas envoyer le formulaire si le champ est vide (En HTML5)
class	Permet d'y ajouter une classe CSS

Zone de texte

Pour insérer une zone de texte, cliquer sur le bouton 4.

Exemple

<label for="Comment">Votre commentaire</label>
<textarea name="comment" id="Comment" cols="45" rows="5"></textarea>

Votre commentaire

Quelques attributs

Attribut	Commentaire
cols	Largeur de caractère
rows	Nombre de lignes

Groupe de bouton radio

Pour insérer une groupe de bouton radio, cliquer sur le bouton 7.

Exemple

<label for="Civilite_01">
<input name="civilite" type="radio" id="Civilite_01" value="M." checked="checked">
M. </label>

<label for="Civilite_02">
<input type="radio" name="civilite" value="Mme" id="Civilite_02">
Non </label>

<label for="Civilite_03">
<input name="civilite" type="radio" id="Civilite_03" value="Melle" checked="checked">
Melle </label>

M. Non Melle

Quelques attributs

Attribut	Commentaire
checked	Permet de sélectionner un item par défaut

Liste / Menu

Pour insérer une liste déroulante, cliquer sur le bouton 8.

Dans le panneau Propriété cliquez Valeurs de la liste et compléter les étiquettes et les valeurs

Exemple

<label for="Select">Sport</label>

<select name="activite" id="Select">
<option value="Automobile" selected>Automobile</option>
<option value="Rugby">Rugby</option>
<option value="VTT">VTT</option>
</select>

Sport

Quelques attributs

Attribut	Commentaire
selected	Permet de sélectionner un item par défaut

Boutons

Pour insérer un bouton, cliquer sur le bouton 12.

Exemple