Programmation Web TD6- HTML- Formulaires

Dimension: px

Commencer à balayer dès la page:

Download "Programmation Web TD6- HTML- Formulaires"

Yvonne Trudeau
il y a 6 ans
Total affichages :

1 Université de la Manouba Ecole Supérieure d'economie Numérique Programmation Web TD6- HTML- Formulaires Objectifs - Développer des pages Web HTML5 validées - Mettre en place des formulaires en HTML5 Consignes: Tout fichier HTML doit contenir le code HTML de base, et doit être validé. Exercice 1: Création d'un formulaire Simple 1. Créer un fichier HTML en utilisant le logiciel Notepad Enregistrer le fichier sous le nom formulaire.html dans le dossier HTML de votre site web. Reproduire le résultat suivant. Il est à noter que tous les objets ont des noms, des valeurs pour ceux qui en ont besoin et des labels. Le formulaire est envoyé par la méthode get au fichier formulaire.php. Les champs de texte sont obligatoires, de taille 35 et la taille max= 256. Le champ Nom, prend le focus sur le chargement de la page. La liste contient : Entreprise, Produits, Fournitures, Employé et Autre. 3. Visualiser le résultat dans un navigateur. 4. Valider le code HTML en utilisant le validateur en ligne de W3C, Page 1

2 Exercice 2: Création d'un formulaire avec mise en forme CSS 1. Créer un fichier HTML en utilisant le logiciel Notepad Enregistrer le fichier sous le nom mail.html dans le dossier HTML de votre site web. Reproduire le résultat suivant. Il est à noter que : Tous les objets ont des noms, des valeurs pour ceux qui en ont besoin et des labels. Le formulaire est envoyé par la méthode get au fichier mail.php. Les champs de texte sont obligatoires et chacun figure dans un paragraphe. Pour le reste des objets du formulaire, chaque objet/groupe figure dans un paragraphe avec son titre. Le champ Nom, prend le focus sur le chargement de la page. 3. Visualiser le résultat dans un navigateur. 4. Valider le code HTML en utilisant le validateur en ligne de W3C, Exercice 3: Création d'un formulaire avec les nouveautés HTML5 1. Créer un fichier HTML en utilisant le logiciel Notepad Enregistrer le fichier sous le nom formulairenouveautes.html dans le dossier HTML de votre site web. 3. Reproduire le résultat présenté ci-dessous. Il n'est pas nécessaire de reproduire les textes d'indication. 4. Visualiser le résultat dans les versions les plus récentes des navigateurs (au moins Google Chrome 30). 5. Valider le code HTML en utilisant le validateur en ligne de W3C, Page 2

3 Page 3

4 Exercice 1: Création d'un formulaire simple Correction /> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>formulaire de contact</title> </head> <body> <form name= "Contact" action= "formulaire.php" method = "get"> <H1> Exemple de formulaire de contact</h1> <h2>quel type de message voulez-vous envoyer?</h2> <p> <input type="radio" value="infos" name="typemessage" id="informations" /> <label for="informations">informations</label> <input type="radio" value="aide" name="typemessage" id="aide" /> <label for="aide">aide</label> <input type="radio" value="suggestion" name="typemessage" id="suggestion" checked <label for="suggestion">suggestion</label> <input type="radio" value="merci" name="typemessage" id="remerciements" /> <label for="remerciements">remerciements</label>  <h2><label for="options">quel est l'objet de votre envoi?</label></h2> <select name="options" id="options"> <option value="entreprise">entreprise</option> <option value="produits">produits</option> <option value="fournitures">fournitures</option> <option value="employe">employé</option> <option value="autre">(autre)</option> </select> <h2><label for="commentaires">tapez vos commentaires dans l'espace ci-dessous :</label></h2>  <textarea name="commentaires" rows="3" cols="50" id="commentaires"></textarea> <fieldset> <legend>vos coordonnées</legend>  <h2>indiquez vos coordonnées :</h2> <table>  Page 4

5 <tr> <td><label for="nom">nom :</label></td> <td><input maxlength="256" size="35" name="nomutilisateur" id="nom" placeholder="votre nom" required autofocus /></td> </tr> <tr> <td><label for=" ">adresse de messagerie :</label></td> <td> <input type=" " id=" " maxlength="256" size="35" name=" utilisateur" placeholder="votre " required/> </td> </tr> </table> </fieldset> <p>  <input type="checkbox" value="contactrequested" name="demandedecontact" checked id="contact" /> <label for="contact">veuillez me contacter dès que possible...</label> <p> <input type="submit" value="envoyer les informations" /> <input type="reset" value="effacer le contenu du formulaire" /> </form> </body> </html> Exercice 2: Création d'un formulaire avec mise en forme CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mail</title> <link rel="stylesheet" href="../css/styl .css" /> </head> <body> <h1 class="titre">formulaire d'inscription</h1> <div class="centrer"><img src="../images/lire.jpg" alt="lire" id="lire"/></div> <form name= "Contact" action= "mail.php" method="get"> <fieldset> <legend id="coordonnes">vos coordonnées</legend> <p> <label for="nom">nom</label> <input type="text" name="nom" id="nom" required autofocus /> Page 5

6 <p> <label for="prenom">prénom</label> <input type="text" name="prenom" id="prenom" required /> <p> <label for=" "> </label> <input type=" " name=" " id=" " required /> </fieldset> <fieldset> <legend id="choix">vos choix</legend> <p class="format">urgent <input type="radio" name="urgent" value="oui" id="oui"> <label for="oui">oui</label> <input type="radio" name="urgent" value="non" id="non"> <label for="non">non</label> <p class="format">comptétences <input type="checkbox" name="competence" value="html" id="html" /> <label for="html">html</label> <input type="checkbox" name="competence" value="javascript" id="javascript" /> <label for="javascript">javascript</label> <input type="checkbox" name="competence" value="css" id="css" /> <label for="css">css</label> <input type="checkbox" name="competence" value="php" id="php" /> <label for="php">php</label> <input type="checkbox" name="competence" value="xml" id="xml" /> <label for="xml">xml</label> <p class="format">langues de formation <select name="langue" size="3" multiple> <option value="arabe">arabe</option> <option value="francais">français</option> <option value="anglais">anglais</option> </select> <p class="format">commentaires <textarea name="message"></textarea> Page 6

7 </fieldset> <p id="send" class="centrer"> <input type="submit" name="envoyer" value="envoyer" id="image-button"> </form> </body> </html> Exercice 3: Création d'un formulaire avec les nouveautés HTML5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>formulaire avec les nouveautés HTML5</title> </head> <body> <h1>formulaire avec les nouveautés HTML5</h1> <form> <p><label for="text">nom:</label> <input type="text" name="text" id="text" placeholder="inserer votre texte ici" required autofocus /> NB: Champ de texte obligatoire avec placeholder et autofocus <p><label for="url">url</label> <input type="url" id="url" name="url" placeholder=" /> NB: Tous les types d'url sont admis (ftp://, mailto:, etc.). <p><label for=" "> </label> <input type=" " id=" " name=" " /> NB: Ce champ attend au minium un caractère (caractère non accentué comprenant les séparateurs tiret ou underscore) suivi suivi à son tour d'un caractère. <p><label for="tel">tel</label> <input type="tel" id="tel" name="tel" placeholder="votre um de tel" pattern="[0-9]{8}" maxlength="8" /> NB:Un contrôle avec l'attribut pattern est nécessaire. pattern="[0-9]{8}" <p><label for="numeric">age avec Format numerique</label> <input type="number" name="numeric" id="numeric" min="20" max="30" value="22" step="1" /> NB: Les attributs utilisés:age min=20 age max=30 valeur par défaut=22 pas=1 <p><label for="moyenne">moyenne</label> <input type="number" name="moyenne" id="moyenne" value="0" min="0" max="20" step="0.25" /> NB: Les attributs utilisés:moyenne min=0 moyenne max=20 valeur par défaut=0 pas=0.25 <p><label for="date">date de naissance</label> Page 7

8 <input type="date" name="date" id="date" min=" " max=" " value=" " /> NB: Les attributs utilisés:min=" " max=" " value=" " <p><label for="heure">heure de naissance</label> <input type="time" name="heure" id="heure" /> <p><label for="color-picker">choix de la couleur</label> <input type="color" name="color-picker" id="color-picker" value="#ff0000" /> NB: value="#ff0000" <p><label for="slider">niveau en DEV Web (0 à 5) Slider</label> <input type="range" name="range" id="slider" min="0" max="5" step="1" value="0" onchange="showvalue(this.value)" /> <span id="range">0</span> <script type="text/javascript"> function showvalue(newvalue) { document.getelementbyid("range").innerhtml=newvalue; } </script> <p>code: <p><input type="range" name="range" id="slider" min="0" max="5" step="1" value="0" onchange="showvalue(this.value)" /><br> <span id="range">0</span><br> <script type="text/javascript"><br> function showvalue(newvalue)<br> {<br> document.getelementbyid("range").innerhtml=newvalue;<br> }<br> </script><br> <p><input type="submit" value="soumettre le formulaire" /> </form> </body> </html> Page 8

Documents pareils

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez