SELFHTML

Boutons pour envoyer ou interrompre

Page d'information: vue d'ensemble

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

 vers le bas 

HTML 2.0XHTML 1.0MSIE 1.0Netscape 1.0 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 Autre page d'information 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:

Démonstration - nouvelle fenêtre 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 Chapitre: vue d'ensemble 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 Autre page d'information vérifier les saisies de formulaire.

 vers le hautvers le bas 

HTML 3.2XHTML 1.0MSIE 3.0Netscape 3.0 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:

Démonstration - nouvelle fenêtre 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 Autre page d'information référencer en HTML

 vers le hautvers le bas 

HTML 4.0XHTML 1.0MSIE 4.0Netscape 6.0 Définir des boutons pour envoyer ou interrompre (modernes)

Cela fonctionne exactement comme pour Autre page d'information 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".

 vers le hautvers le bas 

Autres informations

Dans le Chapitre: vue d'ensemble 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:
Autre page d'information référence pour les éléments pour les éléments de formulaire input (<input>)
Autre page d'information référence pour les attributs pour les éléments de formulaire input (<input>)

 vers le haut
page suivante Autre page d'information Formater les formulaires avec les CSS
page précédente Autre page d'information Recherche par tabulateur, raccourcis clavier et mise en grisé
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org