Technique Internet de Base HTML avancégroups.di.unipi.it/~morge/TIB/morge09tib2cm.pdf ·...
Transcript of 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 Morge [email protected]
Licence 2
Université Jean Monnet
2008-2009
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
Objectifs
Création de tableau complexe
Mise en forme de tableau
Création de formulaire
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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)
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>
Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4
Le titre du tableau
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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.
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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.
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
Attributs de la balise CAPTION
ALIGN="top|bottom|left|right" détermine l’alignement.
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
Attributs de la balise TR
ALIGN="left|right|center" détermine l’alignementhorizontal.
VALIGN="top|bottom|middle" détermine l’alignementhorizontal.
BGCOLOR détermine la couleur de l’arrière plan.
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
Attributs de la balise TD
ALIGN="left|right|center" détermine l’alignementhorizontal.
VALIGN="top|bottom|middle" détermine l’alignementhorizontal.
BGCOLOR détermine la couleur de l’arrière plan.
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.
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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
Introduction Tableau Formulaire Conclusion
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).
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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.
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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")
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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’)">
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
Les commandes cachées TYPE="hidden"
Ils ne sont pas affichés par le navigateur.
<INPUT TYPE="hidden" NAME="auteur" VALUE="morge">
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
Les commandes de sélection de fichier TYPE="file"
Ils permettent de sélectionner un fichier à envoyer.
<INPUT TYPE="file" NAME="nomfichier" VALUE="unfichier">
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
Les autres éléments
Les menus SELECT
Les champs de texte TEXTAREA
Les boutons BUTTON
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
<OPTION VALUE="tp3">TP3</OPTION>
<OPTION VALUE="tp4">TP4</OPTION>
</SELECT>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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>
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
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
Maxime Morge TIB HTML
Introduction Tableau Formulaire Conclusion
À 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).
Maxime Morge TIB HTML