Découvez les bases de HTML et XHTML dans ce tutoriel.
Tous les champs du formulaire doivent se trouver entre les balises <form> et </form>
<form name="form1" action="reception.php" method="post">
</form>
| 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 |
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 :
|
Facultatif |
| target | Comme pour la balise a le target="_blank"
permettra d'ouvrir la page dans un nouvel onglet.
Valeurs possibles :
|
Facultatif |
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.
Exemple
<label for="Nom">Votre nom</label>
<input type="text" name="Nom" size="30" /><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 |
|
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 |
<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="21-11-2024" />
<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.
<input type="radio"
Exemple
<label>J'aime le XHTML </label>
<input type="radio" name="choix" value="Oui" checked="checked" /> Oui
<input type="radio" name="choix" value="Non" /> NonL'attribut checked avec la valeur checked autrement checked="checked" permet de sélectionner une option par défaut
<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><input type="file" ...
Exemple
<label>Envoyer mon fichier
<input name="upload" type="file" size="20" />
</label>
Le "submit "est un bouton qui permettra d'envoyer les données du formulaire.
<input type="submit"...
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 :
<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>
<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>
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
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.