Les Formulaires

Voir au format PDF
Vous êtes ici : >> HTML-CSS / Les Formulaires
Temps d'étude : 1h30. Niveau : Facile.
Tags : Les Formulaires
Fichier(s) utile(s) pour ce cours : /

Création d'un formulaire

Le langage Html permet de construire un formulaire. Le langage Css permet de mettre en forme un formulaire.

Un langage comme PHP (ou autre) permet de récupérer les saisies d'un formulaire. Le langage SQL permet de sauvegarder les informations dans une base de données.

Le langage JAVASCRIPT permet (par exemple) de contrôler les informations saisies par l'internaute.

Voici un premier formulaire :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="menu-vertical.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					
				</form>
			</body>
		</html>
Un formulaire se trouve toujours à l'intérieur des balises <form>.

L'attribut method permet de préciser la manière dont vont circuler les données, généralement 2 choix s'offrent à nous, GET (dans l'url) et POST (côté serveur).

L'attribut action permet de définir la page de destination du formulaire. Si vous souhaitez récupérer les saisies des internautes sur la même page, vous pouvez laisser la valeur vide (comme ci-dessus) sinon il faudra préciser le nom d'une page, par exemple : traitement.php (à condition de créer le fichier correspondant).

L'attribut enctype permet de faire véhiculer des fichiers multimédias (fichier pdf, doc word, etc. mais aussi des images et des vidéos). Sans cela, les fichiers multimédias ne passeront pas.

Et maintenant ? Notre formulaire est totalement vide, nous allons déclarer des champs à l'intérieur.

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
				</form>
			</body>
		</html>
Voici la balise label qui nous permet de déclarer une étiquette permettant de préciser le type d'informations dont nous aurons besoin.

C'est la balise input comportant l'attribut type="text" qui va nous permettre de saisir du texte dans une case.

L'attribut required permet de rendre le champ obligatoire.

L'attribut name est indispensable pour pouvoir récupérer plus tard la saisie via le langage PHP.

En effet, nous ne verrons pas la différence si nous travaillons uniquement en HTML mais plus tard, au niveau du développement côté PHP il ne sera pas possible de récupérer le texte saisie par l'internaute sans l'attribut name et je pense que vous serez d'accord avec moi si je vous dis que l'objectif d'un formulaire c'est bien de récupérer les données postées ! sinon notre formulaire ne servirai pas à grand chose :p

fléche Attention
Pour qu'une récupération des saisies postées soit possible, il faut toujours prévoir des attributs name dans les balises input de vos formulaires !

L'attribut for de la balise label fonctionne avec l'attribut id de la balise input.

Cette fois-ci l'id n'est pas présent pour être selectionné en CSS mais pour augmenter l'accessibilité (norme accessiweb), en effet une personne mal-voyante pourra cliquer sur le mot "Pseudo" et cela activera le curseur dans la case de saisie input.

Par conséquent nous n'oublieons pas de relier l'attribut for de la balise label à l'attribut id de la balise input.

Voici le résultat actuel :

Résultat



Pour qu'un formulaire soit conforme, il ne faut pas oublier le bouton submit (permettant la validation). sinon comment l'internaute pourrait-il soumettre ses données vers le site web ?

Ajoutons le :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<input type="submit" value="valider">
				</form>
			</body>
		</html>
L'attribut submit de la balise input permet de valider le formulaire.

L'attribut value de la balise input permet de préciser le texte à l'intérieur du bouton d'envoi.

De cette manière, on se sent un peu mieux, l'internaute pourra tout à fait communiquer avec nous !

Résultat



Nous pouvons tout à fait ajouter d'autres champs, exemple :
formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<input type="submit" value="valider">
				</form>
			</body>
		</html>

L'attribut type de la balise input permet de préciser le type de case de saisie que l'on souhaite obtenir et en précisant la valeur password, le texte saisi par l'internaute sera crypté à l'affichage. Ce n'est pas forcément sécurisé au sens propre du terme, cela permet surtout à l'internaute de saisir un mot de passe sans que quelqu'un placé avec lui dérrière l'écran (un ami,...) puisse voir le texte saisie.

Comme vous pouvez le constater, toujours pour des normes accessiweb, la valeur de l'attribut for est la même que la valeur de l'attribut id afin que l'étiquette et la case de saisie soit reliées (si l'internaute clique sur l'étiquette, cela place le curseur dans la case de saisie.

Et bien entendu l'attribut name est TOUJOURS présent, sans cela, aucune récupération serait possible ! Ne l'oubliez pas !

Pour rappel nous évitons de mettre des espaces et des accents dans les valeurs de nos attributs, exemple :


préférez l'écriture suivante :


préférez l'écriture suivante :

Résultat




Ajoutons un autre champ :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
			
					<input type="submit" value="valider">
				</form>
			</body>
		</html>

Cette fois-ci, l'attribut placeholder nous permet d'avoir un texte pré-saisi qui s'efface lorsque l'internaute commencera à écrire à l'intérieur de ce champ.

Cela permet de fournir une indication supplémentaire.

Résultat





Depuis l'arrivée d'Html5, les champs de formulaires se sont améliorés, exemple :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
			
					<input type="submit" value="valider">
				</form>
			</body>
		</html>

Le type email est présent pour contrôler que le format de l'email soit conforme (avec un arrobase @ et un point .).

Cela ne vérifie pas si l'adresse email existe mais déjà ce premier niveau de vérification permet d'éviter une erreur involontaire de l'internaute.

Faites le test ! Essayez de valider une chaine de caractères quelcquonque dans ce champ du style : "123". Vous verrez une infobulle vient vous prévenir que le format de l'adresse email n'est pas correct.

Résultat






Ajoutons à présent un champ upload pour joindre une image (avatar de profil) ou bien encore un CV dans un formulaire de recrutement ou une vidéo dans un réseau social...

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
			
					<input type="submit" value="valider">
				</form>
			</body>
		</html>

Le type File permet de faire apparaitre un bouton d'upload parcourrir.

Quant à la valeur multiple, cela permet d'accepter l'upload de plusieurs fichiers en une seule fois.

Résultat







Parfois, ce n'est pas à l'internaute de saisir du texte mais on lui demande de faire un choix parmi plusieurs options, exemple :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
					
					<label for="Pays">Pays</label>
					<select id="Pays" name="pays">
						<optgroup label="Europe">
							<option value="fr">France</option>
							<option value="it">Italie</option>
							<option value="es" selected>Espagne</option>
						</optgroup>
					</select><br>
			
					<input type="submit" value="valider">
				</form>
			</body>
		</html>

La balise select permet effectivement d'obtenir un déroulant proposant plusieurs options.

Optgroup n'est pas obligatoire, cela permet de classer et "catégoriser" des options s'il y en a beaucoup.

A l'intérieur d'une option, l'attribut selected permet de garder une option selectionné par défaut.

La balise select contient des options. L'internaute doit faire son choix parmis les options présentes (que nous avons définie à l'avance).

A l'intérieur de la balise <select> nous pourrions ajouter l'attribut multiple pour donnner la possibilité à l'internaute de choisir plusieurs options (en maintenant la touche ctrl de son clavier appuyé).

L'attribut name est toujours présent pour permettre au développeur (côté php) de récupérer l'option qui aura été choisie par l'internaute.

La value présente dans la balise <option> permettra au dévéloppeur (côté php) de récupérer une information de notre choix plutôt que le texte contenu dans les options.

C'est à dire qu'avec le code suivant : 
	<option>France</option>
Nous récupérerons France dans le traitement PHP.

Alors qu'avec le code suivant : 
	<option value="fr">France</option>
Nous récupérerons la valeur fr dans le traitement PHP.

Résultat








Ajoutons d'autres choix sous forme de cases à cocher :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
					
					<label for="Pays">Pays</label>
					<select id="Pays" name="pays">
						<optgroup label="Europe">
							<option value="fr">France</option>
							<option value="it">Italie</option>
							<option value="es" selected>Espagne</option>
						</optgroup>
					</select><br>
			
					<label for="choix">Quel sont vos fruits préférés ?</label>
					<p><input type="checkbox" name="choix" checked> Orange
					<input type="checkbox" name="choix"> Fraise
					<input type="checkbox" name="choix"> Poire</p>
			
					<input type="submit" value="valider">
				</form>
			</body>
		</html>

L'attribut type de la balise input permet de préciser le type de case de saisie que l'on souhaite obtenir et en précisant la valeur checkbox, cela permet d'obtenir une case à cocher.

L'attribut name permet de rendre le choix de l'internaute récupérable (en PHP).

L'attribut checked permet de cocher une case par défaut.

Résultat






Orange Fraise Poire



Dans l'exemple précédent, nous venons de voir que l'internaute pouvait cocher plusieurs cases et ainsi effectuer plusieurs choix.

Dans cet exemple, nous allons conserver les cases à cocher avec la possibilité d'effectuer un choix unique :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
					
					<label for="Pays">Pays</label>
					<select id="Pays" name="pays">
						<optgroup label="Europe">
							<option value="fr">France</option>
							<option value="it">Italie</option>
							<option value="es" selected>Espagne</option>
						</optgroup>
					</select><br>
			
					<label for="choix">Quel sont vos fruits préférés ?</label>
					<p><input type="checkbox" name="choix"> Orange
					<input type="checkbox" name="choix"> Fraise
					<input type="checkbox" name="choix"> Poire</p>
					
					<label for="civilite">Civilite</label>
					<p><input type="radio" name="civilite" value="m" checked>Homme
					<input type="radio" name="civilite" value="f">Femme</p>
			
					<input type="submit" value="valider">
				</form>
			</body>
		</html>

En précisant la valeur radio dans l'attribut type de la balise input cela permet d'obtenir une case à cocher unique.

Ainsi l'internaute ne pourra effectuer qu'un seul choix.

L'attribut name permet de rendre le choix de l'internaute récupérable (en PHP).

L'attribut value permet de récupérer (en PHP) soit M soit F.

L'attribut checked permet de cocher une case par défaut.

Résultat






Orange Fraise Poire

Homme Femme



Depuis l'arrivée de Html5, nous pouvons également prévoir des suggestions automatiques venant en complétion de la saisie d'un internaute, exemple :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
					
					<label for="Pays">Pays</label>
					<select id="Pays" name="pays">
						<optgroup label="Europe">
							<option value="fr">France</option>
							<option value="it">Italie</option>
							<option value="es" selected>Espagne</option>
						</optgroup>
					</select><br>
			
					<label for="choix">Quel sont vos fruits préférés ?</label>
					<p><input type="checkbox" name="choix"> Orange
					<input type="checkbox" name="choix"> Fraise
					<input type="checkbox" name="choix"> Poire</p>
					
					<label for="civilite">Civilite</label>
					<p><input type="radio" name="civilite" value="m" checked>Homme
					<input type="radio" name="civilite" value="f">Femme</p>
					
					<label for="ville">Ville</label>
					<input type="text" id="ville" name="ville" list="france">
					<datalist id="france">
						<option>Paris</option>
						<option>Marseille</option>
						<option>Lyon</option>
					</datalist><br>

					<input type="submit" value="valider">
				</form>
			</body>
		</html>

La case de saisie input permet de saisir du texte.

La balise datalist permet de déclarer une liste de suggestions.

Les balises option permettent d'annoncer les suggestions.

Faites le test ! Lorsque nous saisirons le P, Paris sera alors proposé automatiquement !

Pour cela, vous aurez remarqué qu'il faut relier la case de saisie input avec la balise datalist par l'intérmédiaire des attributs list et id.
Résultat






Orange Fraise Poire

Homme Femme




Grâce aux expressions régulières en HTML 5, nous pouvons également demander à ce que l'internaute saisisse uniquement des chiffres :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
					
					<label for="Pays">Pays</label>
					<select id="Pays" name="pays">
						<optgroup label="Europe">
							<option value="fr">France</option>
							<option value="it">Italie</option>
							<option value="es" selected>Espagne</option>
						</optgroup>
					</select><br>
			
					<label for="choix">Quel sont vos fruits préférés ?</label>
					<p><input type="checkbox" name="choix"> Orange
					<input type="checkbox" name="choix"> Fraise
					<input type="checkbox" name="choix"> Poire</p>
					
					<label for="civilite">Civilite</label>
					<p><input type="radio" name="civilite" value="m" checked>Homme
					<input type="radio" name="civilite" value="f">Femme</p>
					
					<label for="ville">Ville</label>
					<input type="text" id="ville" name="ville" list="france">
					<datalist id="france">
						<option>Paris</option>
						<option>Marseille</option>
						<option>Lyon</option>
					</datalist><br>
	
					<label for="cp">Code Postale</label>
					<input type="text" id="cp" name="cp" maxlength="5" pattern="[0-9]{5}" title="5 chiffres requis entre 0 et 9"><br>

					<input type="submit" value="valider">
				</form>
			</body>
		</html>

L'attribut maxlength permet de préciser que nous bloquerons la saisie au bout de 5 caractères.

L'attribut pattern permet d'accepter uniquement les chiffres entre 0 et 9, au nombre de 5.

L'attribut title permet de préciser le message d'erreur si la saisie de l'internaute ne respecte pas les régles imposées par le site web.

Faites le test !

Résultat






Orange Fraise Poire

Homme Femme





Ajoutons une zone de saisie :

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
					
					<label for="Pays">Pays</label>
					<select id="Pays" name="pays">
						<optgroup label="Europe">
							<option value="fr">France</option>
							<option value="it">Italie</option>
							<option value="es" selected>Espagne</option>
						</optgroup>
					</select><br>
			
					<label for="choix">Quel sont vos fruits préférés ?</label>
					<p><input type="checkbox" name="choix"> Orange
					<input type="checkbox" name="choix"> Fraise
					<input type="checkbox" name="choix"> Poire</p>
					
					<label for="civilite">Civilite</label>
					<p><input type="radio" name="civilite" value="m" checked>Homme
					<input type="radio" name="civilite" value="f">Femme</p>
					
					<label for="ville">Ville</label>
					<input type="text" id="ville" name="ville" list="france">
					<datalist id="france">
						<option>Paris</option>
						<option>Marseille</option>
						<option>Lyon</option>
					</datalist><br>
	
					<label for="cp">Code Postale</label>
					<input type="text" id="cp" name="cp" maxlength="5" pattern="[0-9]{5}" title="5 chiffres requis entre 0 et 9"><br>
					
					<label for="adresse">Adresse</label>
					<textarea id="adresse" name="adresse" rows="5" cols="25"></textarea><br>

					<input type="submit" value="valider">
				</form>
			</body>
		</html>

La balise textarea permet de définir une zone de saisie.

Input est une case de saisie, Textearea est une zone de saisie.

Comme d'habitude l'attribut name permet de préciser un nom qui pourra être ré-utiliser côté PHP pour récupérer la saisie de l'internaute.

Les attributs rows et cols permettent de préciser la hauteur et la largeur de la zone de saisie mais cela peut également être géré avec une feuille de style CSS.

Résultat






Orange Fraise Poire

Homme Femme






Parmi les dernières innovations en matière de formulaires, nous pouvons ajouter d'autres champs (mais attention l'interprétation des navigateurs reste à vérifier).

formulaire1.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Mon Menu</title>
				<link rel="stylesheet" href="formulaire1.css">
			</head>
			<body>
				<form method="post" action="" enctype="multipart/form-data">
					<label for="pseudo">Pseudo *</label>
					<input type="text" id="pseudo" name="pseudo" required><br>
					
					<label for="mdp">Mot de passe</label>
					<input type="password" id="mdp" name="mdp"><br>
					
					<label for="prenom">Prenom</label>
					<input type="text" id="prenom" name="prenom" placeholder="Votre prenom"><br>
					
					<label for="email">Email</label>
					<input type="email" id="email" name="email"><br>
					
					<label for="avatar">Avatar</label>
					<input type="file" id="avatar" name="avatar" multiple><br>
					
					<label for="Pays">Pays</label>
					<select id="Pays" name="pays">
						<optgroup label="Europe">
							<option value="fr">France</option>
							<option value="it">Italie</option>
							<option value="es" selected>Espagne</option>
						</optgroup>
					</select><br>
			
					<label for="choix">Quel sont vos fruits préférés ?</label>
					<p><input type="checkbox" name="choix"> Orange
					<input type="checkbox" name="choix"> Fraise
					<input type="checkbox" name="choix"> Poire</p>
					
					<label for="civilite">Civilite</label>
					<p><input type="radio" name="civilite" value="m" checked>Homme
					<input type="radio" name="civilite" value="f">Femme</p>
					
					<label for="ville">Ville</label>
					<input type="text" id="ville" name="ville" list="france">
					<datalist id="france">
						<option>Paris</option>
						<option>Marseille</option>
						<option>Lyon</option>
					</datalist><br>
	
					<label for="cp">Code Postale</label>
					<input type="text" id="cp" name="cp" maxlength="5" pattern="[0-9]{5}" title="5 chiffres requis entre 0 et 9"><br>
					
					<label for="adresse">Adresse</label>
					<textarea id="adresse" name="adresse" rows="5" cols="25"></textarea><br>
					
					<label for="datedenaissance">Date de Naissance</label>
					<input type="date" name="datedenaissance" id="datedenaissance"><br>
					
					<label for="jauge">Jauge</label>
					<input type="range" min="25" max="50" value="26" id="jauge"><br>
					
					<label for="telephone">Telephone</label>
					<input type="tel" pattern="^[0-9]{10}$"><br>
		
					<label for="recherche">recherche</label>
					<input type="search" pattern="^[0-9]{10}$"><br>
					
					<label for="url">url</label>
					<input type="url" pattern="^[0-9]{10}$"><br>
					
					<label for="couleur">Couleur</label>
					<input type="color"><br>

					<input type="submit" value="valider">
				</form>
			</body>
		</html>

Le type date permet d'afficher un calendrier pour selectionner une date.

Le type range permet d'afficher une jauge et de choisir un chiffre entre deux nombres donnés (pratique pour des filtres).

Le type tel permet à un smartphone de proposer le clavier numérique.

Le type search permet de construire un champ de recherche pour conserver en mémoire les dernières recherches effectuées.

Le type url permet de saisir une adresse url.

Le type color permet de faire sortir une palette de couleurs.

Résultat






Orange Fraise Poire

Homme Femme












Voila, tous les champs existants n'ont pas été présentés, mais à priori vous devriez quand même trouver votre bonheur dans ces différentes possibilités.

Un peu de CSS pour améliorer la présentation de nos formulaires :

formulaire1.css
	// ... votre code ...

Les éléments de formulaire

Voici le récapitulatif des champs de formulaires :

Balise FORM
Balise Attribut Valeur code (exemple) Description Affichage
<form> method POST
GET		 
						<form method="post" action="" enctype="">
						
						</form>
permet de préciser de quelle manière vont circuler les données
C'est important pour la récupération et le traitement PHP.		 -
action traitement.php 
						<form method="post" action="" enctype="">
						
						</form>
permet de préciser sur quelle page nous allons arriver après l'envoi du formulaire. -
enctype multipart/form-data 
						<form method="post" action="" enctype="multipart/form-data">
						
						</form>
permet de préciser le type mime utilisé. -


Balise LABEL
Balise Attribut Valeur code (exemple) Description Affichage
<label> for exemple 
					<label for="exemple">Pseudo :</label>
permet de préciser un nom identique à l'id d'une case de saisie <input> afin de les relier entre eux. Pseudo :


Balise INPUT
<input> name exemple 
					<input type="text" name="nom1">
permet de créer une case de saisie ayant pour nom : nom1.
<input> id exemple 
					<input type="text" name="champ" id="exemple">
permet de créer une case de saisie ayant pour id : exemple.
Cela permet de faire la liaison avec l'attribut for d'un label.
<input> required - 
					<input type="text" name="champ" required>
permet de rendre la saisie sur le champ obligatoire.
<input> maxlength 10 
					<input type="text" name="champ" maxlength="10">
permet de fixer la saisie à 10 caractères maximum.
<input> readonly - 
					<input type="text" name="champ" readonly>
permet de rendre le champ lisible seulement, sans modification possible.
<input> disabled - 
					<input type="text" name="champ" disabled>
permet de desactiver le champ.
<input> list exemple 
					<input type="text" name="ville" list="France">
permet de faire la liaison avec une balise datalist ayant pour id : France.
<input> pattern [0-9]{5} 
					<input type="text" name="cp"  pattern="[0-9]{5}">
expression régulière : 5 chiffres requis entre 0 et 9.
<input> title texte 
					<input type="text" name="cp"  pattern="[0-9]{5}" title="5 chiffres requis entre 0 et 9">
le title permet de personnaliser le message d'erreur dans une infobulle.
<input> value texte 
					<input type="submit" value="mon texte">
l'attribut value permet de saisir du texte dans le champ (ou dans un bouton submit).
<input> placeholder texte 
					<input type="text" placeholder="mon texte">
l'attribut placeholder permet de pré-saisir du texte.
<input> type text 
					<input type="text">
permet de créer une case de saisie.
<input> type password 
					<input type="password" name="nom">
permet de créer une case de saisie avec saisie des caractères cryptés.
<input> type email 
					<input type="email" name="nom">
permet de créer une case de saisie acceptant uniquement la saisie d'une adresse email.
<input> type file 
					<input type="file" name="nom">
permet de créer une case de saisie pour l'upload de fichiers.
<input> type checkbox 
					<p><input type="checkbox" name="choix" checked> Orange</p>
permet de créer une case à cocher.
<input> type radio 
					<p><input type="radio" name="civilite" value="m">Homme</p>
permet de créer une case à cocher unique.
<input> type date 
					<input type="date" name="dateDeNaissance">
permet d'ouvrir un calendrier pour choisir une date.
<input> type range 
					<input type="range" min="1" max="100" name="nombre">
permet d'afficher une jauge.
<input> type tel 
					<input type="tel" name="nombre">
permet d'afficher un clavier numérique sur les smartphones.
<input> type color 
					<input type="color" name="couleur">
permet d'afficher une plalette de couleur.
<input> type hidden 
					<input type="hidden" id="cache" name="cache">
permet d'afficher un champ caché.
<input> type submit 
					<input type="submit">
permet de valider un formulaire.
<input> type reset 
					<input type="reset">
permet de réinitialiser le formulaire.


Balise DATALIST
Balise Attribut Valeur code (exemple) Description Affichage
<datalist> id exemple 
					
					<datalist id="france">
						<option>Paris</option>
						<option>Marseille</option>
						<option>Lyon</option>
					</datalist><br>
permet de proposer une liste de suggestions (l'id de datalist fonctionne avec l'attribut list de la balise input).


Balise SELECT
Balise Attribut Valeur code (exemple) Description Affichage
<select> name exemple 
				<select name="exemple">
				
				</select>
SELECT permet d'afficher une liste déroulante
<select> option exemple 
				<select name="pays">
					<option name="pays" value="fr">France</option>
					<option name="pays" value="it">Italie</option>
					<option name="pays" value="es" selected>Espagne</option>
				</select>
La balise OPTION permet de proposer plusieurs choix à l'intérieur d'un SELECT
<select> optgroup exemple 
				<select name="pays">
					<optgroup label="Europe">
					<option name="pays" value="fr">France</option>
					<option name="pays" value="it">Italie</option>
					<option name="pays" value="es">Espagne</option>
					</optgroup>
				</select>
La balise OPTGROUP permet de classer les options avec l'aide d'une indication écrite
<select> multiple - 
				<select name="pays" multiple>
					<optgroup label="Europe">
					<option name="pays" value="fr">France</option>
					<option name="pays" value="it">Italie</option>
					<option name="pays" value="es">Espagne</option>
					</optgroup>
				</select>
L'attribut MULTIPLE permet d'effectuer plusieurs choix
<select> selected - 
				<select name="pays">
					<optgroup label="Europe">
					<option name="pays" value="fr">France</option>
					<option name="pays" value="it">Italie</option>
					<option name="pays" value="es" selected>Espagne</option>
					</optgroup>
				</select>
L'attribut SELECTED permet de selectionner une option par défaut.


Balise TEXTAREA
Balise Attribut Valeur code (exemple) Description Affichage
<textarea> name exemple 
				<textarea name="exemple">
				
				</textarea>
La balise textarea permet d'afficher une zone de saisie
<textarea> rows 10 
				<textarea name="exemple" rows="10">
				
				</textarea>
L'attribut rows de la balise textarea permet de régler la hauteur
<textarea> cols 10 
				<textarea name="exemple" cols="10">
				
				</textarea>
L'attribut rows de la balise textarea permet de régler la largeur


Allez au chapitre suivant : 17. Donnees Multimedia

HTML CSS

1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web