HTML Les formulaires

Les formulaires

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 valuequi 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 quechecked.

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 :

Element 1Element 2Element 3

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 postest 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'attributaction 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é.

Read more »

HTML Les tableaux:

Les tableaux:

tableaux ne sert pas forcément à ranger des données comme cela pourrait porter à le croire. Alors que l'on pourrait penser qu'il ne servent que dans des situations particulières telles que des bilans, des relevés, ou des présentations de chiffres, les tableaux HTML dépassent de loin l'utilisation d'un simple tableau. Pour prendre exemple, la page dans laquelle vous vous trouvez actuellement n'est constituée que de tableaux, ce texte est dans une de ses cellules.

La propriété que révéle tout l'intérêt d'un tableau, c'est que ses bordures peuvent être transparentes. Ils serviront donc à construire un graphisme ou à répartir des éléments de la page, sans pour autant que ça ne se remarque. 

Créer un tableaux :

Un tableaux est défini par la balise <table>. Ensuite vient une arborescence de balises qui vont jusqu'à créer une cellule proprement dîtes. Pour diviser <table>en lignes, on utilisera <tr> et pour diviser enfin en cellules (colonnes), on utilisera<td>. L'arborescence des trois et dans l'ordre donné est obligatoire.

Exemple : 
<table>

<tr>
<td>Ligne 1</td>
</tr>

<tr>
<td>Ligne 2</td>
</tr>

</table>

Résultat :

Ligne 1

Ligne 2

Comme vous le constatez, les deux lignes sont présentes ; bien que le résultat soit pour l'instant le même que si l'on avait mis un <br> aprés Ligne 1. 

Remarque :
Il existe également la balise <th> qui permet de proposer un entête aux cellules (<td>). Les éléments placés dans celle-ci seront mis en valeur par le navigateur, souvent en passant le tout en gras. Cette option n'est pas indispensable, voir inutile et contraignante.

Pour diviser une ligne en plusieurs colonnes, on considére que <tr> représente une ligne qui va contenir différentes colonnes. Celles-ci sont définies par <td> et sont lues de haut en bas pour les afficher de gauche à droite. 

Exemple : 
<table>

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Ligne 1	Ligne 1 bis
Ligne 2	Ligne 2 bis

Faire apparaitre les tableaux :

Pour cela, il suffira d'utiliser logiquement l'attribut border de la balise <table> en lui passant en valeur l'épaisseur de la bordure exprimée en pixels.

Exemple : 
<table border="2">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Ligne 1	Ligne 1 bis
Ligne 2	Ligne 2 bis

Comme vous pouvez le remarquer, le navigateur affiche les bordures comme un relief.

<cellspacing> permet de choisir l'espace entre la bordure externe et la bordure interne. Elle prend l'espace exprimé en pixel comme valeur. 
Dans cet exemple, j'ai volontairement défini un espace (trop) important pour que vous puissiez vous rendre compte. 

Exemple : 
<table border="5" cellspacing="30">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Ligne 1	Ligne 1 bis
Ligne 2	Ligne 2 bis

Dimensionner un tableau :

Pour donner les dimensions d'un tableau, ce sera par logique height (hauteur) etwidth (largeur) qui seront employés. Les tailles s'exprimeront en pixels ou en % par rapport à la fenêtre définie du client (visiteur). Le % étant interdit pour leheight par le W3C. 

Exemple : 
<table border="2" height="80" width="270">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Ligne 1	Ligne 1 bis
Ligne 2	Ligne 2 bis

Remarque :
Si les dimensions d'un tableau ne sont précisées, celui-ci prendra alors la forme de ce qu'il contient et collera donc à l'élément le plus long et à celui le plus haut. S'il ne contient que des éléments extrémements petits, il gardera toujours approximativement un peu moins d'un cm de hauteur.

Remarque :
On peut également définir la taille d'une certaine cellule en utilisant widthdirectement dans le <td> concerné. Attention toutes fois à rester cohérent et à bien surveiller que l'addition du width de la colonne 1 et de celui de la colonne 2 corresponde bien à la taille générale du tableau indiquée dans <table>, ceci en pixel ou en %. Si la taille d'une seule colonne est définie, l'autre prendra comme taille la soustraction logique de la colonne précisée à celle de la taille générale du tableau.

Mise en forme graphique d'un tableau :

Contrôler les ombres, ajouter une couleur de fond, définir celle des bordures...



Ajouter une couleur de fond :

Nous avons vu comment ajouter une couleur d'arrière plan à la page, pour les tableaux, c'est idem ! Faîtes appel à votre mémoire, nous utiliserons bgcolor qui cette fois-ci sera un attribut de <table>. 

Exemple : 
<table border="2" bgcolor="#00FF00">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Ligne 1	Ligne 1 bis
Ligne 2	Ligne 2 bis

Définir la couleur des bordures :

Cet attribut peut se deviner : nous souhaitons mettre une bordure en couleur. Ors, pour créer une bordure, nous avons vu border, et pour la couleur color. La fusion des deux donne donc l'attribut bordercolor.

Exemple : 
<table border="2" bordercolor="#00FF00">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Ligne 1	Ligne 1 bis
Ligne 2	Ligne 2 bis

Contrôler les ombres :

Nous souhaitons maintenant définir seulement la bordure d'ombre (la foncée). En sachant que dans la langue de Sakespare, clair se dit "light" et que sombre se dit "dark", si on souhaite mettre en couleur la bordure foncée du tableaux, il est encore simple de deviner... border + color + dark = bordercolordark. C'est donc l'attribut bordercolordark que nous emploirons ainsi que son binômebordercolorlight pour les bordures claires. 

Exemple : 
<table border="2" bordercolordark="#FF0000" bordercolorlight="#0000FF">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Ligne 1	Ligne 1 bis
Ligne 2	Ligne 2 bis

Remarque :
Tous les attributs de mise en forme vus sont aussi applicables sur une cellule en particulier. Ainsi, vous pourrez définir la couleur de fond d'une certaine ligne en précisant l'attribut bgcolor au <tr> correspondant. Si c'est à une cellule en particulier, une colonne, ce sera à son <td>.

Read more »

HTML Les Liens

Les Liens:

Les liens sont des relais vers d'autres pages web. Ces destinations vers lesquelles "pointent" les liens peuvent être externes à la page web visitée ou internes, c'est-à-dire qu'ils pointent en direction d'un endroit spécifique de la page visitée.

Les liens en HTML ont une syntaxe très simple symbolisée par la balise <a> et</a>

Exemple :

Voici un lien qui pointe vers mon autre site sur Blender, un logiciel 3D :

<a href="http://www.chez.com/honolulu">Un autre site sur Blender</a>

ce qui va afficher : Un autre site sur Blender

Si vous passez votre curseur sur ce lien, il va devenir souligné et va afficher dans la barre d'état (en bas à gauche de votre écran) la destination du lien. A ce sujet, méfiez-vous des liens dont la destination n'est pas visible dans la barre d'état. Cela peut réserver des surprises !

Par défaut, les liens non visités sont colorés (en général en bleu) et soulignés par votre navigateur, et colorés en brunâtre/rougeâtre lorsqu'ils ont été activés... Cette propriété peut être par la suite modifiée grâce aux CSS, que nous verrons plus tard.

Dans <a href="http://www.chez.com/honolulu">Honolulu</a> le lien pointe vers une adresse absolue.

Si dans mon site "http://www.la-verte-prairie.com", j'ai 3 pages : la première "index.html", "jaune.html" pour la deuxième et "rouge.html" pour la troisième. Si je veux que à partir de "index.html", on puisse accéder à "rouge" et "jaune", voici ce que je vais écrire :

<a href="rouge.html">les tulipes de Hollande</a> et
<a href="jaune.html">les épices du soleil</a>

Il s'agit ici d'adresses relatives, c'est-à-dire de pages de votre site qui ont un lien, une relation directe avec votre page "index.html", puisque toutes trois font partie intégrante de l'arborescence de votre site.

Pour les images comportant un lien, la syntaxe sera la même :

<a href="http://www.chez.com/honolulu"><img src="golf.gif"></a>

Un lien interne à la page elle-même sera écrit de la façon suivante :

<a href="#là_haut">on y va</a>

ce qui va afficher : on y va

tandis que la destination qui va accueillir le visiteur sera définie comme suit :
<a name="là_haut">

Autre point, la cible d'arrivée peut être spécifiée. Si vous désirez que votre page s'affiche dans une toute nouvelle fenêtre, votre lien sera formulé ainsi :

<a href="mon_lien.html" target="_blank">mon_lien</a>

Si vous voulez au contraire faire apparaître votre page dans une frame spécifique, votre lien sera le suivant :

<a href="mon_lien.html" target="nom_de_la_frame">mon_lien</a>

Read more »

HTML:Les images

HTML:Les images

Vous devez utiliser la balise <IMG SRC="...">. Cette balise peut être agrémentée d'options de positionnement. 
Les images doivent être au format gif, jpg ou xbm. 

<IMG SRC="pc.gif">

Afin de positionner le texte par rapport à l'image vous pouvez ajouter à la balise, les options d'alignement 

ALIGN=TOP|MIDDLE|BOTTOM|LEFT|RIGHT

<IMG ALIGN=TOP SRC="...">  la flèche est au dessus du texte

<IMG ALIGN=MIDDLE SRC="...">  la flèche est au milieu du texte

<IMG ALIGN=BOTTOM SRC="...">  la flèche est en dessous du texte

<IMG ALIGN=LEFT SRC="..."> 
Le texte va encadrer la flèche
Cette dernière est centrée à gauche

<IMG ALIGN=RIGHT SRC="..."> 
Le texte va encadrer la flèche
Cette dernière est centrée à droite

VSPACE

Cette option permet de définir l'espace vertical que vous allez mettre entre l'image et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
Dans cet exemple le texte précédent au dessus de l'image est plus éloigné que l'exemple sans VSPACE.

<IMG VSPACE=40 SRC="pc.gif">

HSPACE

Cette option permet de définir l'espace horizontal que vous allez mettre entre l'image et le texte. Cette option est souvent utilisée avec LEFT et RIGHT.
Dans cet exemple le texte et la flèche sont plus éloignés de l'image que dans l'exemple sans HSPACE.

<IMG HSPACE=40 SRC="pc.gif">

WIDTH et HEIGHT

Ces options permettent de redéfinir la taille de l'image.
Attention : Si vous augmentez la taille, l'image perdra de sa qualité

<IMG WIDTH=30 HEIGHT=30 SRC="pc.gif">

BORDER

Cette option permet de fai
Cette option permet de faire un cadre autour de l'image plus ou moins large. 

<IMG BORDER=1 SRC="pc.gif">
<IMG BORDER=10 SRC="pc.gif">

Remarques

Parfois ces options ne suffisent pas, ne vous donnent pas entière satisfaction, dans ce cas vous devez utiliser un tableau et positionner chaque élément dans une cellule séparée, l'alignement sera souvent meilleur.
Vous avez deux possibilités pour insérer une image :

• L'image est sur votre compte
• L'image est sur un autre site

Le premier cas utilise de l'espace disque mais très peu de ressource réseau à l'inverse du deuxième cas. Mais attention dans le deuxième cas, si le site distant n'est plus accessible ou si le chemin d'accès vers l'image a été modifié vous vous trouverez avec un ralentissement conséquent lors du chargement de la page et d'une icône  comme celle-ci.

Read more »