/ MESTADI Walid elhammoudi@gmail.
com /
26/11/2016 1
[Link]@[Link]
Développement Web : Plan
26/11/2016 elhammoudi@[Link] /4
20
Développement Web : Langage HTML
HTML est le langage universel utilisé pour communiquer sur
le Web. L’information sera ainsi transportée sur le réseau
(éventuellement sur Internet), pour aboutir sur un poste client
(Micro-ordinateur) puis interpréter grâce à un programme appelé
navigateur ou browser.
Langage HTML Universel Internet Navigateur
26/11/2016 elhammoudi@[Link] 4
Développement Web : Langage HTML
Le logiciel que l'on appelle un browser permet de surfer sur le
Net et d'afficher sur l’écran les "pages" qu'il a interceptées. Il existe
différents browser, dont les plus connus sont Netscape Navigator et
Internet Explorer de Microsoft mais il en existe beaucoup d'autres.
Chaque browser a sa propre façon de travailler.
26/11/2016 elhammoudi@[Link] 5
Développement Web : Langage HTML
HTML est un langage universel qui s'adapte à toutes les plate-
formes que ce soit Windows, Macintoch, Unix, OS/2...
En plus du texte, il faut inclure des instructions pour le browser de
celui-ci. Ces instructions seront différenciées du texte par les signes <
et > par exemple <HTML>. Ces "instructions « s'appellent des tags
ou des balises.
26/11/2016 elhammoudi@[Link] 6
Développement Web : Langage HTML
Une page HTML était en fait un fichier texte, enrichi d'un certain
nombre de codes ou commandes, appelés balises.
Ces balises sont toujours exprimées sous la forme d'un mot clé,
encadré par les caractères "<" et ">". Exemple : <BALISE>.
Pour la plupart des balises, il existe une balise de fermeture
associée, reprenant le même nom, mais précédée du caractère "/".
La commande spécifiée s'applique donc uniquement au texte situé
entre le couple de balises ainsi formé
26/11/2016 elhammoudi@[Link] 7
Développement Web : Langage HTML
Exemple:
Encadré par les caractères "<" et ">"
• Entre ces deux balises, on définit deux
<HTML> zones :
... BALISE • l'en-tête, spécifié par les commandes
<HEAD> et </HEAD>,
</HTML>
• ainsi que le corps, délimité par: <BODY>
et </BODY>.
Balise de fermeture
26/11/2016 elhammoudi@[Link] 8
Développement Web : Langage HTML
• Entre ces deux balises, on définit deux zones :
• l'en-tête, spécifié par les commandes <HEAD>
et </HEAD>,
• ainsi que le corps, délimité par: <BODY> et
</BODY>.
26/11/2016 elhammoudi@[Link] 9
Développement Web : Langage HTML
Structure de base
<HTML>
<HEAD>
... L'en-tête
</HEAD>
<BODY>
... Corps
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 10
Développement Web : Langage HTML
Structure de base
<HTML>
On ne met généralement qu'une
<HEAD> seule information, le Titre du
... L'en-tête document qui sera affiché en haut
</HEAD> de la fenêtre du navigateur
<BODY> Le Titre est indiqué entre les
... Corps balises <TITLE> et </TITLE>
</BODY> Exemple
</HTML> <TITLE>Ceci est le Titre</TITLE>.
26/11/2016 elhammoudi@[Link] 11
Développement Web : Langage HTML
Structure de base
<HTML>
On met tout le document à afficher
<HEAD> (texte, définition des images etc.)
... L'en-tête Remarque:
</HEAD> – Signalons l'existence d'une balise
de commentaires, qui peut être
<BODY> utilisée partout dans les
... Corps documents HTML, définie comme
</BODY> suit :
– <!-- Ceci est un commentaire --!>.
</HTML>
26/11/2016 elhammoudi@[Link] 12
Développement Web : Langage HTML
Structure générale d'une page HTML
<HTML>
<HEAD>
<TITLE>Titre du document</TITLE>
</HEAD>
<BODY>
...
...
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 13
Développement Web : Langage HTML
Récapitulatif
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
<HEAD> Ceci est le début de la zone d'en-tête (prologue au document proprement
dit contenant des informations destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du Titre de la page.
</TITLE> Ceci est la fin du Titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement dit.
26/11/2016 elhammoudi@[Link] 14
Développement Web : Langage HTML
Traitement du texte
Les balises élémentaires
Les couleurs
Les titres
Les caractères spéciaux
26/11/2016 elhammoudi@[Link] 15
Développement Web : Langage HTML
Les balises élémentaires
Gras [Bold] <B>...</B> Début et fin de zone en gras
Italique [Italic] <I>...</I> Début et fin de zone en
italique
Taille de caractère [Font size] <FONT SIZE=?>...</FON Début et fin de zone avec
T> cette taillea
Couleur de [Font color] <FONT COLOR="#$$$$$ Début et fin de zone en
caractère $"></FONT> couleur
A la ligne [Line break] <BR> Aller à la ligne
Commentaires [Comments] <!-- *** --> Ne pas afficher
Paragraphe [Paragraph] <P> Début d'un nouveau
paragraphe
Centrage [Center] <CENTER></CENTER> Centrer
26/11/2016 elhammoudi@[Link] 16
Développement Web : Langage HTML
Exemple
<HTML>
<HEAD>
<TITLE> Titre du document</TITLE>
</HEAD>
<BODY>
texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<!--C'est fini-->
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 17
Développement Web : Langage HTML
Remarque
Il n'est pas rare d'utiliser plusieurs balises pour un même élément
de texte. Il faut veiller à bien les imbriquer. Ainsi <B><I>...</I></B> est
correct et <B><I>...</B></I> risque de vous créer des ennuis.
La taille dans <FONT SIZE=?> peut être indiquée avec un nombre de
1 à 7. La valeur par défaut étant 3
26/11/2016 elhammoudi@[Link] 18
Développement Web : Langage HTML
Couleurs en HTML
Chaque élément de couleur (Rouge, Vert ou Bleu) est codé en HTML
sur 8 bit en hexadécimal soit de 00 à FF (de 0 à 255) Ainsi FF de
rouge, FF de Vert et FF de Bleu, donne du Blanc
Quelques Code de
couleurs basiques
26/11/2016 elhammoudi@[Link] 19
Développement Web : Langage HTML
26/11/2016 elhammoudi@[Link] 20
Développement Web : Langage HTML
<HTML> Exemple
<HEAD>
<TITLE> Titre du document </TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT><BR>
<FONT COLOR="#00FF00">en Vert</FONT><BR>
<FONT COLOR="#FFFFFF">en blanc</FONT><BR>
<FONT COLOR="#8000FF">en violet</FONT><BR>
<FONT COLOR="#FF0000">en rouge</FONT><BR>
<FONT COLOR="#FFFF00">en jaune</FONT><BR>
<FONT COLOR="#C0C0C0">en gris clair</FONT><BR>
<FONT COLOR="#000000">en noir</FONT><BR>
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 21
Développement Web : Langage HTML
Les Titres
Pour donner une taille aux caractères d’un titre dans un
texte avec un saut de ligne à la fin, en utilise la balise
<Hn></Hn>
Ou n peut prendre une valeur comprise entre 1 et 6 (dans
l’ordre décroissante des tailles)
26/11/2016 elhammoudi@[Link] 22
Développement Web : Langage HTML
<HTML> Les Titres
<HEAD>
<TITLE> Titre du document
</TITLE>
</HEAD>
<BODY>
texte simple<BR>
<B><I><H1>texte en gras et en italique et H1</H1></I></B>
<B><I><H2>texte en gras et en italique et H2</H2></I></B>
<B><I><H3>texte en gras et en italique et H3</H3></I></B>
<B><I><H4>texte en gras et en italique et H4</H4></I></B>
<B><I><H5>texte en gras et en italique et H5</H5></I></B>
<B><I><H6>texte en gras et en italique et H6</H6></I></B>
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 23
Développement Web : Langage HTML
Les caractères spéciaux
Les navigateurs ne reconnaissent pas les caractères spéciaux.
Heureusement chaque caractère possède une abréviation
(ENTITY) permettant de le coder.
26/11/2016 elhammoudi@[Link] 24
Développement Web : Langage HTML
Voici quelque exemple
Espace
© ©
< <
> >
E é
E è
26/11/2016 elhammoudi@[Link] 25
Développement Web : Langage HTML
Listes
Les listes numérotées
Les listes à puces
26/11/2016 elhammoudi@[Link] 26
Développement Web : Langage HTML
Les listes numérotées
Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles
chaque élément de la liste est précédé de la balise <LI>.
<HTML>
<HEAD>
<TITLE> Titre du document
</TITLE>
</HEAD>
<BODY>texte simple<BR>
<OL>
<LI> élément 1,
<LI> élément 2,
<LI> élément 3.
</OL>
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 27
Développement Web : Langage HTML
Les listes à puces
Une liste non numérotée est délimitée par les balises <UL> et </UL>
entre lesquelles chaque élément de la liste est précédé de la balise
<LI>. <HTML>
<HEAD>
<TITLE> Titre du document
</TITLE>
</HEAD>
<BODY>texte simple<BR>
<UL>
<LI> élément 1,
<LI> élément 2,
<LI> élément 3.
</UL>
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 28
Développement Web : Langage HTML
Remarque
Notez qu'il est possible d'imbriquer des listes du même type ou de types différents
texte simple<BR>
<UL>
<LI> élément 1,
<OL>
<LI>sous-élément 1A,
<LI>sous-élément 1B.
</OL>
<LI> élement 2,
<OL>
<LI>sous-élément 2A,
<LI>sous-élément 2B.
</OL>
<LI> élément 3.
</UL>
26/11/2016 elhammoudi@[Link] 29
Développement Web : Langage HTML
Liste de définitions
Il est possible de définir des listes spéciales, permettant de faire des glossaires, en
utilisant les balises <DL> et </DL> pour encadrer la liste, <DT> pour spécifier un
élément et <DD> pour indiquer sa définition.
<HTML>
<HEAD>
<TITLE> Titre du document
</TITLE>
</HEAD>
<BODY>texte simple<BR>
<DL>
<DT>HTML<DD>HyperText Markup Language
<DT>HTTP<DD>HyperText Transfert Protocol
</DL>
</BODY>
</HTML>
26/11/2016 elhammoudi@[Link] 30
Développement Web : Langage HTML
Les attributs
Type="type" UL & OL Spécifie l'aspect des marqueurs
des éléments
Start="nombre" OL commence la numérotation à la
valeur spécifiée.
Value="nombre" LI spécifie le nombre de l'élément.
Compact OL & UL rendu plus compact de la liste
26/11/2016 elhammoudi@[Link] 31
Développement Web : Langage HTML
Type des listes
<UL type="disc "> Puces rondes pleine
<UL type="circle"> Puces rondes creuses
<UL type="square"> Puces carrées
<OL type=1> (1,2,3)
<OL type=a> (a,b,c)
<OL type=A> (A,B,C)
<OL type=i> (i,ii,iii)
<OL type=I> (I,II,III)
26/11/2016 elhammoudi@[Link] 32
Développement Web : Langage HTML
26/11/2016 elhammoudi@[Link] 33
Développement Web : Langage HTML
Tableau
Grace à la balise <table border> avec une grille. Les contenus de chaque cellule
sont saisis ligne par ligne.
La balise <tr> détermine les lignes
La balise <td> les contenus des cellules.
La balise <th> le titre
26/11/2016 elhammoudi@[Link] 34
Développement Web : Langage HTML
26/11/2016 elhammoudi@[Link] 35
Développement Web : Langage HTML
Formatage de colonne
La commande colspan permet d’indiquer le nombre de colonnes
sur lesquelles la cellule s’étend.
La commande rowspan permet d’indiquer le nombre de lignes sur
lesquelles la cellule s’étend.
26/11/2016 elhammoudi@[Link] 36
Développement Web : Langage HTML
colspan
26/11/2016 elhammoudi@[Link] 37
Développement Web : Langage HTML
rowspan
26/11/2016 elhammoudi@[Link] 38
Développement Web : Langage HTML
Les liens Hypertexte
HTML (Hyper Text Markup Language) est un langage hypertexte (et
hypergraphique) qui permet en cliquant sur un mot généralement
souligné (ou une image) de passer vers :
– un autre endroit du document.
– un autre fichier HTML situé sur l’ordinateur.
– un autre ordinateur situé sur le Web.
Ce système d'hypertexte permet de page en page et qui constituent
l'essence des documents HTML.
26/11/2016 elhammoudi@[Link] 39
Développement Web : Langage HTML
Les liens
La syntaxe de ces liens entre plusieurs pages est :
<A HREF="URL ou adresse">...</A>
Il existe principalement deux type de lien à savoir:
– Les liens locaux;
– Les liens externes.
26/11/2016 elhammoudi@[Link] 40
Développement Web : Langage HTML
Lien local
L'organisation classique, et plus que conseillée, d'un site Web consiste à regrouper
l'ensemble des éléments de celui-ci (fichiers htm, images, ...) dans un même
répertoire. On peut ainsi "transporter" aisément le site pour le présenter sur un autre
ordinateur et le charger sur un serveur. L'adresse du lien sera alors tout simplement :
[Link]
Exemple :
– Dans l'éditeur de texte, on crée deux fichiers HTML.
– le fichier [Link]:
<A HREF="[Link]">Aller vers le document 2</A>
– le fichier [Link]:
<A HREF="[Link]">Retour au document 1</A>
26/11/2016 elhammoudi@[Link] 41
Développement Web : Langage HTML
Lien externe
Tout ordinateur situé sur le réseau Internet possède une adresse ou
une URL (UNIVERSAL Ressource Locator). HTML permet d'accéder à
toutes les machines et toutes les ressources du Net. Pour peu
qu'Internet vous soit un peu familier, ce sont les adresses du type :
[Link]
[Link]
[Link]
26/11/2016 elhammoudi@[Link] 42
Développement Web : Langage HTML
Les Ancres
Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un
autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs [Anchor].
Point d'ancrage
– <A NAME="***">...</A>
On nomme la cible ***
Lien vers une ancre dans la même page
– <A HREF="#***">...</A>
Lien vers la cible *** lorsque celle-ci se trouve dans la même page
Lien vers une ancre dans une autre page
– <A HREF="URL#***">...</A>
Lien vers la cible *** lorsque celle-ci se trouve dans une autre page
26/11/2016 elhammoudi@[Link] 43
Développement Web : Langage HTML
Images
<img src="[Link]" alt="Smiley face" height="42" width="42">
26/11/2016 elhammoudi@[Link] 44
Développement Web : Langage HTML
Formulaire
26/11/2016 elhammoudi@[Link] 45
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<FORM> ACTION METHOD ENCTYPE
La balise <FORM>:
Les balises <FORM> et </FORM> définissent l'espace du formulaire.
Elles possèdent trois attributs:
- ACTION qui définit vers quelle URL envoyer le contenu du formulaire
- METHOD qui définit le mode de transmission: GET ou POST
- ENCTYPE qui définit le type de contenu: chaîne ou fichier
26/11/2016 elhammoudi@[Link] 46
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<FORM> ACTION METHOD ENCTYPE
ACTION :
La propriété ACTION définit vers quelle URL (Universal Resource Location) envoyer le
contenu du formulaire.
Ex :
<FORM ACTION="[Link]
</FORM>
Pour renvoyer le formulaire à lui même, on écrira action="#" (voire on écrira rien du
tout).
26/11/2016 elhammoudi@[Link] 47
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<FORM> ACTION METHOD ENCTYPE
METHOD :
La propriété METHOD définit le mode de transmission, GET ou POST:
-GET : une chaîne est placée à la fin de l'URL après un caractère " ? " sous forme
d'associations nomChamp=val où nomChamp est le nom du champ dans le formulaire
et val la valeur saisie.
Nb: le caractère " + " remplace les espaces et le caractère " & " sépare les associations
nomChamp=val.
-POST : la chaîne est transmise séparément de l'URL.
Ex :
<FORM ACTION="[Link] METHOD="GET">
</FORM>
26/11/2016 elhammoudi@[Link] 48
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<FORM> ACTION METHOD ENCTYPE
ENCTYPE :
La propriété ENCTYPE définit le type d'encodage des données du formulaire qui
doit être utilisé pour la transmission au serveur:
- application/x-www-form-urlencoded
C'est l'option par défaut qui prévoit que les champs du formulaire sont transmis
sous la forme d'une liste de paires nom=valeur.
- multipart/form-data
Cette option doit être utilisée pour transmettre des fichiers.
26/11/2016 elhammoudi@[Link] 49
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
La balise <INPUT> :
A deux exceptions près, la balise <INPUT> permet de définir toutes les
commandes d'un formulaire.
Les éléments communs à toutes les balises INPUT:
- balise ouvrante uniquement
- l'attributs NAME
- et l'attribut TYPE :
Ex
Titre : <INPUT TYPE="text" NAME="titre">
26/11/2016 elhammoudi@[Link] 50
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Les différents TYPE de commandes :
L'attribut TYPE permet de définir les différents type de commande qui sont, en vrac :
- TEXT pour entrer du texte
- PASSWORD pour entrer du texte masqué (mot de passe par ex.)
- HIDDEN pour transmettre des infos cachées
- CHECKBOX pour créer des cases à cocher
- RADIO pour créer des cases à cocher exclusives
- SUBMIT pour créer un bouton qui soumet le formulaire
- RESET pour réinitialiser un formulaire
- IMAGE pour fabriquer un joli bouton
- FILE pour transférer des fichiers
26/11/2016 elhammoudi@[Link] 68
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Le type TEXT
La commande de type TEXT fournit à l'utilisateur l'interface suivante :
On peut en contrôler la taille à l'aide de l'attribut SIZE suivi du nombre de caractères visibles
dans la fenêtre.
On peut également contrôler la longueur maximum autorisée à être entrée dans cette fenêtre
à l'aide de l'attribut MAXLENGTH.
Ex:
Nom : <INPUT TYPE="text" NAME="nom" SIZE="20">
Prénom : <INPUT TYPE="text" NAME="prenom" SIZE="20">
26/11/2016 elhammoudi@[Link] 52
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Le type PASSWORD
La commande de type PASSWORD est identique à la commande de type TEXT sauf
que le texte entré n'apparaît pas à l'écran (les lettres dont remplacées par des
*) :
Ex:
Ce type sert principalement à la saisie de mot de passe.
26/11/2016 elhammoudi@[Link] 53
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Le type HIDDEN
La commande de type HIDDEN n'est pas visible. Elle sert principalement à définir un
paramètre dont la valeur est fixée, et à passer ce paramètre en même temps que ceux
saisis par l'utilisateur.
Ex:
<INPUT TYPE="hidden" NAME="nomdepage" VALUE="ex3">
Attention: cette commande est cachée mais pas secrète: il suffit à l'utilisateur de consulter
le code source pour la voir.
26/11/2016 elhammoudi@[Link] 54
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Le type CHECKBOX
Ce type permet de créer des cases à cocher associées à des valeurs.
En donnant le même attribut NAME à plusieurs cases à cocher, on indique au navigateur que ces
champs doivent être groupés dans la fenêtre d'affichage.
Contrairement aux commandes TEXT, les valeurs (attribut VALUE) ne sont pas visibles et doivent
être définies à l'intérieur de la balise INPUT :
Ex:
Choléra : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="C">
Tuberculose : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="T">
Oreillons : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="O" CHECKED>
Autres : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="A">
26/11/2016 elhammoudi@[Link] 55
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Le type RADIO
La commande RADIO fonctionne comme CHECKBOX mais n'autorise pas un choix
multiple.
Le premier choix est sélectionné par défaut. Pour présélectionner un autre choix,
vous pouvez utiliser l'attribut CHECKED :
Ex:
Oui <INPUT TYPE="radio" NAME="reponse" VALUE="O">
Non <INPUT TYPE="radio" NAME="reponse" VALUE="N" CHECKED>
26/11/2016 elhammoudi@[Link] 56
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Les types SUBMIT, RESET et IMAGE
La commande SUBMIT correspond à un bouton qui valide la saisie et envoie le
contenu du formulaire au serveur.
L'attribut VALUE permet de définir le texte affiché sur le bouton.
Un commande complémentaire RESET, fonctionne sur le même schéma que SUBMIT
et permet de réinitialiser le formulaire.
Ex:
<INPUT TYPE="submit" VALUE="Valider">
<INPUT TYPE="reset" VALUE="Tout effacer">
26/11/2016 elhammoudi@[Link] 57
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Les types SUBMIT, RESET et IMAGE
Pour remplacer un bouton de type SUBMIT par une image, vous disposez de la
commande IMAGE :
Ex:
<INPUT TYPE="image" SRC="[Link]">
26/11/2016 elhammoudi@[Link] 58
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE
Le type FILE
La commande de type FILE permet de transmettre des fichiers par l'intermédiaire du formulaire.
Le champ doit alors contenir le chemin d'accès au fichier sur l'ordinateur du client.
Ex:
<INPUT TYPE="file" SIZE="40" NAME="telFichier">
Une astuce permet de limiter la taille maximale du fichier à transmettre en utilisant une commande
HIDDEN portant le nom MAX_FILE_SIZE et ayant pour valeur le nombre d'octets maximal.
Ex:
<INPUT TYPE="hidden" NAME="MAX_FILE_SIZE" VALUE="52000">
26/11/2016 elhammoudi@[Link] 59
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<SELECT> <TEXTAREA>
La commande SELECT
Cette commande est assez proche des champs CHECKBOX et RADIO :
Il permet à l'utilisateur de choisir un ou plusieurs éléments dans un menu déroulant.
La balise <SELECT> est un conteneur dans lequel on doit énumérer, avec les balises <OPTION> tous les choix
disponibles.
Ces balises <OPTION> ont elles-même un attribut VALUE qui indique la valeur à envoyer au serveur lorsque l'option
a été sélectionné. Elles peuvent utiliser l'attribut SELECTED pour sélectionner une valeur par défaut
Ex :
<SELECT>
<OPTGROUP LABEL="Urgences>
<OPTION VALUE="A">Broca
<OPTION VALUE="B" SELECTED>Lariboisière
</OPTGROUP>
</SELECT>
26/11/2016 elhammoudi@[Link] 60
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<SELECT> <TEXTAREA>
La commande SELECT
La balise SELECT dispose d'un attribut SIZE qui définit le nombre de lignes visibles en même temps
dans le menu déroulant.
L'attribut MULTIPLE (sans valeur associée) autorise à sélectionner plusieurs valeurs dans la liste :
Ex:
<SELECT NAME ="lieu" SIZE="3" MULTIPLE>
<OPTGROUP LABEL="Urgences>
<OPTION VALUE="A">Broca
<OPTION VALUE="B" SELECTED>Lariboisière
</OPTGROUP>
</SELECT>
26/11/2016 elhammoudi@[Link] 61
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<SELECT> <TEXTAREA>
La commande TEXTAREA
La balise TEXTAREA fournit à l'utilisateur une zone dans laquelle il peut rentrer du
texte.
Cette commande est encadrée par une balise ouvrante et fermante.
Elle possède les attributs suivants:
- NAME
- ROWS : indique la hauteur de la zone de texte en nombre de ligne
- COLS indique la largeur de la zone de texte (en nombre de caractères).
26/11/2016 elhammoudi@[Link] 62
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
<SELECT> <TEXTAREA>
La commande TEXTAREA
Ex :
<TEXTAREA NAME="commentaire" ROWS="3" COLS="60">
Je peux placer ici du texte par défaut.
</TEXTAREA>
26/11/2016 elhammoudi@[Link] 63
Développement Web : Langage HTML
Formulaires HTML/PHP
Définition Commandes Commandes particulières Décoration
La balise <FIELDSET>
La balise <FIELDSET> est uniquement décorative : elle permet d'entourer un groupe de
commande par un léger filet gris.
On peut donner un titre à ce groupe à l'aide de la balise <LEGEND>.
Ex:
<FIELDSET>
<LEGEND>Données personnelles</LEGEND>
Nom : <INPUT TYPE="text" NAME="nom" SIZE="20">
Prénom : <INPUT TYPE="text" NAME="prenom" SIZE="20">
Id : <INPUT TYPE="password" NAME="identifiant" SIZE="20">
</FIELDSET>
26/11/2016 elhammoudi@[Link] 64