Informatique


Les types <input>

Aller à

<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