Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP Formulaire Modif

    Transféré par

    Braxt MwIra Gibecière
    212 vues5 pages
    formulaire

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    formulaire

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    212 vues5 pages

    TP Formulaire Modif

    Transféré par

    Braxt MwIra Gibecière
    formulaire

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    TP Formulaire 2017-2018

    TRAVAUX PRATIQUES SERVEUR WEB : FORMULAIRE ET


    JAVASCRIPT
    Pré-requis :
    Maitriser le HTML basique
    Connaissance sur l’éditeur de texte

    Compétences Visées :
    S4.7. Langage de programmation :
    - Web statique : HTML
    - Web dynamique : JavaScript

    I. EXECUTION ET COMPREHENSION
    Soit le fichier html suivant :
    <!DOCTYPE HTML">
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Exemple</title>
    </head>
    <body>
    <hr>
    <div id="bloc">
    <form name ="myForm" onsubmit="return validateForm()"
    method="post">
    <p>
    Civilité <select id="select" name ="fcivilite">
    <option value="">Votre civilité</option>
    <option value="Monsieur">M.</option>
    <option value="Madame" selected>Mme</option>
    <option value="Mademoiselle">Mlle</option>
    </select><br>

    nom :<input type="text" id="nom" name ="fname" ><br>

    prenom :<input type="text" id="prenom" name ="fprename" ><br>

    adresse :<input type="text" id="adresse" name ="fadresse"><br>

    ville :<input type="text" id="ville" name ="fville"><br>

    1
    code postale :<input type="text" id="postale" name ="fpostale"><br>

    <input type="radio" name="subscribe" value="subscribe to newslettre"> je


    souhaite recevoir la newslettre<br>

    couriel :<input type="text" id="couriel" name ="fcouriel"><br>

    <input type="submit" value="Envoyer">


    <input type="reset" value="Réinitialiser">
    </p>
    </form>
    <hr>
    </body>
    </html>

    On vous demande d’exécuter le code précédent et d’en saisir la bonne compréhension de


    chacune de balise. Nommer le fichier "exempleformulaire.html"
    Ressource pour la compréhension des balises input et ses attributs:
    https://www.w3schools.com/html/html_forms.asp

    II. Travail demandé :


    A partir du code précédent, il vous est demandé de créer dans la page "inscription.html" un
    formulaire d’inscription d’un internaute à une newsletter.
    Les informations qui doivent être saisies sont les suivantes :
    Civilité {Mme., Mlle., M.}
    Nom Chaîne de caractères alphabétiques.
    Prénom Chaîne de caractères alphabétiques.
    Date de naissance jj/mm/aaaa
    Adresse Une adresse (voir ci-après)
    Téléphone 8 chiffres
    Adresse e-mail Nom.prenom@domain.tld

    Une adresse est composée des champs suivants :

    Numéro Un nombre
    Rue Chaîne alphanumérique
    Code postal Cinq chiffres
    Ville Chaîne de caractères.

    Remarque :
    R1. Une bonne manière de procéder serait de modifier le code du point I.
    R2. Signalons que nous aurons besoin des notions de tableau. C'est-à-dire, c’est dans un
    tableau que nous créerons notre formulaire d’inscription.

    RESULTAT :
    L’affichage se fera en utilisant un navigateur (Browser) de votre choix. En utilisant chrome,
    l’affichage se fait de la manière suivante :

    2
    PENSEZ A COMMENTER VOTRE CODE. CELA VOUS PERMETTRA
    DE COMPRENDRE L’UTILISATION DE CHAQUE BALISE.
    Ressource :
    https://www.w3schools.com/html/html_forms.asp : pour le formulaire
    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_border : pour
    le tableau
    III. INTEGRATION DU CODE JAVASCRIPT ET VERIFICATION DE
    CHAMPS
    Soit le fichier fonction.js qui suit :
    function validateForm( ) {
    var a = document.forms["myForm"]["fcivilite"].value;
    var b = document.forms["myForm"]["fname"].value;
    var c = document.forms["myForm"]["fprename"].value;
    var d = document.forms["myForm"]["fadresse"].value;
    var e = document.forms["myForm"]["fville"].value;
    var f = document.forms["myForm"]["fpostale"].value;
    var g = document.forms["myForm"]["fcouriel"].value;

    if (a == "") {
    alert("Entrez votre civilite");

    if (b == "") {
    alert("Entrez votre nom");

    if (c == "") {
    alert("Entrez votre prenom");

    3
    if (d == "") {
    alert("Entrez votre adresse");

    if (e == "") {
    alert("Entrez votre ville");

    if (f == "") {
    alert("Entrez votre code postale");

    if (g == "") {
    alert("Entrez votre couriel");
    return false;
    }
    }

    Reprendre le fichier "exempleformulaire.html", on vous demande d’intégrer le script


    JavaScript soit en utilisant un lien externe, soit en utilisant un lien interne.
    Vous devez l’exécuter et le comprendre

    Résultat : Ce script permet de vérifier les champs vides d’un formulaire.

    Travail demandé :
    Reprendre notre fichier "inscription.html", nous souhaitons intégrer l’interactivité en utilisant les
    scripts JavaScript. Inspirez-vous du script fonction.js. Les champs à vérifier sont : le Nom, le
    Prénom, le Numéro, la Rue, le Code Postal, la Ville, le Téléphone et E-mail.

    IV. Validation du champs code Postal


    Soit le fichier HTML nommé "code.html" suivant :
    <!DOCTYPE html>
    <html>
    <head>
    <title> Travaux pratiques </title>
    <meta http-equiv="Content-type" content="text/html; charset= UTF-8">
    <script type="text/javascript">
    function verif(){
    var l = document.form.input.value.length

    if ((l<5) || (l>5)){
    document.form.output.value ="code non valide";
    return false;
    }

    if (isNaN(document.form.input.value) == true){
    document.form.output.value ="Pas de lettres !";
    }

    4
    if (l == 5){
    document.form.output.value ="code valide";
    return false;
    }
    }
    </script>

    <body>
    <form name ="form" action=" ">
    code postal : <input type="text" name = "input" size ="10" onfocus="annuler()">
    <input type="button" value="verifier" onclick="verif()"> <br>
    <input type="text" name ="output" size="38">
    </form>
    <body>
    </html>

    Le fichier permet de vérifier si nous avons entré 5 chiffres dans la ligne de texte code Postal

    Travail demandé :
    Reprendre votre fichier inscription.html, il vous est demandé d’intégrer la vérification de la ligne de
    texte code postal.
    Le test porte sur la présence de 5 caractères (pas plus, pas moins), et ces caractères ne peuvent pas
    être des lettres.

    Remarque : Pour se faire, inspirez-vous du script précédent.

    V. Question Bonus : Formulaire d’inscription


    Ayant compris le concept des questions précédentes, vous allez réaliser le formulaire ci-dessous :

    Question : Écrire le code HTML produisant ce formulaire

    Vous aimerez peut-être aussi