SELFHTML: HTML/XHTML / Formulaires / Boutons pour envoyer ou interrompre

	Boutons pour envoyer ou interrompre
	Définir des boutons pour envoyer ou interrompre (traditionnels) Définir des boutons graphiques pour envoyer Définir des boutons pour envoyer ou interrompre (modernes) Autres informations

Définir des boutons pour envoyer ou interrompre (traditionnels)

HTML met deux boutons standard à disposition pour manier les entrées de formulaires: un bouton pour "envoyer" et un bouton pour "interrompre". Avec le bouton envoyer l'utilisateur peut envoyer le formulaire rempli. Il arrive alors aux données du formulaire ce qui a été établi dans le repère d'ouverture <form> par action= (voir à ce sujet définir des formulaires). Avec le bouton "interrompre", l'utilisateur peut effacer toutes les entrées. Le formulaire n'est pas envoyé. Le formulaire est réinitialisé.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Vous pouvez envoyer ceci!</h1>

<p>La condition préalable est une connexion à Internet.
Aucune donnée n'est sauvegardée, le script CGI qui traite le formulaire sort en fin de compte les données qu'il lit.</p>

<form action="http://actuel.fr.selfhtml.org/cgi-bin/comments.pl">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
 <tr>
  <td align="right">Prénom:</td>
  <td><input name="prenom" type="text" size="30" maxlength="30"></td>
 </tr><tr>
  <td align="right">Nom de famille:</td>
  <td><input name="nom" type="text" size="30" maxlength="40"></td>
 </tr><tr>
  <td align="right" valign="top">Commentaire:</td>
  <td><textarea name="Texte" rows="10" cols="50"></textarea></td>
 </tr><tr>
  <td align="right">Formulaire:</td>
  <td>
   <input type="submit" value=" Envoyer ">
   <input type="reset" value=" Annuler">
  </td>
 </tr>
</table>
</form>

</body>
</html>

Explication:

Avec <input type="submit"> vous définissez le bouton-envoi (input = entrée, submit = confirmer). En cliquant ce bouton, les données du formulaire sont expédiées, et l'adresse mentionnée dans le repère d'ouverture <form> avec l'attribut action= est appelée.
Avec <input type="reset"> vous définissez le bouton-interrompre (reset = initialiser). Les données entrées sont effacées et ne sont pas envoyées.

Avec l'attribut value= vous déterminez l'inscription sur les boutons (value = valeur).

Attention:

À l'aide de JavaScript vous pouvez contrôler les entrées des utilisateurs avant l'envoi du formulaire. Vous trouverez dans cette documentation un exemple d'application pour vérifier les saisies de formulaire.

Définir des boutons graphiques pour envoyer

Vous pouvez à l'intérieur de formulaires, référencer des graphiques et les définir comme boutons d'envoi. Vous pouvez employer de tels boutons graphiques en alternative aux boutons du type <input type="submit">.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<h1>Envoyer commodément!</h1>

<p>La condition préalable est une connexion à Internet. Aucune donnée n'est sauvegardée, le script CGI qui traite le formulaire sort en fin de compte les données qu'il lit.</p>

<form action="http://actuel.fr.selfhtml.org/cgi-bin/comments.pl">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
 <tr>
  <td align="right">Votre adresse électronique:</td>
  <td><input name="courriel" type="text" size="30" maxlength="30"></td>
 </tr><tr>
  <td align="right">Formulaire:</td>
  <td>
   <input type="image" src="envoi.gif">
  </td>
 </tr>
</table>
</form>

</body>
</html>

Explication:

Avec <input type="image"> vous définissez un bouton graphique (input = entrée). Vous déterminez le fichier graphique désiré avec la mention additionnelle src= (src = source = source). Affectez un graphique approprié du type GIF, JPEG ou bien PNG. Dans l'exemple il est supposé que le fichier graphique envoi.gif se trouve dans le même répertoire que le fichier HTML avec le formulaire. Pour l'adressage de graphiques s'appliquent les règles pour référencer en HTML

Définir des boutons pour envoyer ou interrompre (modernes)

Cela fonctionne exactement comme pour définir des boutons pouvant être cliqués (modernes).Là il est expliqué exactement comment définir de tels boutons.

Pour déclarer un tel bouton comme bouton pour "envoyer" (Submit-button), vous devez noter dans le repère d'ouverture, <button> la mention type="submit" . Pour déclarer un tel bouton comme bouton pour "interrompre" (Reset-button), vous devez noter type="reset".

Autres informations

Dans le sommaire de référence HTML vous trouverez des données précisant où l'élément de formulaire décrit ici peut être mis, quels attributs il peut avoir et ce à quoi il faut veiller pour ces différents attributs:
référence pour les éléments pour les éléments de formulaire input (<input>)
référence pour les attributs pour les éléments de formulaire input (<input>)


	Formater les formulaires avec les CSS
	Recherche par tabulateur, raccourcis clavier et mise en grisé

SELFHTML/Aides à la navigation

HTML/XHML

Formulaires