Les boutons

Ces types de zones sont soit une spécialisation de l'élément input soit une utilisation de l'élément button.

Quelque soit l'élément qui servira à créer un bouton, l'attribut type définira quelle action exécute le bouton :

l'envoi du formulaire au serveur (soumission),
la réinitialisation des zones du formulaire,
l'exécution de code JavaScript.

Dans la suite, nous présenterons en détail les boutons fait avec l'élément input car pour des raisons historiques (bugs dans les navigateurs) c'est celui qui était le plus utilisé. Les informations données s'appliquent généralement de la même façon aux boutons fait avec l'élément button. La différence entre les 2 éléments tient avant tout à la structure HTML de leur composition.

Parmi ces sortes de bouton, le bouton de soumission est de loin le plus important et incontournable dans un formulaire.

Avec la balise input

Bouton de soumission

Dans une page uniquement en HTML, la présence d'au moins un bouton de soumission dans un formulaire est indispensable pour que les informations saisies puissent être envoyées au serveur.

Il est possibe d'inclure dans le code HTML du code JavaScript qui donnera accès aux éléments du formulaire, permettra de faire des validations et corrections, et d'envoyer les informations sans qu'il y ait besoin de bouton de soumission.
La technique AJAX est une dérivation de cette possibilité. Elle permet en utilisant JavaScript d'envoyer des informations au serveur, d'attendre le retour fait par celui-ci, puis d'afficher ce retour dans une partie de la page Web sans que l'utilisateur ne change de page comme c'est le cas avec la soumission classique d'un formulaire.

Un bouton de soumission est fait avec l'élément input dont l'attribut type a la valeur submit. L'élément input est un élement vide (ie sans balise de fermeture).

Attribut possible	Utilité
`autofocus`	Activé à l'affichage de la page.
`dirname`	Direction du texte saisi.
`disabled`	Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form`	`id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`formaction`	URL à laquelle le formulaire doit être soumis. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut action de l'élément `form` conteneur du bouton est pris en compte.
`formenctype`	Définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut enctype de l'élément `form` conteneur du bouton est pris en compte.
`formmethod`	Définit la méthode utilisée pour envoyer les données au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut method de l'élément `form` conteneur du bouton est pris en compte.
`formnovalidate`	Attribut booléen qui indique si le formulaire doit être validé au moment de sa soumission. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut formnovalidate de l'élément `form` conteneur du bouton est pris en compte.
`name`	Nom de la zone.
`readonly`	Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`value`	Libellé du bouton. Transmise au serveur.

L'attribut value permet de donner le libellé qui apparaitra sur le bouton.
Si cet attribut n'a pas de valeur (ie une chaîne vide), le bouton apparaitra mais sans libellé.
Si cet attribut n'est pas présent, le navigateur mettra un libellé par défaut (dépendant de chaque navigateur).

Cet élément est représenté par défaut sous la forme d'un bouton tel que ceux de l'interface du système d'exploitation utilisé.

Quand on clique sur ce bouton on déclenche l'envoi du contenu du formulaire au serveur (on parle aussi de "soumission de formulaire"). C'est le navigateur qui prend automatiquement en charge la collecte des informations saisies, leur mise en forme pour échange avec le serveur et leur transfert sur le réseau.

Si on veut changer l'apparence du bouton de soumission (ou des autres types de boutons), il faut utiliser des propriétés de style CSS comme dans l'exemple suivant.

Exemple : bouton de soumission

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Bouton de soumission</title>
		<style>
			form {width: 300px; margin: 0 auto}
			label {display:block; margin: 1em 0 0.2em 0}
			.bouton {
				background: url("../exemples/images/key.png")
					no-repeat 40px center #B60A35;
				border-radius: 16px;
				color: #FFFFFF;
				cursor: pointer;
				display: block;
				margin: 2em 0;
				padding: 4px 0 4px 60px;
				text-align: left;
				width: 184px
			}
			.bouton:hover {
				background-color: #31e016;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<form action="dossier/reception.php" method="POST">
			<h3>Bouton de soumission</h3>
		
			<label for="txtL">Login</label>
			<input type="text" name="txtL"
				   size="27" id="txtL">
					
			<label for="txtP">Mot de passe</label>
			<input type="password" name="txtP"
				   size="27" id="txtP">
			
			<input type="submit" 
				   value="S'authentifier"
				   name="btnEnvoi"
				   class="bouton">
		</form>
	</body>
</html>

Dans certaines pages (ou applications), on peut avoir plusieurs boutons de soumission qui enverront tous vers le même "programme" sur le serveur, mais qui en fonction de leur nom (attribut name) déclencheront des traitement différents.
Le cas typique est une gestion de fiche dans une base de données ou aura par exemple un bouton de soumission qui va déclencher un traitement de mise à jour de la fiche (ie une requête SQL UPDATE), et un autre bouton de soumission qui lui va déclencher un traitement de suppression de la fiche (ie une requête SQL DELETE).

Exemple : plusieurs boutons de soumission

Bouton de réinitialisation

Exemple : bouton de réinitialisation

Un bouton de réinitialisation est fait avec l'élément input dont l'attribut type a la valeur reset. L'élément input est un élement vide (ie sans balise de fermeture).

Un bouton de réinitialisation n'est pas vraiment un bouton d'effacement des zones du formulaires. Il remet les zones dans l'état où elles étaient avant que l'utilisateur ne les modifie. Bien sûr, si les zones étaient vides on aura l'impression que l'action du bouton a été d'effacer leur contenu, mais ce n'est pas ce qui est fait en réalité.
Vous pouvez constater dans l'exemple précédent que seule la zone "Prénom" a été "effacée" car sa valeur initiale était une chaîne vide.

Cet élément est représenté par défaut sous la forme d'un bouton tel que ceux de l'interface du système d'exploitation utilisé.
Si on veut changer l'apparence du bouton, il faut utiliser des propriétés de style CSS.

La zone n'a pas besoin d'être nommée avec un attribut name car aucun couple nom / valeur la représentant ne sera envoyé au serveur lors de la soumission du formulaire.

Attribut possible	Utilité
`autofocus`	Activé à l'affichage de la page.
`dirname`	Direction du texte saisi.
`disabled`	Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form`	`id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`name`	Nom de la zone.
`readonly`	Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`value`	Libellé du bouton. Non transmis au serveur.

Bouton de script

Un bouton script est fait avec l'élément input dont l'attribut type a la valeur button. L'élément input est un élement vide (ie sans balise de fermeture).

Cet élément est prévu pour exécuter du code JavaScript lorsqu'il est cliqué.
Si l'événement de cliquer sur le bouton n'est pas rattaché à du code JavaScript, rien ne se passera (cas du 1er bouton de l'exemple précédent).
L'événement clique du 2eme bouton est lui rattaché à du code JavaScript : la fonction faireAction() va changer le contenu du tag H3 de la page.

L'attribut value permet de donner le libellé qui apparaitra sur le bouton.
Si cet attribut n'a pas de valeur (ie une chaîne vide) ou s'il n'est pas présent, le bouton apparaitra mais sans libellé.

La zone n'a pas besoin d'être nommée avec un attribut name car aucun couple nom / valeur la représentant ne sera envoyé au serveur lors de la soumission du formulaire.

Attribut possible	Utilité
`autofocus`	Activé à l'affichage de la page.
`dirname`	Direction du texte saisi.
`disabled`	Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form`	`id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`name`	Nom de la zone.
`readonly`	Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`value`	Libellé du bouton. Non transmis au serveur.

Bouton image

Exemple : bouton image

Un bouton image est fait avec l'élément input dont l'attribut type a la valeur image. L'élément input est un élement vide (ie sans balise de fermeture).

Un bouton image est en réalité un bout de soumission, avec les différences suivantes :

aucun libellé ne sera affiché (l'attribut value s'il est présent sera ignoré)
il n'y a pas besoin de nom (pas d'attribut name)
aucun couple nom / valeur représentant le bouton ne sera envoyé au serveur lors de la soumission du formulaire.

Dans les faits, ce type de bouton est très peu utilisé. Au début du Web, il était concevable d'avoir un élément de ce type pour améliorer graphiquement les formulaires. Actuellement, avec les possibilités des feuilles de style CSS il est devenu obsolète, d'autant plus que rien n'est transmis au serveur le concernant.

Nom	Utilité
`alt`	Alternative textuelle à l'image.
`autofocus`	Activé à l'affichage de la page.
`dirname`	Direction du texte saisi ou affiché.
`disabled`	Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form`	`id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`formaction`	URL à laquelle le formulaire doit être soumis. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut action de l'élément `form` conteneur du bouton est pris en compte.
`formenctype`	Définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut enctype de l'élément `form` conteneur du bouton est pris en compte.
`formmethod`	Définit la méthode utilisée pour envoyer les données au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut method de l'élément `form` conteneur du bouton est pris en compte.
`formnovalidate`	Attribut booléen qui indique si le formulaire doit être validé au moment de sa soumission. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut formnovalidate de l'élément `form` conteneur du bouton est pris en compte.
`height`	Hauteur de l'image.
`name`	Nom de la zone.
`readonly`	Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen.
`src`	URL de l'image.
`width`	Largeur de l'image.

Noter

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (form05.css) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode POST pour envoyer les informations saisies à noter.php.

Les zones du formulaire s'appellent respectivement txtNom, nbrNote, btnNoter, btnInit et btnAbsent.

txtNom est obligatoire, fait 40 de long et a un texte d'aide.
nbrNote varie de 0 à 20 avec un incrément de 1. La valeur par défaut est 10.
btnNoter est un bouton de soumission.
btnInit est un bouton de réinitialisation.
btnAbsent est un bouton qui déclenche l'exécution de la fonction JavaScript ilEstAbsent.

Code à compléter

Une solution possible

Exercice : hacking

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Noter</title>
		<link href="../html08/styles/form05.css" rel="stylesheet">
		<style>
			label {display: block; margin: 1em 0 0.2em 0;}
		</style>
		<script>
function ilEstAbsent() {
	var Z = document.forms[0]["nbrNote"];
	Z.type = "text";
	Z.value = "ABSENT";
}		
		</script>		
	</head>
	<body>
		<form method="POST" action="noter.php">	
			<fieldset>
				<legend>Noter</legend>
				<label for="txtNom">Nom étudiant</label>
				<input type="text" name="txtNom" id="txtNom"
					   size="40" required 
					   placeholder="Obligatoire">
				<label for="nbrNote">Note</label>
				<input type="number" name="nbrNote" value="10"
					   id="nbrNote" min="0" max="20" step="1">
			</fieldset>
			<fieldset>
				<input type="submit" name="btnNoter"
					   value="Noter">
				<input type="reset" name="btnInit"
					   value="Réinitialiser">
				<input type="button" name="btnAbsent"
					   value="Absent" onclick="ilEstAbsent()">
			</fieldset>			
		</form>
	</body>
</html>

Avec la balise button

Structure HTML

La principale différence entre les boutons faits avec l'élément input ou avec l'élément button tient dans la structure HTML utilisée pour réaliser l'un ou l'autre : l'élément button peut contenir du texte et d'autres éléments .
Les éléments qui peuvent être contenus sont des éléments de "contenu phrasé" (essentiellement des éléments de texte, des éléments embarqués et des éléments de formulaire), à l'exclusion de tout élément interactif.

L'attribut type

C'est l'attribut type qui définit l'action réalisée par le bouton :

type="submit" crée un bouton d'envoi du formulaire au serveur (soumission),
type="reset" crée un bouton de réinitialisation des zones du formulaire,
type="button" crée un bouton d'exécution de code JavaScript.

Si l'attribut type n'est pas défini, la valeur par défaut sera submit.

Pour les boutons de type submit il est important de bien préciser le nom du bouton (attribut name) et la valeur associée (attribut value). C'est le couple qui sera envoyé au serveur Web et qui permettra au "programme" récupèrant les informations saisies dans le formulaire de définir le traitement qu'il a à faire.

Exemple : attribut type

Tous les attributs

Attribut possible	Utilité
`autofocus`	Activé à l'affichage de la page.
`disabled`	Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen.
`form`	`id` du formulaire associé si la zone n'est pas un élément `form` ou concerne un autre formulaire que celui dans lequel elle est imbriquée.
`formaction`	URL à laquelle le formulaire doit être soumis. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut action de l'élément `form` conteneur du bouton est pris en compte.
`formenctype`	Définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut enctype de l'élément `form` conteneur du bouton est pris en compte.
`formmethod`	Définit la méthode utilisée pour envoyer les données au serveur. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut method de l'élément `form` conteneur du bouton est pris en compte.
`formnovalidate`	Attribut booléen qui indique si le formulaire doit être validé au moment de sa soumission. Si cet attribut n'est pas présent (c'est généralement le cas), l'attribut formnovalidate de l'élément `form` conteneur du bouton est pris en compte.
`name`	Nom de la zone.
`type`	Définit quelle action est exécutée par le bouton : `submit` pour la soumission du formulaire, `reset` pour la réinitialisation des zones du formulaire, `button` pour l'exécution de code JavaScript.
`value`	Libellé du bouton. Transmise au serveur.

Hacking

Complétez le code HTML pour obtenir le résultat ci-contre.

La feuille de style liée à l'exercice (form05.css) fera automatiquement la mise en forme des éléments fieldset et legend

Le formulaire utilise la méthode POST pour envoyer les informations saisies à hacker.php.

La zone de saisie s'appelle urlSite, elle est obligatoire et affiche un texte d'aide.

Tous les boutons soumettent le formulaire, mais à des URLs différentes. Ils contiennent tous 2 images. L'image principale s'appelle pirate.png, fait 80 pixels sur 70 et se trouve (comme toutes les autres images) dans le dossier images du dossier exemples. Les boutons ont les caractèristiques suivantes :

Nom	Valeur	Url soumission	2ème image	Dimensions
`btnHaut`	haut	`haut.php`	`ciseaux.png`	29 X 30
`btnBas`	bas	`bas.php`	`scie.png`	30 X 30
`btnGauche`	gauche	`gauche.php`	`marteau.png`	30 X 30
`btnDroite`	droite	`droite.php`	`bug.png`	29 X 30

Code à compléter

Une solution possible

Exercice : hacking

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Hacking</title>
		<link href="../html08/styles/form05.css" rel="stylesheet">
		<style>
			input[type="url"] { width: 95%;}
			button { width: 140px;}
			button img {vertical-align: middle;};
		</style>
	</head>
	<body>
		<form method="POST" action="hacker.php">	
			<fieldset>
				<legend>Hacking</legend>
				<label for="urlSite">URL du site à hacker</label>
				<br>
				<input type="url" name="urlSite" 
					   id="urlSite" required
					   placeholder="Url complète SVP">
			</fieldset>
			<fieldset>
				<button type="submit" formaction="haut.php"
						name="btnHaut" value="haut">
					<img src="../exemples/images/pirate.png"
						 width="80" height="70"> 
					<br><strong>Hacker par le haut</strong>
					<img src="../exemples/images/ciseaux.png" 
						 width="29" height="30">
				</button>
				<button type="submit" formaction="bas.php"
						name="btnBas" value="bas">
					<img src="../exemples/images/pirate.png"
						 width="80" height="70"> 
					<br><strong>Hacker par le bas</strong>
					<img src="../exemples/images/scie.png" 
						 width="30" height="30">
				</button>
				<button type="submit" formaction="gauche.php"
						name="btngauche" value="gauche">
					<img src="../exemples/images/pirate.png"
						 width="80" height="70"> 
					<br><strong>Hacker par la gauche</strong>
					<img src="../exemples/images/marteau.png" 
						 width="30" height="30">
				</button>
				<button type="submit" formaction="droite.php"
						name="btnDroite" value="droite">
					<img src="../exemples/images/pirate.png"
						 width="80" height="70"> 
					<br><strong>Hacker par la droite</strong>
					<img src="../exemples/images/bug.png"
						 width="29" height="30">
				</button>
			</fieldset>			
		</form>
	</body>
</html>