Tutoriel HTML / XHTML

HTML

Découvez les bases de HTML et XHTML dans ce tutoriel.

HTML5 CSS Dreamweaver Bootstrap PHP

Créer un formulaire HTML

Dans ce tutoriel, nous allons voir comment créer un formulaire en HTML

La balise form

Tous les champs du formulaire doivent se trouver entre les balises <form> et </form>

<form name="form1" action="reception.php" method="post">
</form>

Attributs

Nom Détail Importance
name C'est le nom du formulaire (Ne pas mettre d'espaces ni de caractéres accentués dans le nom du formulaire) Indispensable
action C'est le nom de la page qui reçoit les valeurs du formulaire Indispensable
method
  • POST (Prenez cette option)
  • GET

Si vous souhaitez en savoir plus sur ces 2 méthodes, il va falloir vous intéresser au PHP.

Indispensable
id Vous pouvez utiliser un ID pour l'exploiter avec Javascrpt ou CSS Facultatif
enctype enctype="multipart/form-data"

Valeurs possibles :

  • multipart/form-data
  • application/x-www-form-urlencoded
Facultatif
target Comme pour la balise a le target="_blank" permettra d'ouvrir la page dans un nouvel onglet.

Valeurs possibles :

  • _blank
  • _new
  • _parent
  • _self
  • _top
Facultatif

Les étiquettes, label

Les étiquettes contiennent le texte que vous allez placer devant votre champ pour guider l'utilisateur.

A la place d'utiliser des étiquettes, vous pouvez aussi utiliser du CSS.

En savoir + sur le CSS

Utilisation des "label" avec "for"

Exemple

<label for="Nom">Votre nom</label>
<input type="text" name="Nom" size="30" />

Les balises input

1. Champ de texte

<input type="text" ...

Exemple

<label>Nom
<input name="Nom" type="text" value="Compléter votre nom" size="40" />
</label>

Principaux attributs de la balise input

Nom Détail Importance
type
  • text
  • hidden
  • password
  • radio
  • checkbox
Important
name Le nom du champ de formulaire (Ne pas mettre d'espaces ni de caractéres accentués dans le nom du champ de formulaire) Important
id Vous pouvez utiliser un ID pour l'exploiter avec Javascrpt ou CSS Facultatif
size size="20"
Ce qui signifie que le champ à une largeur à l'écran de 20 caractéres
Pratique
maxlength maxlength="25"
Nombre maximum de caractéres limité à 25
Facultatif
value value="Compléter votre nom"
Permet d'affciher une valeur dans le champ de type input
Facultatif, tout dépend des cas
readonly readonly="readonly"
Permet de bloquer le formulaire en lecture seule
Facultatif

2. Champ masqué

<input type="hidden" ...

Pourquoi utiliser un champ masqué, si je ne le vois pas !

Avec un exemple ce sera plus facile à compendre

Dans mon champ de formulaire, je cache comme valeur la date du jour, pour connaître la date de la demande.

<input type="hidden" name="date_jour" value="18-10-2021" />

3. Champ mot de passe

<input type="password" ...

Exemple

<label>Mot de passe
<input type="password" name="mdp" size="20" />
</label>

Vous pouvez remarquer que les valeurs saisies dans le formulaire ne sont pas visibles et sont remplacés par des points.


4. Bouton radio

<input type="radio"

Exemple

Oui Non
<label>J'aime le XHTML </label>
<input type="radio" name="choix" value="Oui" checked="checked" /> Oui
<input type="radio" name="choix" value="Non" /> Non

L'attribut checked avec la valeur checked autrement checked="checked" permet de sélectionner une option par défaut


5. Case à cocher

<input type="checkbox" ...

Exemple




<label>
<input name="activite" type="checkbox" value="Sport" checked="checked" /> Sport
</label><br>
<label>
<input type="checkbox" name="activite" value="Cinéma" /> Cinéma
</label><br>
<label>
<input type="checkbox" name="activite" value="Balade" /> Balade
</label><br>
<label>
<input type="checkbox" name="activite" value="Restaurant" /> Restaurant
</label>

6. Champ de fichier

<input type="file" ...

Exemple

<label>Envoyer mon fichier
<input name="upload" type="file" size="20" />
</label>

7. Bouton d'envoi

Le "submit "est un bouton qui permettra d'envoyer les données du formulaire.

<input type="submit"...


8. Bouton pour effacer les données saisies

Le "reset" permettra de vider toutes les données saisies dans le formulaire.

<input type="reset"

Exemple de formulaire avec envoi de données sur une autre page, cliquer sur le bouton "Envoyer ma demande" pour le tester

Attention, ce formulaire n'est pas sécurisé !

Vous pouvez envoyer des champs vides et y insérer n'importe quel type de valeur, je pourrai trés bien mettre 123 à la place du nom ou du prénom

Nous pourrons faire des contrôles dessus avec :

  • HTML5 avec l'attribut "required"
  • Javascript (Côté client
  • PHP (Côté serveur)

M. Mme Melle





<form action="formulaires-traitement.php" method="post" name="form10">
<label>Civilité</label><br>
<input type="radio" name="civilite" value="M." checked="checked"> M.
<input type="radio" name="civilite" value="Mme"> Mme
<input type="radio" name="civilite" value="Melle"> Melle<br>
<label>Votre nom</label><br>
<input type="text" name="nom" size="30" /><br>
<label>Votre prénom</label><br>
<input type="text" name="prenom" size="30" /><br><br>
<input type="submit" name="envoi" value="Envoyer ma demande" />
<input type="reset" name="effacer" value="Vider les données" />
</form>

9. Bouton avec image

<input type="image"

Le bouton classique peut être remplacé par une image, cliquer sur le bouton mauve pour envoyer votre formulaire

Exemple


<form action="formulaires-traitement.php" method="post" name="form12">
<label> Votre nom</label><br>
<input type="text" name="nom" size="30" />
<input type="image" name="envoyer_image" src="images/icon_news.gif" />
</form>

La balise textarea

La balise textarea permettra par rapport à une balise input de type text, la saisie d'un plus grand nombre de caractères.

Exemple

<textarea name="commentaire" cols="45" rows="5">Ajouter votre commentaire</textarea>

L'attribut cols définit la largeur
L'attribut rows définit la hauteur

Liste déroulante avec select

Exemple


<label>Matiére préférée</label><br>
<select name="matiere">
<option value="Math" selected="selected">Math</option>
<option value="Français">Français</option>
<option value="Anglais">Anglais</option>
</select>

La liste en elle même est constituée d'un <select> entrant avec un name et d'un </select> sortant.

Les éléments constituants la liste sont affichés entre les balises <option> et </option>.

L'attribut value représente la valeur qui va être envoyée dans le formulaire.

L'attribut selected avec la valeur selected permet de sélectionner un élement de liste par défaut.