Module 8 : PROGRAMMATION WEB
COTÉ CLIENT
Othmane ANINAT
Formateur NTIC & Ingénieur en informatique
HTML et CSS
Othmane ANINAT
Formateur NTIC & Ingénieur en informatique
Plan du cours
ENVIRONNEMENT ET STRUCTURE
1 Le concept des balises - Le bon usage des balises - Particulari
tés et pièges du HTML
MISE EN FORME DU DOCUMENT
2 Le texte simple - Les objets d'un document - L'en-tête d'un doc
ument HTML
MISE EN FORME DU TEXTE
3 Les titres - Les paragraphes de texte - Le formatage du texte -
L'alignement - Les commentaires …
LES LISTES
4 Numérotées - A puces - Imbriquées - Les listes de définition
LES TABLEAUX
5 Les cellules de tableau - La fusion des cellules - Gestion de la
taille du tableau - -En-tête et légende - Les bordures …
LES NOUVELLES BALISES
6 <mark>, <meter>, <time>, <figure>, <picture>
Plan du cours
STRUCTURATION DE LA PAGE
7 Balise <DIV> - Balise <span> - Balises <header>, <footer>, <nav>
, <article>
LES HYPERTEXTES
8 La balise de liens - Liens vers une autre page - Liens à l'intérie
ur d'une page - Liens vers un autre site Web - Les Target …
INSERTIONS D'IMAGES
9 Les images du Web - L'insertion d'une image - L'espace autour
d'une image - L'alignement d'une image …
LES FORMULAIRES
10 La déclaration de formulaire - Menu déroulant - Bouton radio -
Bouton checkbox - Bouton d'envoi - Bouton d'annulation …
INTÉGRER LES VISUELS, LA VIDÉO ET LE SON
11 Les formats du son et de la vidéo pour le Web - Intégrer du son av
ec la balise audio - Intégrer de la vidéo avec la balise vidéo
Formulaires HTML
Champs de texte L'élément <label>
• Un formulaire HTML est utilisé pour collecter les entrées utilisateur. L'entrée utilisateur est le plus souvent envoyée à un serveur pour
traitement.
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour l'entrée utilisateur:
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
<!DOCTYPE html>
<html>
<body>
<h2> Formulaires HTML </h2>
<form>
<label for="fname"> Prénom: </label> <br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname"> Nom: </label> <br>
<input type="text" id="lname" name="lname"> <br> <br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Formulaires HTML
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.
<! DOCTYPE html>
<html>
<body>
<h2> Boutons radio </h2>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male"> Masculin </label> <br>
<input type="radio" id="female" name="gender" value="female">
<label for="female"> Femme </label> <br>
<input type="radio" id="other" name="gender" value="other">
<label for="other"> Autre </label>
</form>
</body>
</html>
Formulaires HTML
Cases à cocher
• Le <input type="checkbox">définit une case à cocher .
• Les cases à cocher permettent à un utilisateur de sélectionner ZERO ou PLUS d'options d'un nombre limité de choix.
<! DOCTYPE html>
<html>
<body>
<h2> Cases à cocher </h2>
<p> La <strong> input type = "checkbox" </strong> définit
une case à cocher: </p>
<form>
<input type="checkbox" id="vehicule1" name="vehicule1"
value="Vélo">
<label for="vehicle1"> J'ai un vélo </label> <br>
<input type="checkbox" id="vehicule2" name="vehicule2"
value="Voiture">
<label for="vehicle2"> J'ai une voiture </label> <br>
<input type="checkbox" id="vehicule3" name="vehicule3"
value="Bateau">
<label for="vehicle3"> J'ai un bateau </label> <br> <b
r>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Formulaires HTML
L'élément <select>
L'élément <select> définit une liste déroulante:
<! DOCTYPE html>
<html>
<body>
<h2> L'élément select </h2>
<p> L'élément select définit une liste déroulante: </p>
<form>
<label for="cars"> Choisissez une voiture: </label>
<select id="cars" name="cars">
<option value="volvo"> Volvo </option>
<option value="hyundai"> Hyundai </option>
<option value="fiat"> Fiat </option>
<option value="audi"> Audi </option>
</select>
<input type="submit">
</form>
</body>
</html>
Formulaires HTML
L'élément <select>
• Les éléments <option> 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'attribut selected à l'option:
<! DOCTYPE html>
<html>
<body>
<h2> Option présélectionnée </h2>
<p> Vous pouvez présélectionner une option avec l'attribut
sélectionné: </p>
<form action="/ action_page.php">
<label for="cars"> Choisissez une voiture: </label>
<select id="cars" name="cars">
<option value="volvo"> Volvo </option>
<option value="saab"> Saab </option>
<option value="fiat" selected> Fiat </option>
<option value="audi"> Audi </option>
</select>
<input type="submit">
</form>
</body>
</html>
Formulaires HTML
L'élément <select> - Valeurs visibles:
• Utilisez l'attribut size pour spécifier le nombre de valeurs visibles:
<! DOCTYPE html>
<html>
<body>
<h2> Valeurs des options visibles </h2>
<p> Utilisez l'attribut size pour spécifier le nombre de v
aleurs visibles. </p>
<form >
<label for="cars"> Choisissez une voiture: </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> <br> <br>
<input type="submit">
</form>
</body>
</html>
Formulaires HTML
L'élément <select> - sélections multiples:
• Utilisez l'attribut size pour spécifier le nombre de valeurs visibles:
<! DOCTYPE html>
<html>
<body>
<h2> Autoriser plusieurs sélections </h2>
<form>
<label for="cars"> Choisissez une voiture: </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> <br> <br>
<input type="submit">
</form>
<p> Maintenez le bouton Ctrl (Windows) enfoncé pour sélect
ionner plusieurs options. </p>
</body>
</html>
Formulaires HTML
L'élément <textarea>
• L'élément <textarea> définit un champ de saisie multi-ligne (une zone de texte):
• L'attribut rows spécifie le nombre de lignes visibles dans une zone de texte.
• L'attribut cols spécifie la largeur visible d'une zone de texte.
<! DOCTYPE html>
<html>
<body>
<h2> Zone de texte </h2>
<p> L'élément textarea définit un champ de saisie multilig
ne. </p>
<form >
<textarea name="message" rows="10" cols="30"> Le chat
jouait dans le jardin. </textarea>
<br> <br>
<input type="submit">
</form>
</body>
</html>
Formulaires HTML
L'élément <button>
L' élément <button> définit un bouton cliquable:
<! DOCTYPE html>
<html>
<body>
<h2> L'élément button </h2>
<button type="button" onclick="alert ('Bounjour!')"> Cliqu
ez sur moi! </button>
</body>
</html>
Formulaires HTML
Les éléments <fieldset> et <legend>
• L'élément <fieldset> est utilisé pour regrouper les données associées dans un formulaire.
• L'élément <legend> définit une légende pour l'élément <fieldset>.
<! DOCTYPE html>
<html>
<body>
<h2> Regroupement des données de formulaire avec Fieldset
</h2>
<form>
<fieldset>
<legend> Personalia: </legend>
<label for="fname"> Prénom: </label> <br>
<input type="text" id="fname" name="fname" value="
Ahmad"> <br>
<label for="lname"> Nom: </label> <br>
<input type="text" id="lname" name="lname" value="
Benali"> <br> <br>
<input type="submit" value="Envoyer">
</fieldset>
</form>
</body>
</html>
Formulaires HTML
Input Type Password
<input type="password"> définit un champ de mot de passe :
<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>
Formulaires HTML
Input Type Reset
<input type="reset"> définit un bouton de réinitialisation qui réinitialisera toutes les valeurs du formulaire à
<form action="/action_page.php">
<label for="fname">Nom:</label><br>
<input type="text" id="fname" name="fname" value=“Alami"><br>
<label for="lname">Prénom:</label><br>
<input type="text" id="lname" name="lname" value=“Ben"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Formulaires HTML
Input Type Date
Le <input type="date">est utilisé pour les champs de saisie qui doivent contenir une date.
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Formulaires HTML
Input Type Email
Le <input type="email">est utilisé pour les champs de saisie qui doivent contenir une adresse e-mail.
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Formulaires HTML
Input Type Tel
Le <input type="tel">est utilisé pour les champs de saisie qui doivent contenir un numéro de téléphone.
<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>
Formulaires HTML
L'attribut désactivé - disabled
L' disabledattribut d' entrée spécifie qu'un champ d'entrée doit être désactivé.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Formulaires HTML
L'attribut readonly
L' readonlyattribut d' entrée spécifie qu'un champ d'entrée est en lecture seule.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Formulaires HTML
Input Type File
Le <input type="file"> définit un champ de sélection de fichier et un bouton "Parcourir" pour les téléchargements de
fichiers.
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Formulaires CSS
Champs de texte L'élément <label>
• Un formulaire HTML est utilisé pour collecter les entrées utilisateur. L'entrée utilisateur est le plus souvent envoyée à un serveur pour
traitement.
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour l'entrée utilisateur:
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<h2> Formulaires HTML </h2>
<form>
<label for="fname"> Prénom: </label> <br>
<input type="text" id="fname" name="fname"> <br>
<label for="lname"> Nom: </label> <br>
<input type="text" id="lname" name="lname"> <br> <br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Formulaires CSS
Champs de texte L'élément <label>
• Un formulaire HTML est utilisé pour collecter les entrées utilisateur. L'entrée utilisateur est le plus souvent envoyée à un serveur pour
traitement.
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour l'entrée utilisateur:
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
L'exemple ci-dessus s'applique à tous les éléments <input>. Si vous souhaitez uniquement
styliser un type d'entrée spécifique, vous pouvez utiliser des sélecteurs d'attributs:
•input[type=text] - sélectionnera uniquement les champs de texte
•input[type=password] - sélectionnera uniquement les champs de mot de passe
•input[type=number] - sélectionnera uniquement les champs numériques
•etc..
Formulaires CSS
Champs de texte L'élément <label>
• Un formulaire HTML est utilisé pour collecter les entrées utilisateur. L'entrée utilisateur est le plus souvent envoyée à un serveur pour
traitement.
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour l'entrée utilisateur:
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
} </style>
</head>
<body>
<h2> Formulaires HTML </h2>
<form>
<label for="fname"> Prénom: </label> <br>
<input type="text" id="fname" name="fname"> <br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Formulaires CSS
Champs de texte L'élément <label>
• Un formulaire HTML est utilisé pour collecter les entrées utilisateur. L'entrée utilisateur est le plus souvent envoyée à un serveur pour
traitement.
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour l'entrée utilisateur:
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
background-color: #3CBC8D;
color: white;
border: 2px solid red;
border-radius: 4px;
}
</style>
</head>
<body>
<h2> Formulaires HTML </h2>
<form>
<label for="fname"> Prénom: </label> <br>
<input type="text" id="fname" name="fname"> <br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Formulaires CSS
Entrées ciblées - Focused Inputs
• Un formulaire HTML est utilisé pour collecter les entrées utilisateur. L'entrée utilisateur est le plus souvent envoyée à un serveur pour
traitement.
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour l'entrée utilisateur:
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>
<h2> Formulaires HTML </h2>
<form>
<label for="fname"> Prénom: </label> <br>
<input type="text" id="fname" name="fname"> <br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Formulaires CSS
Entrées ciblées - Focused Inputs
• Un formulaire HTML est utilisé pour collecter les entrées utilisateur. L'entrée utilisateur est le plus souvent envoyée à un serveur pour
traitement.
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour l'entrée utilisateur:
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la saisie de texte.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
background-color: white;
background-image: url('[Link]');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
</style>
</head>
<body>
<h2> Formulaires HTML </h2>
<form>
<label for="fname"> Prénom: </label> <br>
<input type="text" id="fname" name="fname"> <br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>
Formulaires CSS
L'élément <select>
L'élément <select> définit une liste déroulante:
<! DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<form>
<label for="cars"> Choisissez une voiture: </label>
<select id="cars" name="cars">
<option value="volvo"> Volvo </option>
<option value="hyundai"> Hyundai </option>
<option value="fiat"> Fiat </option>
<option value="audi"> Audi </option>
</select>
<input type="submit">
</form>
</body>
</html>