Technique Internet de Base HTML avancégroups.di.unipi.it/~morge/TIB/morge09tib2cm.pdf · Introduction Tableau Formulaire Conclusion Technique Internet de Base HTML avancé Maxime

Introduction Tableau Formulaire Conclusion

Technique Internet de Base

HTML avancé

Maxime Morge [email protected]

Licence 2

Université Jean Monnet

2008-2009

Maxime Morge TIB HTML


Objectifs

Création de tableau complexe

Mise en forme de tableau

Création de formulaire



Tableau= élément structuré et divisé en lignes et en colonnes

Balise Contenu<TABLE></TABLE> le tableau

<CAPTION></CAPTION> le titre<TR></TR> une ligne (Table Row)<TH></TH> cellules d’en-tête (Table Header)<TD></TD> cellules de valeur (Table Data)



Exemple de tableau

<TABLE BORDER="1">

<CAPTION> Le titre du tableau </CAPTION>

<TR>

<TH> Titre A1 </TH>

<TH> Titre A2 </TH>

<TH> Titre A3 </TH>

<TH> Titre A4 </TH>

</TR>

<TR>

<TH> Titre B1 </TH>

<TD> Valeur B2 </TD>



</TR>

</TABLE>

Titre A1 Titre A2 Titre A3 Titre A4

Titre B1 Valeur B2 Valeur B3 Valeur B4

Le titre du tableau



Attributs de la balise TABLE

ALIGN="left|center|right" permet d’aligner le tableau àgauche, au centre, à droite respectivement.

BORDER="0|1|2|..." détermine la largeur de la bordure (enpixels).

FRAME="void|above|below|hsides|vsides|box"

détermine si l’encadrement du tableau est inexistant,au-dessus, au-dessous, horizontal, vertical ou partout.

RULES="none|rows|cols|all" détermine si les séparationinternes sont inexistantes, entre lignes, entre colonnes oupartout.



Attributs de la balise TABLE (bis)

WIDTH détermine la largeur du tableau (en pixels ou enpourcentage).

BGCOLOR détermine la couleur de l’arrière plan.

CELLPADDING="0|1|2|..." détermine l’espacement entre lecontenu des cellules et son encadrement.

CELLSPACING="0|1|2|..." détermine l’épaisseur de la grille.



Attributs de la balise CAPTION

ALIGN="top|bottom|left|right" détermine l’alignement.



Attributs de la balise TR

ALIGN="left|right|center" détermine l’alignementhorizontal.

VALIGN="top|bottom|middle" détermine l’alignementhorizontal.




Attributs de la balise TD

ALIGN="left|right|center" détermine l’alignementhorizontal.

VALIGN="top|bottom|middle" détermine l’alignementhorizontal.


HEIGHT détermine la hauteur de la cellule (en pixels).

NOWRAP (sans valeur) détermine qu’il n’y a pas de retour à laligne dans la cellule.

COLSPAN="n" la cellule s’étend sur n colonnes à droite.

ROWSPAN="n" la cellule s’étend sur n ligne en bas.



Extension de cellules

<TABLE BORDER=1>

<TR>

<TD ROWSPAN=2>1-1</TD> <TD>1-2</TD> <TD>1-3</TD>

<TD>1-4</TD>

</TR>

<TR>

<TD>2-2</TD> <TD>2-3</TD> <TD>2-4</TD>

</TR>

<TR> <TD>3-1</TD> <TD COLSPAN=3>3-2</TD>

</TR>

</TABLE>

1-11-2 1-3 1-42-2 2-3 2-4

3-1 3-2Maxime Morge TIB HTML


Qu’est ce qu’un formulaire ?

Formulaire= ensemble d’éléments (et leur label) informés parun utilisateur pour être traité.

Élément= champs à remplir, cases à cocher, boutons radio,menus, etc. (notamment les commandes) dont la valeur estdéterminé par l’utilisateur (en saisissant un texte, ensélectionnant les articles d’un menu, etc.)

Cf ./ex_formulaire.html.

Les formulaires rendent le web interactif.

Les formulaires permettent le commerce électronique (passercommande).


./ex_formulaire.html


Mécanisme d’un formulaire ?

1 L’utilisateur renseigne le formulaire (champs à remplir, cases àcocher, boutons radio, menus, etc.) Il peut réinitialiser lesvaleur (reset).

2 L’utilisateur soumet le formulaire (submit).3 Le navigateur transmet les données (inputs) au serveur web.4 Le serveur web traitent les données et envoie une réponse au

client.



Les commandes

Une commande est un élement INPUT qui permet d’interagiravec le formulaire.

La valeur courante est d’abord la valeur initiale puisdéterminée par les actions de l’utilisateur.Les attributs sont :

NAME, le nom de la commande ;VALUE, la valeur par défaut de la commande ;TYPE, le type de la commande ;DISABLED, attribut sans valeur pour désactiver la commande. ;READONLY, attribut sans valeur pour empêcher lesmodifications.

Une commande peut être associée à un label

< LABEL for="prenom" > Prénom : </LABEL>



La liste des commandes

Les boutons (TYPE="submit|reset|button|image")

Les cases à cocher (TYPE="checkbox")

Les boutons « radio »(TYPE="radio)

Les champs de texte (TYPE="text|password")

Les commandes cachées (TYPE="hidden")

Les commandes de sélection de fichier (TYPE="file")



Les boutons

Les boutons pour soumettre le formulaire.

<INPUT type="submit" value="Envoyer">

Les boutons pour réinitialiser les commandes à leur valeurinitiale.

<INPUT type="reset">

Les boutons poussoirs qui permet d’associer des événementsdes scripts (onAbort, onKeydown, onChange, onClick,onSubmit).

<INPUT TYPE="button" VALUE="Cliquez ici"

onclick="Javascript:alert(’Hello world’)">

Les images cliqueables

<INPUT TYPE="image"

SRC="http://.../logo_bleum.gif"

NAME="ujm" onclick="Javascript:alert(’Hello world’)">



Les cases à cocher (TYPE="checkbox")

Interrupteur marche/arrêt (valeur binaire)

CHECKED="yes" permet d’être activé par défaut

<INPUT type="checkbox" name="majeur" checked="yes">

Majeur

<BR>



Les boutons « radio »(TYPE="radio")

Analogue aux cases à cocher.

Lorsqu’ils ont le même nom de commande, ils s’excluentmutuellement, i.e. quand l’un est mis sur « marche », lesautres sont sur « arrêt ».

<INPUT type="radio" name="groupe" value="1">

Groupe 1<BR>

<INPUT type="radio" name="groupe" value="2">

Groupe 2<BR>



Les champs de texte (TYPE="text|password")

Texte à saisir caché ou non dont les attributs sont :

SIZE, le nombre de caractères affichés ;

MAXSIZE, le nombre de caractères considérés.

<INPUT type="text" id="email" size="30"

value="[email protected]"><BR>



Les commandes cachées TYPE="hidden"

Ils ne sont pas affichés par le navigateur.

<INPUT TYPE="hidden" NAME="auteur" VALUE="morge">



Les commandes de sélection de fichier TYPE="file"

Ils permettent de sélectionner un fichier à envoyer.

<INPUT TYPE="file" NAME="nomfichier" VALUE="unfichier">



Les autres éléments

Les menus SELECT

Les champs de texte TEXTAREA

Les boutons BUTTON



Les menus SELECT

Question à choix multiples avec pour attributs :NAME, le nom de la commande ;SIZE, nombre de choix possible ;MULTIPLE (sans valeur), permet une sélection multiple.

OPTION, choix avec pour attribut :VALUE, la valeur ;SELECTED (sans valeur), le choix par défaut.

<SELECT NAME="tp" SIZE="3" MULTIPLE>

<OPTION VALUE="tp1">TP1</OPTION>

<OPTION VALUE="tp2" SELECTED>TP2</OPTION>



</SELECT>



Les champs de texte TEXTAREA

Boîte de saisie dont les attributs sont :READONLY, le texte ne peut pas être effacé ;NAME, nom du texte ;ROWS, nombre de lignes ;COLS, nombre de colonnes.

<TEXTAREA NAME="commentaire" ROWS="5" COLS="60">

Dans ce TP ont été traité les questions...

</TEXTAREA>



Les boutons BUTTON

Élément cliqueable dont les attributs sont :NAME, nom du texte ;TYPE="button|submit|reset", l’action ;VALUE, valeur par défaut (si TYPE="button").

<BUTTON TYPE="reset" NAME="newtp">

<B>Soumettre un nouveau TP</B>

</BUTTON>



La balise FORM

Regroupe un ensemble de commandes

ACTION="url" spécifie l’agent de traitement (l’URL script oul’URL correspondant à un mél).METHOD="get|post" spécifie la méthode employée poursoumettre le jeu des données de formulaire :

get, les données sont concaténés à l’URL ;post, les données sont dans le corps de la requête.

ENCTYPE="application/x-www-form-urlencoded|

multipart/form-data| plain/text" par défaut, pour lesfichiers, pour email respectivement.

<FORM action="mailto:[email protected]" method="post"

enctype="plain/text">

...

</FORM>



L’élément FORM (bis)

= associe nom et valeur

& sépare chaque paire nom/valeur

+ remplace les espaces

% précèdente les caractères spéciaux

http://www.morge.org/script.php?auteur=morge&

prenom=Pierre&nom=Dupont&passe=toto&tp=tp1&tp=tp2&groupe=1

&final=on&commentaire=Dans+ce+TP+ont+%E9t%E9+trait%E9+les+

questions+1%2C2+et+3.%0D%0A++++++&

nomfichier=TODO.txt



À emporter

Objectifs : Création d’une page web avec un tableau et/ouformulaire.Contenu :

Tableau (structure, mise en forme)Formulaires (commande et mode de communication).

Perspectives : traiter les entrées de l’utilisateur (Javascript).


Documents

Technique Internet de Base HTML avancégroups.di.unipi.it/~morge/TIB/morge09tib2cm.pdf · Introduction Tableau Formulaire Conclusion Technique Internet de Base HTML avancé Maxime