Technique Internet de Base HTML avancé

Transcription

1 Objectifs Technique Internet de Base HTML avancé Licence 2 Université Jean Monnet 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 Exemple de tableau Balise Contenu <TABLE></TABLE> le tableau <CAPTION></CAPTION> le titre une ligne (Table Row) <TH></TH> cellules d en-tête (Table Header) <TD></TD> cellules de valeur (Table Data) <TABLE BORDER="1"> <CAPTION> Le titre du tableau </CAPTION> <TH> Titre A1 </TH> <TH> Titre A2 </TH> <TH> Titre A3 </TH> <TH> Titre A4 </TH> <TH> Titre B1 </TH> <TD> Valeur B2 </TD> <TD> Valeur B3 </TD> <TD> Valeur B4 </TD> </TABLE> Titre A1 Titre A2 Titre A3 Titre A4 Titre B1 Valeur B2 Valeur B3 Valeur B4 Le titre du tableau

2 Attributs de la balise TABLE Attributs de la balise TABLE (bis) ALIGN="left center right" permet d aligner le tableau à gauche, au centre, à droite respectivement. BORDER=" " détermine la largeur de la bordure (en pixels). 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éparation internes sont inexistantes, entre lignes, entre colonnes ou partout. WIDTH détermine la largeur du tableau (en pixels ou en pourcentage). BGCOLOR détermine la couleur de l arrière plan. CELLPADDING=" " détermine l espacement entre le contenu des cellules et son encadrement. CELLSPACING=" " détermine l épaisseur de la grille. Attributs de la balise CAPTION Attributs de la balise TR ALIGN="top bottom left right" détermine l alignement. ALIGN="left right center" détermine l alignement VALIGN="top bottom middle" détermine l alignement BGCOLOR détermine la couleur de l arrière plan.

3 Attributs de la balise TD Extension de cellules ALIGN="left right center" détermine l alignement VALIGN="top bottom middle" détermine l alignement 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 à la ligne dans la cellule. COLSPAN="n" la cellule s étend sur n colonnes à droite. ROWSPAN="n" la cellule s étend sur n ligne en bas. <TABLE BORDER=1> <TD ROWSPAN=2>1-1</TD> <TD>1-2</TD> <TD>1-3</TD> <TD>1-4</TD> <TD>2-2</TD> <TD>2-3</TD> <TD>2-4</TD> <TD>3-1</TD> <TD COLSPAN=3>3-2</TD> </TABLE> Qu est ce qu un formulaire? Mécanisme d un formulaire? Formulaire= ensemble d éléments (et leur label) informés par un utilisateur pour être traité. Élément= champs à remplir, cases à cocher, boutons radio, menus, etc. (notamment les commandes) dont la valeur est déterminé par l utilisateur (en saisissant un texte, en sélectionnant les articles d un menu, etc.) Cf./ex_formulaire.html. Les formulaires rendent le web interactif. Les formulaires permettent le commerce électronique (passer commande). 1 L utilisateur renseigne le formulaire (champs à remplir, cases à cocher, boutons radio, menus, etc.) Il peut réinitialiser les valeur (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.

4 Les commandes La liste des commandes Une commande est un élement INPUT qui permet d interagir avec le formulaire. La valeur courante est d abord la valeur initiale puis dé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 les modifications. Une commande peut être associée à un label < LABEL for="prenom" > Prénom : </LABEL> 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 cases à cocher (TYPE="checkbox") Les boutons pour soumettre le formulaire. <INPUT type="submit" value="envoyer"> Les boutons pour réinitialiser les commandes à leur valeur initiale. <INPUT type="reset"> Les boutons poussoirs qui permet d associer des événements des scripts (onabort, onkeydown, onchange, onclick, onsubmit). <INPUT TYPE="button" VALUE="Cliquez ici" onclick="javascript:alert( Hello world )"> Les images cliqueables <INPUT TYPE="image" SRC=" NAME="ujm" onclick="javascript:alert( Hello world )"> Interrupteur marche/arrêt (valeur binaire) CHECKED="yes" permet d être activé par défaut <INPUT type="checkbox" name="majeur" checked="yes"> Majeur <BR>

5 Les boutons «radio»(type="radio") Les champs de texte (TYPE="text password") Analogue aux cases à cocher. Lorsqu ils ont le même nom de commande, ils s excluent mutuellement, i.e. quand l un est mis sur «marche», les autres sont sur «arrêt». <INPUT type="radio" name="groupe" value="1"> Groupe 1<BR> <INPUT type="radio" name="groupe" value="2"> Groupe 2<BR> 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=" " size="30" value="pierre.dupont@univ-st-etienne.fr"><br> Les commandes cachées TYPE="hidden" Les commandes de sélection de fichier TYPE="file" Ils ne sont pas affichés par le navigateur. <INPUT TYPE="hidden" NAME="auteur" VALUE="morge"> Ils permettent de sélectionner un fichier à envoyer. <INPUT TYPE="file" NAME="nomfichier" VALUE="unfichier">

6 Les autres éléments Les menus SELECT Les menus SELECT Les champs de texte TEXTAREA Les boutons BUTTON 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> Les champs de texte TEXTAREA Les boutons BUTTON 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> É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>

7 La balise FORM Regroupe un ensemble de commandes ACTION="url" spécifie l agent de traitement (l URL script ou l URL correspondant à un mél). METHOD="get post" spécifie la méthode employée pour soumettre 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 les fichiers, pour respectivement. <FORM action="mailto:morge@di.unipi.it" 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 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/ou formulaire. Contenu : Tableau (structure, mise en forme) Formulaires (commande et mode de communication). Perspectives : traiter les entrées de l utilisateur (Javascript).