Scribd
Importer
158 vues36 pages

Introduction à XHTML et Formulaires HTML

XHTML est une version plus stricte de HTML basée sur XML. XHTML doit respecter des règles de balisage XML comme l'utilisation correcte des guillemets, des minuscules et de la fermeture des éléments.

Transféré par

joel
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
158 vues36 pages

Introduction à XHTML et Formulaires HTML

XHTML est une version plus stricte de HTML basée sur XML. XHTML doit respecter des règles de balisage XML comme l'utilisation correcte des guillemets, des minuscules et de la fermeture des éléments.

Transféré par

joel
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Chapitre 1 

: XHTML

XHTML est une version de HTML plus stricte et plus basée sur XML.

I. Qu'est-ce que XHTML ?


 XHTML signifie E X tensible H yper T ext M arkup L anguage
 XHTML est une version de HTML plus stricte et plus basée sur XML
 XHTML est HTML défini comme une application XML
 XHTML est pris en charge par tous les principaux navigateurs

Pourquoi XHTML ?
XML est un langage de balisage où tous les documents doivent être balisés correctement
(être "bien formés").

XHTML a été développé pour rendre HTML plus extensible et flexible pour fonctionner
avec d'autres formats de données (tels que XML). De plus, les navigateurs ignorent les
erreurs dans les pages HTML et essaient d'afficher le site Web même s'il contient des
erreurs dans le balisage. Ainsi, XHTML est livré avec une gestion des erreurs beaucoup
plus stricte.

Les différences les plus importantes avec HTML


 <!DOCTYPE> est obligatoire
 L'attribut xmlns dans <html> est obligatoire
 <html>, <head>, <title> et <body> sont obligatoires
 Les éléments doivent toujours être correctement imbriqués
 Les éléments doivent toujours être fermés
 Les éléments doivent toujours être en minuscules
 Les noms d'attributs doivent toujours être en minuscules
 Les valeurs d'attribut doivent toujours être entre guillemets
 La minimisation des attributs est interdite

XHTML - <!DOCTYPE ....> est obligatoire


Page 1 sur 36
Un document XHTML doit avoir une déclaration XHTML <!DOCTYPE>.

Les éléments <html>, <head>, <title> et <body> doivent également être présents, et
l'attribut xmlns dans <html> doit spécifier l'espace de noms xml pour le document.

Exemple
Voici un document XHTML avec un minimum de balises requises : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"


"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Title of document</title>
</head>
<body>

  some content here...

</body>
</html>

Les éléments XHTML doivent être correctement


imbriqués
En XHTML, les éléments doivent toujours être correctement imbriqués les uns dans les
autres, comme ceci :

Correct:
<b><i>Some text</i></b>

Faux:
<b><i>Some text</b></i>

Les éléments XHTML doivent toujours être


fermés
En XHTML, les éléments doivent toujours être fermés, comme ceci :

Correct:

Page 2 sur 36
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Faux:
<p>This is a paragraph
<p>This is another paragraph

Les éléments vides XHTML doivent toujours être


fermés
En XHTML, les éléments vides doivent toujours être fermés, comme ceci :

Correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

Faux:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

Les éléments XHTML doivent être en minuscules


En XHTML, les noms d'éléments doivent toujours être en minuscules, comme ceci :

Correct:
<body>
<p>This is a paragraph</p>
</body>

Faux:
<BODY>
<P>This is a paragraph</P>
</BODY>

Page 3 sur 36
Les noms d'attributs XHTML doivent être en
minuscules
En XHTML, les noms d'attributs doivent toujours être en minuscules, comme ceci :

Correct:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Faux:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Les valeurs d'attribut XHTML doivent être entre


guillemets
En XHTML, les valeurs d'attribut doivent toujours être entre guillemets, comme ceci :

Correct:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Faux:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

La minimisation des attributs XHTML est interdite


En XHTML, la minimisation des attributs est interdite :

Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />

Faux:
<input type="checkbox" name="vehicle" value="car" checked />
<input type="text" name="lastname" disabled />

Page 4 sur 36
XML Example
<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

Note
To: Tove

From: Jani

Heading: Reminder

Body: Don't forget me this weekend!

II. Formulaires HTML

Un formulaire HTML est utilisé pour collecter les entrées des utilisateurs. L'entrée de
l'utilisateur est le plus souvent envoyée à un serveur pour traitement.

Exemple
First name:
John

Last name:
Doe

Submit

L'élément <form>

Page 5 sur 36
L' <form>élément HTML est utilisé pour créer un formulaire HTML pour la saisie de
l'utilisateur :

<form>
.
form elements
.
</form>

L' <form>élément est un conteneur pour différents types d'éléments d'entrée, tels que :
champs de texte, cases à cocher, boutons radio, boutons d'envoi, etc.

Tous les différents éléments de formulaire sont traités dans ce chapitre : Éléments de
formulaire HTML .

L'élément <input>
L'élément HTML <input>est l'élément de formulaire le plus utilisé.

Un <input>élément peut être affiché de plusieurs façons, selon l' type attribut.

Voici quelques exemples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choi

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Page 6 sur 36
Tous les différents types d'entrée sont traités dans ce chapitre : Types d'entrée HTML .

Champs de texte
Le <input type="text">définit un champ de saisie sur une seule ligne pour la saisie de texte.

Exemple
Un formulaire avec des champs de saisie pour le texte :

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Essayez-le vous-même »

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Prénom:

Nom de famille:

Remarque : Le formulaire lui-même n'est pas visible. Notez également que la largeur
par défaut d'un champ de saisie est de 20 caractères.

L'élément <label>
Remarquez l'utilisation de l' <label>élément dans l'exemple ci-dessus.

La <label>balise définit une étiquette pour de nombreux éléments de formulaire.

L' <label>élément est utile pour les utilisateurs de lecteurs d'écran, car le lecteur d'écran
lira à haute voix l'étiquette lorsque l'utilisateur se concentre sur l'élément d'entrée.

L' <label>élément aide également les utilisateurs qui ont des difficultés à cliquer sur de
très petites régions (telles que des boutons radio ou des cases à cocher) - car lorsque

Page 7 sur 36
l'utilisateur clique sur le texte dans l' <label>élément, il bascule le bouton radio/case à
cocher.

L' forattribut de la <label>balise doit être égal à l' idattribut de l' <input> élément pour les


lier ensemble.

Boutons radio
Le <input type="radio">définit un bouton radio.

Les boutons radio permettent à un utilisateur de sélectionner UN parmi un nombre limité


de choix.

Exemple
Un formulaire avec des boutons radio :

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Choisissez votre langage Web préféré :

 HTML
 CSS
 Javascript

Cases à cocher
Le <input type="checkbox">définit une case à cocher .

Les cases à cocher permettent à un utilisateur de sélectionner ZÉRO ou PLUS d'options


parmi un nombre limité de choix.

Page 8 sur 36
Exemple
Un formulaire avec des cases à cocher :

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

 j'ai un vélo
 j'ai une voiture
 j'ai un bateau

Le bouton Soumettre
Le <input type="submit">définit un bouton pour soumettre les données du formulaire à un
gestionnaire de formulaire.

Le gestionnaire de formulaire est généralement un fichier sur le serveur avec un script


pour le traitement des données d'entrée.

Le gestionnaire de formulaire est spécifié dans l' action attribut du formulaire.

Exemple
Un formulaire avec un bouton soumettre :

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Prénom:
John

Nom de famille:

Page 9 sur 36
Doe

Soumettre

L'attribut de nom pour <input>


Notez que chaque champ de saisie doit avoir un nameattribut pour être soumis.

Si l' nameattribut est omis, la valeur du champ de saisie ne sera pas envoyée du tout.

Exemple
Cet exemple ne soumettra pas la valeur du champ de saisie "Prénom" : 

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

III. Attributs de formulaire HTML

Cette section décrit les différents attributs de l'élément <form> HTML.

L'attribut d'action
L'attribut action définit l'action à effectuer lorsque le formulaire est soumis.

Habituellement, les données du formulaire sont envoyées vers un fichier sur le serveur
lorsque l'utilisateur clique sur le bouton Soumettre.

Dans l'exemple ci-dessous, les données du formulaire sont envoyées dans un fichier
appelé "action_page.php". Ce fichier contient un script côté serveur qui gère les données
du formulaire :

Exemple
Lors de la soumission, envoyez les données du formulaire à "action_page.php":

Page 10 sur 36
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Conseil : Si action attribut est omis, l'action est définie sur la page actuelle.

L'attribut cible
target attribut spécifie où afficher la réponse reçue après la soumission du formulaire.

Target attribut peut avoir l'une des valeurs suivantes :

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

La valeur par défaut est _selfce qui signifie que la réponse s'ouvrira dans la fenêtre
actuelle.

Exemple
Ici, le résultat soumis s'ouvrira dans un nouvel onglet du navigateur :

<form action="/action_page.php" target="_blank">
Page 11 sur 36
L'attribut de méthode
L' methodattribut spécifie la méthode HTTP à utiliser lors de la soumission des données du
formulaire.

Les données de formulaire peuvent être envoyées sous forme de variables URL
(avec method="get") ou sous forme de transaction post HTTP (avec method="post").

La méthode HTTP par défaut lors de la soumission des données de formulaire est GET. 

Exemple
Cet exemple utilise la méthode GET lors de la soumission des données du formulaire :

<form action="/action_page.php" method="get">

Exemple
Cet exemple utilise la méthode POST lors de la soumission des données du formulaire :

<form action="/action_page.php" method="post">

Remarques sur GET :

 Ajoute les données du formulaire à l'URL, par paires nom/valeur


 N'utilisez JAMAIS GET pour envoyer des données sensibles ! (les données du
formulaire soumis sont visibles dans l'URL !)
 La longueur d'une URL est limitée (2048 caractères)
 Utile pour les soumissions de formulaires où un utilisateur souhaite mettre le
résultat en signet
 GET est bon pour les données non sécurisées, comme les chaînes de requête dans
Google

Remarques sur POST :

 Ajoute les données du formulaire dans le corps de la requête HTTP (les données du
formulaire soumises ne sont pas affichées dans l'URL)
 POST n'a pas de limite de taille et peut être utilisé pour envoyer de grandes
quantités de données.
 Les soumissions de formulaires avec POST ne peuvent pas être mises en signet

Conseil : utilisez toujours POST si les données du formulaire contiennent des


informations sensibles ou personnelles !

L'attribut de saisie semi-automatique


Page 12 sur 36
autocomplete attribut spécifie si un formulaire doit avoir la saisie semi-automatique activée
ou désactivée.

Lorsque la saisie semi-automatique est activée, le navigateur complète automatiquement


les valeurs en fonction des valeurs que l'utilisateur a saisies auparavant.

Exemple
Un formulaire avec saisie semi-automatique sur :

<form action="/action_page.php" autocomplete="on">

Essayez-le vous-même »

L'attribut Novalidate
Novalidate attribut est un attribut booléen.

Lorsqu'il est présent, il spécifie que les données de formulaire (entrée) ne doivent pas
être validées lorsqu'elles sont soumises.

Exemple
Un formulaire avec un attribut novalidate :

<form action="/action_page.php" novalidate>

IV. Éléments de formulaire HTML

Cette section décrit tous les différents éléments de formulaire HTML.

Les éléments HTML <form>


L'élément HTML <form>peut contenir un ou plusieurs des éléments de formulaire suivants :

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
Page 13 sur 36
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

L'élément <input>
L'un des éléments de formulaire les plus utilisés est <input>.

L' <input>élément peut être affiché de plusieurs manières, selon l' type attribut.

Exemple
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

L'élément <label>
<label> élément définit une étiquette pour plusieurs éléments de formulaire.

<label> élément est utile pour les utilisateurs de lecteurs d'écran, car le lecteur d'écran
lira à haute voix l'étiquette lorsque l'utilisateur se concentrera sur l'élément d'entrée.

<label> élément aide également les utilisateurs qui ont des difficultés à cliquer sur de très
petites régions (telles que des boutons radio ou des cases à cocher) - car lorsque
l'utilisateur clique sur le texte dans l' <label>élément, il bascule le bouton radio/case à
cocher.

For attribut de la <label>balise doit être égal à l' id attribut de l' <input> élément pour les
lier ensemble.

L'élément <select>
<select> élément définit une liste déroulante :

Exemple
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
Page 14 sur 36
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Les <option>éléments définissent une option qui peut être sélectionnée.

Par défaut, le premier élément de la liste déroulante est sélectionné.

Pour définir une option présélectionnée, ajoutez l' selected attribut à l'option :

Exemple
<option value="fiat" selected>Fiat</option>

Essayez-le vous-même »

Valeurs visibles :
Utilisez l' sizeattribut pour spécifier le nombre de valeurs visibles :

Exemple
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Autoriser les sélections multiples :


Utilisez l' multiple attribut pour permettre à l'utilisateur de sélectionner plusieurs valeurs :

Exemple
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

L'élément <textarea>
L' <textarea>élément définit un champ de saisie multiligne (une zone de texte) :

Page 15 sur 36
Exemple
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

L' rowsattribut spécifie le nombre de lignes visibles dans une zone de texte.

L' colsattribut spécifie la largeur visible d'une zone de texte.

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Vous pouvez également définir la taille de la zone de texte en utilisant CSS :

Exemple
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

L'élément <bouton>
L' <button>élément définit un bouton cliquable :

Exemple
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Cliquez sur moi !

Remarque : Spécifiez toujours l' typeattribut de l'élément de bouton. Différents


navigateurs peuvent utiliser différents types par défaut pour l'élément de bouton.

Page 16 sur 36
Les éléments <fieldset> et <legend>
L' <fieldset>élément est utilisé pour regrouper des données connexes dans un formulaire.

L' <legend>élément définit une légende pour l' <fieldset> élément.

Exemple
<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Personnalité :Prénom:
John

Nom de famille:
Doe

Soumettre

L'élément <datalist>
L' <datalist>élément spécifie une liste d'options prédéfinies pour un <input>élément.

Les utilisateurs verront une liste déroulante des options prédéfinies lorsqu'ils saisiront des
données.

L' listattribut de l' <input>élément doit faire référence à l' idattribut de


l' <datalist>élément.

Exemple
<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
Page 17 sur 36
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Essayez-le vous-même »

V. Types d'entrée HTML
Cette section décrit les différents types d' <input>élément HTML.

Types d'entrée HTML


Voici les différents types d'entrée que vous pouvez utiliser en HTML :

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Conseil : La valeur par défaut de l' typeattribut est "texte".

Texte du type d'entrée


Page 18 sur 36
<input type="text">définit un champ de saisie de texte sur une seule ligne :

Exemple
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Prénom:

Nom de famille:

Mot de passe du type d'entrée


<input type="password">définit un champ mot de passe :

Exemple
<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Nom d'utilisateur:

Mot de passe:

Les caractères d'un champ de mot de passe sont masqués (affichés sous forme
d'astérisques ou de cercles).

Page 19 sur 36
Type d'entrée Soumettre
<input type="submit">définit un bouton pour soumettre des données de formulaire à
un gestionnaire de formulaire .

Le gestionnaire de formulaire est généralement une page serveur avec un script pour le
traitement des données d'entrée.

Le gestionnaire de formulaire est spécifié dans l' action attribut du formulaire :

Exemple
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Prénom:
John

Nom de famille:
Doe

Soumettre

Si vous omettez l'attribut value du bouton submit, le bouton obtiendra un texte par
défaut :

Exemple
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

Réinitialisation du type d'entrée


<input type="reset">définit un bouton de réinitialisation qui réinitialisera toutes les
valeurs du formulaire à leurs valeurs par défaut :

Exemple
Page 20 sur 36
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Prénom:
John

Nom de famille:
Doe

Soumettre Réinitialiser
 

Si vous modifiez les valeurs d'entrée, puis cliquez sur le bouton "Réinitialiser", les
données du formulaire seront réinitialisées aux valeurs par défaut.

Type d'entrée Radio


<input type="radio">définit un bouton radio .

Les boutons radio permettent à un utilisateur de sélectionner UNIQUEMENT parmi un


nombre limité de choix :

Exemple
<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

 HTML
 CSS
 Javascript
Page 21 sur 36
Case à cocher Type d'entrée
<input type="checkbox">définit une case à cocher .

Les cases à cocher permettent à un utilisateur de sélectionner ZÉRO ou PLUS d'options


parmi un nombre limité de choix.

Exemple
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Essayez-le vous-même »

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

 j'ai un vélo
 j'ai une voiture
 j'ai un bateau

Bouton Type d'entrée


<input type="button">définit un bouton :

Exemple
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Voici comment le code HTML ci-dessus sera affiché dans un navigateur :

Couleur du type d'entrée


Le <input type="color">est utilisé pour les champs de saisie qui doivent contenir une
couleur.

Page 22 sur 36
Selon la prise en charge du navigateur, un sélecteur de couleurs peut apparaître dans le
champ de saisie.

Exemple
<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Type d'entrée Date


Le <input type="date">est utilisé pour les champs de saisie qui doivent contenir une date.

Selon la prise en charge du navigateur, un sélecteur de date peut apparaître dans le


champ de saisie.

Exemple
<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

Essayez-le vous-même »

Vous pouvez également utiliser les attributs minet maxpour ajouter des restrictions aux
dates :

Exemple
<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Essayez-le vous-même »

Type d'entrée Datetime-local


Le <input type="datetime-local">spécifie un champ de saisie de date et d'heure, sans fuseau
horaire.

Page 23 sur 36
Selon la prise en charge du navigateur, un sélecteur de date peut apparaître dans le
champ de saisie.

Exemple
<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Essayez-le vous-même »

Courriel du type d'entrée


Le <input type="email">est utilisé pour les champs de saisie qui doivent contenir une
adresse e-mail.

Selon la prise en charge du navigateur, l'adresse e-mail peut être automatiquement


validée lors de la soumission.

Certains smartphones reconnaissent le type d'e-mail et ajoutent ".com" au clavier pour


correspondre à l'entrée d'e-mail.

Exemple
<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Essayez-le vous-même »

Fichier de type d'entrée


Le <input type="file"> définit un champ de sélection de fichier et un bouton "Parcourir"
pour les téléchargements de fichiers.

Exemple
<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

Essayez-le vous-même »

Page 24 sur 36
Type d'entrée masqué
Le <input type="hidden"> définit un champ de saisie masqué (invisible pour un utilisateur).

Un champ masqué permet aux développeurs Web d'inclure des données qui ne peuvent
pas être vues ou modifiées par les utilisateurs lorsqu'un formulaire est soumis.

Un champ masqué stocke souvent quel enregistrement de base de données doit être mis
à jour lorsque le formulaire est soumis.

Remarque : Bien que la valeur ne soit pas affichée pour l'utilisateur dans le contenu de
la page, elle est visible (et peut être modifiée) à l'aide des outils de développement de
n'importe quel navigateur ou de la fonctionnalité "Afficher la source". N'utilisez pas
d'entrées cachées comme forme de sécurité !

Exemple
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Essayez-le vous-même »

Numéro de type d'entrée


Le <input type="number">définit un champ de saisie numérique .

Vous pouvez également définir des restrictions sur les numéros acceptés.

L'exemple suivant affiche un champ de saisie numérique, dans lequel vous pouvez saisir
une valeur comprise entre 1 et 5 :

Exemple
<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Essayez-le vous-même »

Page 25 sur 36
Restrictions d'entrée
Voici une liste de certaines restrictions d'entrée courantes :

Attribute Description

checked Specifies that an input field should be pre-selected when the page loads (
type="checkbox" or type="radio")

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

Page 26 sur 36
value Specifies the default value for an input field

Vous en apprendrez plus sur les restrictions d'entrée dans le chapitre suivant.

L'exemple suivant affiche un champ de saisie numérique, dans lequel vous pouvez saisir
une valeur comprise entre 0 et 100, par pas de 10. La valeur par défaut est 30 :

Exemple
<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" v
alue="30">
</form>

Essayez-le vous-même »

Plage de types d'entrée


Le <input type="range">définit un contrôle permettant de saisir un nombre dont la valeur
exacte n'a pas d'importance (comme un curseur). La plage par défaut est de 0 à 100.
Cependant, vous pouvez définir des restrictions sur les nombres acceptés avec
les attributs min, maxet :step

Exemple
<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Essayez-le vous-même »

Recherche de type d'entrée


Le <input type="search">est utilisé pour les champs de recherche (un champ de recherche
se comporte comme un champ de texte normal).

Exemple
<form>
  <label for="gsearch">Search Google:</label>

Page 27 sur 36
  <input type="search" id="gsearch" name="gsearch">
</form>

Essayez-le vous-même »

Type d'entrée Tél


Le <input type="tel">est utilisé pour les champs de saisie qui doivent contenir un numéro
de téléphone.

Exemple
<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Essayez-le vous-même »

Type d'entrée Heure


Le <input type="time">permet à l'utilisateur de sélectionner une heure (pas de fuseau
horaire).

Selon la prise en charge du navigateur, un sélecteur de temps peut apparaître dans le


champ de saisie.

Exemple
<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

Essayez-le vous-même »

URL du type d'entrée


Le <input type="url">est utilisé pour les champs de saisie qui doivent contenir une adresse
URL.

Selon la prise en charge du navigateur, le champ URL peut être automatiquement validé
lors de la soumission.
Page 28 sur 36
Certains smartphones reconnaissent le type d'URL et ajoutent ".com" au clavier pour
correspondre à la saisie de l'URL.

Exemple
<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Essayez-le vous-même »

VI. Exemples de base HTML


Dans cette section, nous montrerons quelques exemples HTML de base.

Ne vous inquiétez pas si nous utilisons des balises que vous n'avez pas encore
apprises.

Documents HTML
Tous les documents HTML doivent commencer par une déclaration de type de
document : <!DOCTYPE html>.

Le document HTML lui-même commence par <html>et se termine par </html>.

La partie visible du document HTML est comprise entre <body>et </body>.

Exemple
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Page 29 sur 36
VII. Tableaux HTML
Les tableaux HTML permettent aux développeurs Web d'organiser les données en
lignes et en colonnes.

Exemple

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Définir un tableau HTML


Un tableau en HTML se compose de cellules de tableau à l'intérieur de lignes et de
colonnes.

Exemple
Un simple tableau HTML :

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
Page 30 sur 36
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Cellules du tableau
Chaque cellule du tableau est définie par un <td>et une </td>balise.

td représente les données de table.

Tout ce qui se trouve entre <td>et </td>est le contenu de la cellule du tableau.

Exemple
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Remarque : Une cellule de tableau peut contenir toutes sortes d'éléments HTML : du
texte, des images, des listes, des liens, d'autres tableaux, etc.

Lignes du tableau
Chaque ligne du tableau commence par un <tr>et se termine par une </tr>balise.

tr signifie ligne de tableau.

Exemple

Page 31 sur 36
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Vous pouvez avoir autant de lignes que vous le souhaitez dans un tableau ; assurez-vous
simplement que le nombre de cellules est le même dans chaque rangée.

Remarque : Il arrive parfois qu'une ligne ait plus ou moins de cellules qu'une
autre. Vous apprendrez cela dans un chapitre ultérieur.

En-têtes de tableau
Parfois, vous souhaitez que vos cellules soient des cellules d'en-tête de tableau. Dans ces
cas, utilisez la <th>balise au lieu de la <td>balise :

th représente l'en-tête du tableau.

Exemple
Soit la première ligne des cellules d'en-tête de tableau :

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>
Page 32 sur 36
VIII. Tableau HTML Colspan & Rowspan

Tableau HTML - Colspan


Pour qu'une cellule s'étende sur plusieurs colonnes, utilisez l' colspanattribut :

Exemple
<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

Remarque : La valeur de l' colspanattribut représente le nombre de colonnes à couvrir.

Tableau HTML - Étendue des lignes


Pour qu'une cellule s'étende sur plusieurs lignes, utilisez l' rowspanattribut :

Exemple
<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>

Page 33 sur 36
  <tr>
    <td>555-8745</td>
</tr>
</table>

I. Les cadres ou FRAME

Grâce à la technologie des frames (en français "cadres") il est désormais possible
d'afficher plusieurs pages HTML dans différentes zones (ou cadres).

Les frames ne font pas partie de la spécification du HTML 3.x, il faut donc
déclarer sa page comme étant écrite en HTML 4.0 !

Créer des frames

Afin de créer un site contenant des cadres, il suffit de créer un fichier contenant
l'agencement des cadres : ce fichier HTML a pour particularité d'avoir un conteneur
<FRAMESET> à la place du jeu de balises <BODY>. C'est cette balise qui définit les
cadres par leur dimension en pixels ou en pourcentage (%).

Voyons ceci sur 3 exemples:

 2 cadres verticaux
 2 cadres horizontaux
 2 cadres horizontaux et un vertical

Exemple n°1

<FRAMESET COLS="20%,
80%">

<FRAME SRC="frame1.htm" NAME="gauche">

<FRAME SRC="frame2.htm" NAME="droite">

</FRAMESET>

Exemple n°2

<FRAMESET ROWS="20%,
80%">

<FRAME SRC="frame1.htm" NAME="haut">

<FRAME SRC="frame2.htm" NAME="bas">

</FRAMESET>
Page 34 sur 36
Exemple n°3

<FRAMESET COLS="20%,
80%">

<FRAME SRC="frame1.htm" NAME="gauche">

<FRAMESET ROWS="50%, 50%">

<FRAME SRC="frame2.htm"
NAME="droit_haut">

<FRAME SRC="frame3.htm"
NAME="droit_bas">

</FRAMESET>

Les attributs de la balise <FRAMESET>

Attribut Valeur Action


pourcentage (entre 1 et 100)
valeur en pixels
Rows En fixant une seules des valeurs et Cadre horizontal
en donnant à l'autre la valeur *, la
valeur s'ajuste automatiquement
pourcentage (entre 1 et 100)
valeur en pixels
Cols En fixant une seules des valeurs et Cadre vertical
en donnant à l'autre la valeur *, la
valeur s'ajuste automatiquement
YES Indique si le cadre a une bordure ou
Frameborder
NO non
n est une valeur définissant la
Border=n Indique la taille de la bordure
taille de la bordure
Nom de la couleur
Bordercolor Indique la couleur de la bordure
Valeur de la couleur en hexadécimal
n est une valeur définissant
Framespacing=n Indique l'espace entre les cadres
l'espace entre les cadres

Les attributs de la balise <FRAME>

La balise <FRAME> permet de définir un ou plusieurs cadres au sein de la balise


<FRAMESET>

Attribut Valeur Action


Définit l'emplacement de la page à afficher dans le
Src URL
cadre
Définit un nom qui permettra d'afficher un autre
Name "nom"
document dans le cadre gâce à l'attribut Target
n est un entier
Marginwidth=n spécifiant le nombre Taille des marges latérales
de pixels
Marginheight=nn est un entier Taille des marges du haut et du bas
Page 35 sur 36
spécifiant le nombre
de pixels
YES
Frameborder Détermine si les cadres auront ou non une bordure
NO
n est un entier
Taille de l'espace entre les cadres (uniquement
Border=n spécifiant le nombre
pour Netscape)
de pixels
Interdit à l'utilisateur de redimensionner les
Noresize (Aucune)
cadres (Ce n'est pas la valeur par défaut)
YES
Permet ou non l'affichage d'une barre de défilement
Scrolling NO
(Auto laisse le navigateur décider de son utilité)
AUTO

Comment éviter les erreurs avec les navigateurs non compatibles?

On utilisera les balises <NOFRAMES> et </NOFRAMES> permettant de spécifier un texte


HTML à afficher en cas de navigateur ne permettant pas d'afficher les frames. Le texte
entre les balises <NOFRAMES> et </NOFRAMES> doit donc contenir les balises <BODY> ...
</BODY>.

Exemple :

<FRAMESET COLS="20%,
80%">

<FRAME SRC="frame1.htm" NAME="gauche">

<FRAME SRC="frame2.htm" NAME="droite">

</FRAMESET>
<NOFRAMES>
<BODY>
Cette page HTML nécessite un navigateur supportant les frames,
veuillez nous en excuser.
</BODY>
</NOFRAMES>

Désigner un cadre avec un lien hypertexte

Pour faire afficher des liens dans un des cadres, il suffit d'utiliser l'attribut
target dans la balise <A HREF ..> pour spécifier le nom du cadre qui a été spécifié
dans la balise <FRAME> par l'attribut NAME.

Par exemple:

<A HREF="page.htm" TARGET="gauche">


Valeur Action
_self Affiche la cible dans le même cadre que le lien
_parent Affiche la cible dans le cadre de niveau supérieur
_blank Affiche la cible dans une nouvelle fenêtre
_top Affiche la cible dans la fenêtre entière du navigateur

Page 36 sur 36

Vous aimerez peut-être aussi