Menu des cours HTML
Il vous intrigue, il vous interpelle, vous en avez besoin, et pour certains vous l'utilisez sans même vous en rendre compte de par un éditeur. Bref, il est temps de mettre les choses au clair et d'apprendre "enfin" l'HTML ... moins courament appellé l'hypertexte markup language.
Nous verrons ici plus précisemment la version 4 de HTML.

Les formulaires

Ils servent un peu à tout est sont le moyen de contact avec le visiteur le plus direct. Ils contribuent aussi souvent à l'interactivité d'un site, mais leur principal rôle reste de permettre à un visiteur de fournir des informations à un script. Comme ce n'est ni un cours JavaScript, ni un cours PHP, nous en resterons à savoir les écrire, et nous verrons dans d'autres cours comment les utiliser à bon essien.

Un formulaire de base avec bouton :

Un formulaire est avant tout délimité par la balise <form>. Tous les champs qui seront inclus dans cette délimitation verront leur valeur envoyée lors de sa validation générale. Tout ceci est flou, voyons déjà un formulaire muni d'un simple bouton.

Comme dit, le tout sera donc délimité par <form>. Un formulaire sans bouton, c'est un formulaire qui ne sert à rien. Le bouton (submit) permet de valider le formulaire dans lequel il est contenu. C'est un <input> (on en retrouvera) et prend obligatoirement comme attribut type qui prendra à son tour différentes valeurs. Pour un bouton, ce sera submit. Un bouton n'est utile que si l'on sait à quoi il sert, il faudra donc préciser l'attribut value qui prendra comme valeur le nom choisi pour le bouton.

Exemple :
<form>
<input type="submit" value="I am a button !" name="Envoi">
</form>


Résultat :
Remarque :
Le bouton submit doit obligatoirement avoir un nom défini par name et il ne peut y avoir qu'un seul et unique bouton de validation par formulaire.
Remarque :
Deux autres type de bouton existent. Affecter button à type donnera un bouton vide qui n'aura aucun ordre (pour submit, il aura l'ordre d'éxecuter le formulaire) et qui servira donc principalement pour des scripts. Affecter reset affichera un bouton qui aura ordre de rétablir le formulaire dans lequel il se trouve ; concrétement, vider tout ce qui a pus être rentré par le visiteur.

Créer un champs de texte :

Pour afficher ce que nous appellerons un champs de texte, nous resterons avec <input> dont sont attribut type prendra cette fois-ci comme valeur text.

Exemple :
<form>
<input type="text"> <br>
<input type="submit" value="Valider" name="Envoi">
</form>


Résultat :



Pour définir la largeur du champs, ce sera le nombre de caractère qu'il représentera qui sera utilisé avec l'attribut size qui prendra ce nombre en valeur. Toutes-fois, même si vous indiquez qu'il fera X caractères, le visiteur qui désirera en entrer plus le pourra. Pour bloquer le nombre de caractères, imposer un nombre maximal, utilisez maxlength qui prendra comme valeur ce nombre maximal.

Le code suivant affiche un champs de texte de largeur 40 caractères dans lequel on ne peut en écrire que 12.

Exemple :
<form>
<input type="text" size="40" maxlength="12"> <br>
<input type="submit" value="Valider" name="Envoi">
</form>


Résultat :


Remarque :
Il est courant pour les champs de texte destinés à l'accés de comptes ou de pages protégées de voir des champs de texte qui affichent des * (ronds) à la place des caractères entrés, ceci dans un but de sécurité. Pour cela, il vous suffit de remplacer text par password (littéralement mot de passe en anglais).
Ainsi, ce champs de texte réagira identiquement à un normal mais visuellement n'affichera pas les caractères entrés :

Créer un champs de texte multiligne :


Il est également possible de rendre un champs de texte multilignes en utilisant <textarea>. Son attribut cols permettra de définir sa largeur de caractères (remplace size) et rows permettra cette fois-ci de définir sa hauteur de lignes. Attention, alors que <input> est une balise orpheline, <textarea> nécessite une fermeture.

Exemple :
<form>
<textarea cols="40" rows="4"></textarea> <br>
<input type="submit" value="Valider" name="Envoi\#>
</form>


Résultat :


Remarque :
Pour tous les <input> vus, il est possible d'entrer un texte par défaut au champs de texte, ce que le visiteur verra dedans à sont "arrivée". Ceci avec l'attribut value qui prendra comme valeur le texte par défaut.

Checkboxs / Boutons radio :

Les checkboxs, littéralement Cases à cocher, sont les petits carrés blanc qui se retrouvent munis d'un signe OK lorsque vous cliquez dessus pour sélectionner l'élément designé par le texte souvent à sa droite.

Encore une fois, ce sera la balise <input> qui sera utilisée en donnant à son attribut type la valeur checkbox. L'attribut value sera dans beaucoup de cas aussi de mise, sa valeur correspondra à ce que représente le checkox, le texte de droite souvent (ceci dans un but d'envoi de données).

Exemple :
<form>
My flowers are :
<input type="checkbox" value="beautiful">Beautiful <br>
<input type="checkbox" value="bad">Bad <br>
<input type="checkbox" value="good">Good <br>
<input type="submit" value="Valider" name="Envoi">
</form>


Résultat :
My flowers are :
Beautiful
Bad
Good
Remarque :
Pour préselectionner un checkbox, il suffira de lui ajouter checked comme attribut. Celui-ci n'attend en principe pas de valeur, mais si vous comptez sur une migration vers XHTML, pensez que celui-ci n'acceptera que checked="checked", même si c'est dénué de sens, il n'existe pas d'autre valeur pour checked que checked.
Dans cet exemple, on sent bien qu'il y a un problème. Alors qu'il serait logique qu'une seule réponse soit possible, on peut en sélectionner plusieurs voir toutes. Dans ce cas, c'est illogique. C'est pourquoi voici les boutons radio qui ne permettent qu'un seul choix.

Ils utilisent encore une fois <input>, et type prendra cette fois-ci la valeur radio. Pour ces éléments, l'attribut name est obligatoire. En effet, tous les boutons radio que vous aurez créé devront porter le même nom (définit par la valeur de name). Si cette condition est respectée, alors un seul bouton radio parmi tous ceux créés pourra être sélectionner.

Exemple :
<form>
My flowers are :
<input type="radio" name="flowers" value="beautiful">Beautiful <br>
<input type="radio" name="flowers" value="bad">Bad <br>
<input type="radio" name="flowers" value="good">Good <br>
<input type="submit" value="Valider" name="Envoi">
</form>


Résultat :
My flowers are :
Beautiful
Bad
Good

Créer une liste d'options :

Pour ce faire, nous utiliserons la balise <select>. Celle-ci renfermera les balises <option> qui contiendront les éléments de la liste.

Exemple :
<form>
<select>

<option>Element 1</option>
<option>Element 2</option>
<option>Element 3</option>

</select>
</form>


Résultat :

Remarque :
Ajouter systèmatiquement l'attribut value à <option> est une bonne habitude à prendre. Dans celui-ci, vous indiquerez ce que représente chaque élément de la liste.


Aller plus loin :

En dehors des scripts, les listes d'options peuvent être converties en menu de reroutage. Celui-ci permettra d'amener le visiteur à une certaine page en le laissant choisir sa destination dans la liste d'option. Pour cela, JavaScript intervient exeptionnellement.

Dans le code suivant, il suffira juste de mettre la destination choisie en valeur de l'attribut value de la balise <option> de l'élément concerné.

Exemple :
<html>

<head>
<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>

<body>
<select onChange="MM_jumpMenu('parent',this,0)">
<option value="http://www.jsand.net/Element_un.htm">Element1</option>
<option value="http://www.jsand.net/Element_deux.htm">Element2</option>
<option value="http://www.jsand.net/Element_trois.htm">Element3</option>
</select>
</body>

</html>

Utiliser mailto dans un formulaire :

Les formulaires servent principalement dans le cadre de scripts. Au niveau pur de HTML, nous pouvons voir son utilisation avec mailto déjà vu dans un autre chapitre. Celui-ci permet donc l'envoi de mail, mais grâce aux formulaire avec VOS champs et options.

Reprenons l'exemple des checkbox pour étudier le principe (on ajoutera un attribut enctype ayant comme valeur text/plain à la balise form) :

Exemple :
<form enctype="text/plain">
My flowers are :
<input type="checkbox" value="beautiful">Beautiful <br>
<input type="checkbox" value="bad">Bad <br>
<input type="checkbox" value="good">Good <br>
<input type="submit" value="Valider" name="Envoi">
</form>


Résultat :
My flowers are :
Beautiful
Bad
Good


Pour utiliser mailto dans ce script, il faut auparavant paramétrer <form> en lui passant le courant attribut action qui prendra dans ce cas une valeur ayant la syntaxe mailto:myflowers@beautiful.are. Vous remplacerez bien entendu l'adresse mail ici bidon par la votre. En plus de cela, l'attribut method prenant la valeur post est ajouté.

Exemple :
<form action="mailto:myflowers@beautiful.are" method="post" enctype="text/plain">

Ensuite, il est necessaire que chaque checkbox ait un nom définis dans la valeur de l'attribut name de <input>. Pareil pour ce qui est de l'attribut value qui devra être présent dans chaque <input>, bien qu'il ne serve pas à grand chose dans le cas des checkboxs. Mettez "OK" par exemple.

Exemple :
<form action="mailto:myflowers@beautiful.are" method="post" enctype="text/plain">

My flowers are : <br>
<input type="checkbox" name="beautiful" value="OK">Beautiful <br>
<input type="checkbox" name="bad" value="OK">Bad <br>
<input type="checkbox" name="good" value="OK">Good <br>
<br>
Vos commentaires : <br>
<input type="text" name="commentaires" size="35"> <br>
<br>
<input type="submit" value="Valider" name="Envoi">

</form>


Voyons maintenant le contenu du mail que recevra destinataire (myflowers@beautiful.are) :

Résultat :
beautiful=OK
bad=OK
commentaires=Coucou

Dans ce rapport, on peut savoir que l'utilisateur a coché le checkbox "beautiful" ainsi que "bad". Le checkbox "good" lui n'a pas été choisi, il n'apparait donc pas dans le rapport. L'utilisateur a également entré "Coucou" dans le champs de texte "commentaires" (rajouté à votre insu ;).

Si cela avait été une liste de boutons radio (celle donnée dans l'exemple plus haut) et que l'utilisateur n'aurait coché que le bouton "good" et entré "Coucou" dans le champs de texte :

Résultat :
flowers=good
commentaires=Coucou
Remarque :
Pour que le formulaire puisse se valider avec la touche Entrée, il faut impérativement que l'action du bouton de validation soit précisé dans l'attribut action de <form>. Si l'action est un javascript (appellé avec un onClick au bouton), il faudra alors préfixer l'action dans action de "javascript:". Si le bouton est un submit (validation simple), c'est l'URL de la page de destination qui devra être précisé.
Vous voilà prêt à devenir un webmaster respectable, bonne chance, bonne évolution et à vous de goûter les plaisirs et le bonheur de la programmation !
Au plaisir de vous revoir surement sur les forums ou sur d'autres tutos.

Bye !

Ju.



<< Précédent - Sommaire - Suivant >>

Un problème ? Quelque chose que vous n'avez pas saisit ?
Posez vos questions sur les forums(+) !


Toute reproduction interdite - Intégralement écrits par le Webmaster
Valid XHTML 1.0! Valid CSS!
By JSAND [All right reserved] - Windows est une marque de Microsoft Corporation
Toute copie compléte comme partielle sans autorisation est passible d'amende - Avertissements