DR : Oriental Module : Développer des sites statiques

Etablissement : CFMNTIOE << Travaux pratiques >>

Formateur : Zakaria KADDARI
OFPPT

Série TP N 02
Parties abordées dans cette série :
Les tableaux en HTML
Fusion des lignes et des colonnes dans les tableaux
Les formulaires en HTML5
Les nouveaux champs HTML5
La validation HTML5 des formulaires

TP 01 :
1. Créez le tableau suivant sachant que :
• Le tableau s’étend sur la totalité de la largeur de la fenêtre
• La bordure du tableau fait 2 pixels de large
• La première ligne est une ligne d’en-tête

Nom Prénom Filière Groupe

ALAMI Karim TDI 202
ALAOUI Fatima TDM 102
Berrichi Moad TRI 201

2. Reproduisez le tableau ci-dessous en respectant les alignements :

3. Donnez le code complet du formulaire suivant :

4. Modifiez-le pour avoir le formulaire suivant :

1
 DR : Oriental Module : Développer des sites statiques
Etablissement : CFMNTIOE << Travaux pratiques >>
Formateur : Zakaria KADDARI
OFPPT

5. Reproduisez le formulaire suivant :

TP 02 :
1. Créer un formulaire HTML5 qui contient des champs suivants :

Champ Type Règles de validation Remarques

Nom Texte Obligatoire
Prénom Texte Obligatoire
Adresse TextArea 20 lignes et 50 colonnes
Email Email Obligatoire/Email
Téléphone Tel Obligatoire/Téléphone
Site web url Site web
Date de naissance date Obligatoire/Date
Nombre d’enfants number Nombre
Niveau en HTML5 range
Couleur préférée color

2
 DR : Oriental Module : Développer des sites statiques
Etablissement : CFMNTIOE << Travaux pratiques >>
Formateur : Zakaria KADDARI
OFPPT

Filière datalist Valeurs possible : TDI, TRI,

TDM, TSFE, MECA, INFOG,
TMSIR
Langues maitrisées Checkbox Valeurs : Arabe, Français,
Anglais
Groupe Radio Valeurs : 201, 202
Module select Valeurs : M01, M02, M03,
M04, M05
CV File
Envoyer Submit
Reset Reset