TP2
Exercice 1 :
Sachant que :
• Les champs seront respectivement appelés motclef, categorie et dept
• Le formulaire aura pour action : #
Avez essayé de cliquer sur le bouton soumission ?
Si vous choisissez # comme action, il ne se passe rien. Essayez désormais en utilisant l’action
suivante : [Link]
Le fichier [Link] est un fichier codé en PHP qui permet de traiter et d’afficher les valeurs de
votre formulaire.
• Essayé une fois avec la méthode get
•Essayé une autre fois avec la méthode post
Exercice 2 :
Énoncé de l'exercice :
[Link] devez créer une page HTML pour afficher votre CV. Voici les consignes à suivre :
[Link]éez un fichier HTML nommé "[Link]".
À l'intérieur de la balise <body>, créez une structure de base pour la page, comprenant :
Un en-tête avec le titre "Mon CV" en tant que <h1>.
Ajoutez une photo de vous. Utilisez la balise <img> pour insérer votre photo, en spécifiant le
chemin vers l'image dans l'attribut src. Assurez-vous d'avoir une image au format JPG .
Une section pour chaque rubrique suivante : Formation, Expérience professionnelle,
Compétences et Informations complémentaires.
[Link] section doit être représentée par un tableau sans bordure, occupant 100% de la largeur
de l'écran. Utilisez la balise <table> pour créer les tableaux.
[Link] chaque rubrique, créez un titre en tant que cellule d'en-tête (<th>) avec l'attribut colspan
défini sur 2 pour fusionner les cellules.
5.À l'intérieur de chaque section, créez un tableau à 2 colonnes et N lignes pour afficher les
informations correspondantes. Utilisez les balises <tr> pour les lignes et <td> pour les cellules.
[Link] colonne de gauche doit contenir une liste à puces (<ul>) représentant les années de chaque
élément. Chaque année doit être un élément de la liste (<li>).
[Link] colonne de droite doit contenir une description correspondant à chaque année. Utilisez
également une liste à puces (<ul>) avec des éléments <li> pour les descriptions.
Testez votre page en l'ouvrant dans un navigateur web pour vous assurer que votre CV s'affiche
correctement.
Remarque :
Voici le style de tableau :
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
Exercice3 :
[Link] formulaire commence par un titre <h1> indiquant "Formulaire".
[Link], il y a une série de champs de saisie, chacun étant précédé d'un <label> qui décrit le
champ.
*Le champ "Nom" est un champ de type texte <input type="text"> avec l'ID "nom" et le nom
"nom".
*Le champ "Prénom" est similaire avec l'ID "prenom" et le nom "prenom".
*Le champ "Email" est un champ de type email <input type="email"> avec l'ID "email" et le
nom "email".
*Le champ "Message" est un champ de texte multi-ligne <textarea> avec l'ID "message" et le
nom "message".
[Link], il y a un champ de sélection "Genre" avec un <select> contenant deux options :
"Homme" et "Femme".
[Link]ès cela, il y a une série de cases à cocher pour les "Intérêts" avec des <input
type="checkbox">.
*Chaque case à cocher est précédée d'un <label> décrivant l'intérêt correspondant.
*Les cases à cocher ont des ID et des noms différents, et une valeur correspondante est
également spécifiée.
[Link] champ "Ville" est un champ de type texte avec une liste déroulante <datalist> contenant
plusieurs options de villes.
[Link], il y a un groupe d'options "Options" avec une légende <legend> et deux boutons
radio <input type="radio">.
[Link] champ "Couleur" est un champ de type couleur <input type="color">.
[Link] champ "Date" est un champ de type date <input type="date">.
[Link] champ "Date et heure" est un champ de type datetime-local <input type="datetime-local">.
[Link] champ "Fichier" est un champ de type fichier <input type="file">.
[Link] y a également un champ caché <input type="hidden"> avec un nom et une valeur spécifiée.
[Link] champ "Image" est un bouton d'image <input type="image"> avec une source d'image
spécifiée.
[Link] champ "Mois" est un champ de type mois <input type="month">.
[Link] champ "Nombre" est un champ de type nombre <input type="number">.
[Link] champ "Mot de passe" est un champ de type mot de passe <input type="password">.
[Link] y a un groupe d'options "Choix" avec deux boutons radio.
[Link] champ "Plage" est un champ de type plage <input type="range">.
[Link] formulaire a également un bouton "Réinitialiser" <input type="reset">.
[Link] y a un champ de recherche <input type="search"> avec un nom et un attribut de
placeholder.
[Link] formulaire se termine avec un bouton "Envoyer" <input type="submit">.
[Link] y a des champs supplémentaires tels que "Téléphone", "Texte", "Heure",
