<input type=submit>
L'input permettant d'envoyer le formulaire.
Nom: <input type=submit value=unTexte>
Attribut
value
<input type=text>
Champ de type texte permettant d'envoyer du texte.
Nom: <input type=text name=nom>
Attributs
name, autocomplete, list, maxlength, minlength, pattern, placeholder, required, size
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="nom">Nom:</label>
<input id="nom" type="text" name="nom" placeholder="--Ici---" size=10 maxlength=8>
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['nom']);
?>
<input type=password>
Champ de type texte permettant d'envoyer un mot de passe masqué.
Mot de passe: <input type=password name=pw>
Attributs
name, autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required et size
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="pass">password:</label>
<input id="pass" type="password" name="pw" placeholder="*****" size=10 minlength=6 maxlength=8 autocomplete="off" required>
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['pw']);
?>
<input type=radio>
Les input radio permettent d'afficher des boutons, l'attribut name est identique pour l'ensemble
des boutons qui participent au choix.
Un seul choix possible, le bouton est rond, l'attribut checked permet de cocher un et un seul choix par défaut.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
Etat civil:
<label for="ma">Marié(e)</label> <input id="ma" type="radio" name="etat" value="1">
<label for="vc">Contrat de VC</label> <input id="vc" type="radio" name="etat" value="2">
<label for="ce">Célibataire</label> <input id="ce" type="radio" name="etat" value="3" checked> ;
<input type=submit value="Envoyer">
</form>
<?php
echo $_POST['etat'];
?>
Attributs
name, value, checked
<input type=checkbox>
Les input checkbox permettent d'afficher des boutons, l'attribut name est identique pour l'ensemble
des boutons qui participent au choix.
Plusieurs choix possibles, le bouton est carré, l'attribut checked permet de cocher un ou plusieurs choix par défaut.
Démo;
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
Intérêt:
<label for="mu">Musique</label> <input id="mu" type="checkbox" name="interet[]" value="musique" checked>
<label for="vo">Voyages</label> <input id="vo" type="checkbox" name="interet[]" value="voyage">
<label for="in">Informatique</label> <input id="in" type="checkbox" name="interet[]" value="informatique" checked>
<label for="le">Lecture</label> <input id="le" type="checkbox" name="interet[]" value="lecture">
<label for="ci">Cinéma</label> <input id="ci" type="checkbox" name="interet[]" value="cinéma">
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['interet']);
?>
Attributs
name, value, checked
<input type=date>
Champ de type texte permettant d'entrer une date sous forme de chaîne de caractères déjà formatée ou au moyen d'un calendrier.
La valeur envoyée est une chaîne de caractères représentant une date au format anglais (aaaa-mm--jj).
L'apparence peut varier en fonction du navigateur.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="em">Date:</label> <input id="em" type="date" name="vdate">
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['vdate']);
?>
Attributs
name, autocomplete, list, readonly, value, step
<input type=range>
Le champ de type range permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.
Par défaut le pas est de 1.
Exemples: une fourchette de prix pour l'immobilier, un volume audio, etc.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="em">Interval:</label> <input id="em" type="range" name="interv" min=100 max=200>
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['interv']);
?>
Attributs
name, autocomplete, list, max, min, step, value.
<input type=hidden>
Un champ caché est utile pour faire passer des informations de pages et pages ou pour tester si une page contenant un formulaire sous leffet d'une requête submit ou non.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="nom">Pseudo:</label>
<input id="nom" type="text" name="pseudo">
<br>
<input type="hidden" name="test" value=1>
<input type="submit" value="M'identifier">
</form>
<?php
$pseudo = $_POST['pseudo'];
$passe = $_POST['test'];
echo "Bonjour ".$pseudo."<br>";
echo "valeur passée: ".$passe;
?>
Attributs
value.
<input type=number>
Champ de type number permettant des opérations mathématiques avent l'envoi du formulaire.
... mais la valeur envoyée sera bien de type texte!
Les valeurs non numériques seront rejetées.
Nom: <input type=text name=nom>
Attributs
name, max, min, readonly, step,value
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="nom">Nom:</label>
<input id="nom" type="number" name="nombre" value=10>
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['nombre']);
?>
<input type=url>
Champ de type texte permettant d'envoyer une URL (Uniform Ressource Locator).
L'URL doit être correctement écrite (syntaxe), si non un message d'erreur est affiché.
Un formulaire incluant ce champ ne pourra être envoyé si l'URL n'est pas syntaxiquement correcte.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
Votre URL: <input id=urldem type=url name=urlocator>
<input type=submit value="Envoyer">
</form>
<?php
echo $_POST['urlocator'];
?>
Attributs
name, autocomplete, maxlength, minlength, pattern, placeholder, readonly, list, value, size
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="me">Votre URL:</label>
<input id="me" type="url" name="urlocator" placeholder="http://..." list=adresses>
<datalist id="adresses">
<option value="http://www.louisvandevelde.be">
<option value="https://www.w3schools.com">
<option value="https://developer.mozilla.org">
</datalist>
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['urlocator']);
?>
<input type=email>
Champ de type texte permettant d'envoyer une adresse mail.
L'adresse doit être correctement écrite (syntaxe), si non un message d'erreur est affiché.
Un formulaire incluant ce champ ne pourra être envoyé si l'adresse mail n'est pas syntaxiquement correcte.
Le contrôle de validité ne se fait que sur la présence obligatoire de l'arobase.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="em">E-mail:</label> <input id="em" type="email" name="adelec">
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['adelec']);
?>
Attributs
name, autocomplete, list, maxlength, minlength, multiple, pattern, placeholder, readonly, value, size
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="me">E-mail:</label>
<input id="me" type="email" name="adelec" value="allah@paradis.be" readonly>
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['adelec']);
?>
<input type=month>
Champ de type texte permettant d'entrer un mois et une année.
La valeur envoyée est une chaîne de caractères représentant une date au format anglais (aaaa-mm).
L'apparence peut varier en fonction du navigateur.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="em">Mois:</label> <input id="em" type="month" name="vmois">
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['vmois']);
?>
Attributs
name, autocomplete, list, readonly, value, step
<input type=time>
Champ de type texte permettant d'entrer une heure sous forme d'une chaîne de caractères déjà formatée en hh:mm.
La valeur envoyée est une chaîne de caractères représentant l'heure et les minutes.
L'apparence peut varier en fonction du navigateur.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="em">Heure:</label> <input id="em" type="time" name="temps">
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['temps']);
?>
Attributs
name, autocomplete, list, readonly, step.
<input type=image>
L'input de type image remplace le bouton submit et permet donc d'envoyer le formulaire, l'attribut formaction n'est pas impératif.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="nom">Pseudo:</label>
<input id="nom" type="text" name="pseudo">
<br>
<input type="hidden" name="test" value=1>
<input type="image" src="../../image/send.jpg">
</form>
<?php
echo "Bonjour ".$_POST['pseudo'];
?>
Attributs
name, alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget.
<input type=color>
Le champ de type color affiche une palette de couleurs.
La valeur envoyée est l'expression hexadécimale de la couleur choisie.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="em">Couleur favorite:</label> <input id="em" type="color" name="macoul">
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['macoul']);
?>
Attributs
name, autocomplete, list, value.
<input type=file>
Le champ de type file permet de sélectionner un fichier dans l'arborescence.
Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
<label for="em">Fichier à transférer:</label> <input id="em" type="file" name="fichier">
<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['fichier']);
?>
Attributs
name, accept, multiple, required, files, value.
Récapitulatif des attributs
autocomplete |
autocomplete="off" ou autocomplete="on" est utilisé pour autoriser ou non l'autocompletion. |
checked |
mot-cle permettant de cocher automatiquement une option pour les input de type radio ou checkbox. |
id |
id=x permet de lier un identificateur à l'input, souvent utiliser pour lier l'input à un label |
list |
list="uneListe" lie l'input à la balise <datalist> dont l'attribut name est évalué à "une liste" |
max |
max=n impose la valeur maximale n pour les input de type range et number |
maxlength |
maxlength=n autorise la saisie de n caractères maximum |
min |
min=n impose la valeur minimale n pour les input de type range et number |
minlength |
minlength=n impose la saisie de n caractères minimum |
name |
name="unMot" est utilié pour associé le mot "unMot" à une cellule du tableau associatif $_POST.
Indispensable bien que non obligatoire! |
placeholder |
placeholder="Une phrase" est utilisé pour donner une information à l'utilisateur, lorsque l'input reçoit le focus le texte "Une phrase" est automatiquement remplacé par le texte de l'utilisateur
Indispensable bien que non obligatoire! |
readonly |
mot-clé permettant d'empêcher l'utilisateur de modifier le champ préalablement chargé avec l'attribut value |
required |
mot-clé permettant d'obliger l'utilisateur à remplir le champ avant de d'envoyer le formulaire |
size |
size=n permet de dimensionner l'input à n caractères |
step |
step=n impose un pas de n dans les input de type range et number |
type |
type="text|password|submit|radio|checkbox|hidden|reset" permet de spécifier l'input désiré |
value |
value=unevaleur permet de donner une valeur à l'input |