الرئيسية
اااااا أهلا وسهلا بكم وبجميع الزوار لمنتدانا أحلى أحلام شرفتم 
من طرف 6. Bouton d'option
6.1. Définition
Il serait plus logique de parler de boutons d'option car ils n'ont de sens que s'ils sont plusieurs. Ainsi on parle d'un groupe de boutons d'options.
Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif).
La syntaxe de base est :
<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
</FORM>
Ainsi, si on propose un choix entre, ou le tarif de jour ou le tarif de nuit ou le tarif de week-end, l'exemple devient
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> tarif de jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end
</FORM>
Commentaires
· Vous avez compris que l'attribut name="nom" doit avoir le même nom pour tout le groupe de boutons d'option.
· L'attribut "checked" (optionnel) permet de présélectionner un bouton radio. Ainsi
<INPUT type= "radio" name="tarif" value="jour" checked> tarif de jour
présenterait le bouton radio "tarif de jour" en position présélectionnée.
· Le contenu de l'attribut "value" du bouton retenu sera renvoyé par mailto ou utilisé par le Javascript.
· La balise <INPUT> n'a pas de balise de fin.
· Pour la petite histoire le terme radio ferait référence aux anciens postes de radio sur lesquels le fait d'appuyer sur un bouton désactivait le bouton précédemment enfoncé.
7. Case à cocher
7.1. Définition
La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant, plusieurs choix simultanés peuvent être réalisés.
La syntaxe de base est :
<FORM>
<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">
</FORM>
Comme exemple :
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> glace vanille
<INPUT type="checkbox" name="choix2" value="2"> chantilly
<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud
<INPUT type="checkbox" name="choix4" value="4"> biscuit
</FORM>
7.2. Commentaires
· Les règles pour l'attribut name="nom" sont moins précises que pour les boutons d'option. Vous pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant des noms différents sont nécessaires pour l'utilisation d'un script.
· L'attribut checked (optionnel) permet de présélectionner une case à cocher. Ainsi
<INPUT type="checkbox" name="choix1" value="1" checked > glace vanille
présenterait la case à cocher "glace vanille" en position présélectionnée.
· Le contenu de l'attribut "value" du ou des boutons retenus seront renvoyés par mailto ou utilisé par le Javascript.
· La balise <INPUT> n'a pas de balise de fin.
8. Bouton de commande
8.1. Définition
Avec l'introduction des langages de scripts (Javascript et VBscript) l'usage du bouton de commande présente un intérêt certain. Simplement à titre d'illustration ou pour vous donner envie d'en savoir plus sur le Javascript, je vous propose d'en découvrir la syntaxe :
<FORM>
<INPUT type="button" name="nom" value="texte du bouton" onclick="fonction Javascript">
</FORM>
Voyons un petit exemple.
<FORM>
<INPUT type="button" name="nom" value= "Bouton de test" onclick="alert('Test réussi !')">
</FORM>
En cliquant sur le bouton "Bouton de test", on va déclencher une fonction Javascript élémentaire [mon cher Watson] qui consiste à afficher une petite boite (dite d'alerte) avec le texte "Test réussi!".
8.2. Commentaires
· L'attribut "value" permet d'adapter le texte du bouton à vos souhaits.
· Avec le bouton de commande, il n'est pas nécessaire d'avertir le browser qu'on utilisera du Javascript par une balise du genre <SCRIPT language="javascript">. En effet, le navigateur (compatible Javascript) reconnaît par défaut les fonctions en Javascript. Par contre, si vous utilisez du VBscript, il faudra utiliser l'encodage <INPUT type="button" name="test" value="Pour un test" language="VBscript" OnClick="MsgBox 'Test réussi!'"> (Pour rappel, Javascript par défaut). Mais je m'emporte et je m'éloigne ainsi des objectifs de ce chapitre...
9. Submit et Reset
9.1. Submit
Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans les attributs ACTION et METHOD du tag <FORM>.
la syntaxe Html est :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">
</FORM>
Commentaires
· Les modifications seront peu nombreuses car le bouton Submit a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Submit).
· La balise <INPUT> n'a pas de balise de fin.
9.2. Reset
Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer les valeurs par défaut.
la syntaxe Html est :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">
</FORM>
Commentaires
· Les modifications seront peu nombreuses car le bouton Reset a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Reset).
· La balise <INPUT> n'a pas de balise de fin.
10. Un livre d'or
Une des premières applications des formulaires est celle d'un livre d'or [guestbook]. Vous trouverez ci-après un exemple complet de l'utilisation des formulaires par mailto et qui peut être adapté par chacun pour en faire "son" livre d'or.
N'oubliez pas que mailto ne fonctionne pas sous Microsoft Explorer 3.0 mais seulement sous Explorer 4.0 et Netscape 3.0 et plus. Pour être précis, mailto sous Explorer 3.0 n'entraîne pas de message d'erreur mais ouvre simplement une fenêtre de courrier électronique sans tenir compte du formulaire.
Pour ma part, j'ai retiré la page de livre d'or de mon site car à mon avis, pour un site d'amateur ou d'hobbyiste, une prédéfinition de l'information n'était pas forcément adaptée. Il me semble qu'une libre expression du lecteur (concise ou plus étendue) était de loin plus enrichissante. En outre, certains ne tiennent pas à transmettre leur nom ou leur domicile et souhaitent ne s'en tenir qu'à leur adresse émail.
Voici donc un exemple de livre d'or que vous pouvez adapter :
<FORM method="post" action="mailto:votre_adresse_E-mail">
Votre nom :<BR>
<INPUT type="text" name="nom"><BR>
Votre adresse :<BR>
<TEXTAREA name="adresse" ROWS=2 COLS=35>
</TEXTAREA><BR>
<INPUT type="submit" value="Envoyer">
<INPUT type="reset" value="Annuler">
</FORM>
6.1. Définition
Il serait plus logique de parler de boutons d'option car ils n'ont de sens que s'ils sont plusieurs. Ainsi on parle d'un groupe de boutons d'options.
Les boutons d'option, aussi appelés boutons radio, ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif).
La syntaxe de base est :
<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
</FORM>
Ainsi, si on propose un choix entre, ou le tarif de jour ou le tarif de nuit ou le tarif de week-end, l'exemple devient
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> tarif de jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end
</FORM>
Commentaires
· Vous avez compris que l'attribut name="nom" doit avoir le même nom pour tout le groupe de boutons d'option.
· L'attribut "checked" (optionnel) permet de présélectionner un bouton radio. Ainsi
<INPUT type= "radio" name="tarif" value="jour" checked> tarif de jour
présenterait le bouton radio "tarif de jour" en position présélectionnée.
· Le contenu de l'attribut "value" du bouton retenu sera renvoyé par mailto ou utilisé par le Javascript.
· La balise <INPUT> n'a pas de balise de fin.
· Pour la petite histoire le terme radio ferait référence aux anciens postes de radio sur lesquels le fait d'appuyer sur un bouton désactivait le bouton précédemment enfoncé.
7. Case à cocher
7.1. Définition
La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant, plusieurs choix simultanés peuvent être réalisés.
La syntaxe de base est :
<FORM>
<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">
</FORM>
Comme exemple :
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> glace vanille
<INPUT type="checkbox" name="choix2" value="2"> chantilly
<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud
<INPUT type="checkbox" name="choix4" value="4"> biscuit
</FORM>
7.2. Commentaires
· Les règles pour l'attribut name="nom" sont moins précises que pour les boutons d'option. Vous pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant des noms différents sont nécessaires pour l'utilisation d'un script.
· L'attribut checked (optionnel) permet de présélectionner une case à cocher. Ainsi
<INPUT type="checkbox" name="choix1" value="1" checked > glace vanille
présenterait la case à cocher "glace vanille" en position présélectionnée.
· Le contenu de l'attribut "value" du ou des boutons retenus seront renvoyés par mailto ou utilisé par le Javascript.
· La balise <INPUT> n'a pas de balise de fin.
8. Bouton de commande
8.1. Définition
Avec l'introduction des langages de scripts (Javascript et VBscript) l'usage du bouton de commande présente un intérêt certain. Simplement à titre d'illustration ou pour vous donner envie d'en savoir plus sur le Javascript, je vous propose d'en découvrir la syntaxe :
<FORM>
<INPUT type="button" name="nom" value="texte du bouton" onclick="fonction Javascript">
</FORM>
Voyons un petit exemple.
<FORM>
<INPUT type="button" name="nom" value= "Bouton de test" onclick="alert('Test réussi !')">
</FORM>
En cliquant sur le bouton "Bouton de test", on va déclencher une fonction Javascript élémentaire [mon cher Watson] qui consiste à afficher une petite boite (dite d'alerte) avec le texte "Test réussi!".
8.2. Commentaires
· L'attribut "value" permet d'adapter le texte du bouton à vos souhaits.
· Avec le bouton de commande, il n'est pas nécessaire d'avertir le browser qu'on utilisera du Javascript par une balise du genre <SCRIPT language="javascript">. En effet, le navigateur (compatible Javascript) reconnaît par défaut les fonctions en Javascript. Par contre, si vous utilisez du VBscript, il faudra utiliser l'encodage <INPUT type="button" name="test" value="Pour un test" language="VBscript" OnClick="MsgBox 'Test réussi!'"> (Pour rappel, Javascript par défaut). Mais je m'emporte et je m'éloigne ainsi des objectifs de ce chapitre...
9. Submit et Reset
9.1. Submit
Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans les attributs ACTION et METHOD du tag <FORM>.
la syntaxe Html est :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">
</FORM>
Commentaires
· Les modifications seront peu nombreuses car le bouton Submit a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Submit).
· La balise <INPUT> n'a pas de balise de fin.
9.2. Reset
Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer les valeurs par défaut.
la syntaxe Html est :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">
</FORM>
Commentaires
· Les modifications seront peu nombreuses car le bouton Reset a une fonction Html très spécifique. Seul le texte du bouton pourra être modifié (par défaut Reset).
· La balise <INPUT> n'a pas de balise de fin.
10. Un livre d'or
Une des premières applications des formulaires est celle d'un livre d'or [guestbook]. Vous trouverez ci-après un exemple complet de l'utilisation des formulaires par mailto et qui peut être adapté par chacun pour en faire "son" livre d'or.
N'oubliez pas que mailto ne fonctionne pas sous Microsoft Explorer 3.0 mais seulement sous Explorer 4.0 et Netscape 3.0 et plus. Pour être précis, mailto sous Explorer 3.0 n'entraîne pas de message d'erreur mais ouvre simplement une fenêtre de courrier électronique sans tenir compte du formulaire.
Pour ma part, j'ai retiré la page de livre d'or de mon site car à mon avis, pour un site d'amateur ou d'hobbyiste, une prédéfinition de l'information n'était pas forcément adaptée. Il me semble qu'une libre expression du lecteur (concise ou plus étendue) était de loin plus enrichissante. En outre, certains ne tiennent pas à transmettre leur nom ou leur domicile et souhaitent ne s'en tenir qu'à leur adresse émail.
Voici donc un exemple de livre d'or que vous pouvez adapter :
<FORM method="post" action="mailto:votre_adresse_E-mail">
Votre nom :<BR>
<INPUT type="text" name="nom"><BR>
Votre adresse :<BR>
<TEXTAREA name="adresse" ROWS=2 COLS=35>
</TEXTAREA><BR>
<INPUT type="submit" value="Envoyer">
<INPUT type="reset" value="Annuler">
</FORM>
