Informatique


Les types <input>

Aller à

<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=20 maxlength=30>
	<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 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=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=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=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=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
	if(isset($_POST['test'])){
		echo "Bonjour ".$_POST['pseudo'];
	}
	else{
		echo "Bienvenue sur ma magnifique page!";
	}
	?>

Attributs

value.


<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=number>

Le champ de type number oblige l'utilisateur à entrer des chiffres.
Attention: la valeur envoyée est de type string, comme toujours quand il s'agit des formulaires.

Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
	<label for="em">Un nombre:</label> <input id="em" type="number" name="valeur">
	<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['valeur']);
?>

Attributs

name, autocomplete, list, placeholder, readonly, value, step.

Démo
<form action=<?php echo $_SERVER['PHP_SELF'];?> method=post>
	<label for="me">Un nombre:</label> 
	<input id="me" type="number" name="valeur" step=4>
	<input type=submit value="Envoyer">
</form>
<?php
var_dump($_POST['valeur']);
?>


<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=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=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.