Réseaux et langages du web - TD4

L2 MIASHS

Fonctionnement des formulaires HTML

1. Des pages dynamiques

Comme on l'a vu lors des séances précédentes, il est possible d'écrire à la main une page web à l'aide des langages HTML et CSS. Aujourd'hui en réalité, la plupart des pages web que nous consultons sont générées automatiquement par des programmes (des programmes qui savent écrire en HTML ...). C'est le cas par exemple des moteurs de recherche, qui doivent être capable d'afficher une page de résultat à partir de n'importe quelle combinaison de mots clé (il y a un nombre quasi-infini de combinaisons de mots clés différentes...). Un moteur de recherche est un programme qui "calcule" et écrit sous la forme d'une page HTML une liste de sites web correspondant aux mots clé rentrés par l'utilisateur. Pour pouvoir s'éxéctuer, le programme nécéssite différents paramètres : les mots clés recherchés, le type de résultat recherché (page web, images, vidéos...), la langue dans laquelle est effectuée la recherche, etc…

  1. Dans la barre d'url de votre navigateur, saisissez les URL suivants et relevez en quoi diffèrent les pages générées :
    • https://www.google.fr/search?q=chat
    • https://www.google.fr/search?q=chat&hl=it
    • https://www.google.fr/search?q=chat&hl=fr&tbm=vid
  2. Quel sont les noms des paramètres que vous identifiez pour le service de google et quels sont les couples de (paramètre+valeurs) qui ont été utilisés dans ces URLs ?
  3. Allez sur https://fr.search.yahoo.com/, puis entrez chat dans le formulaire.
  4. Identifiez le nom du paramètre qui identifie les termes recherchés
  5. Vérifiez en effectuant une recherche Yahoo de "chien" directement en tappant un URL (comme dans la question 1).

2. Un formulaire pour former des URLs

  1. Faire une page web minimale en vous inspirant des premiers TPs. Ajoutez dans le body :

    <h1>Pour comprendre</h1>
    <form method="GET">
      <input name="a" type="text">
      <input type="submit">
    </form>
    

    Ques se passe t-il lorsque vous validez le formulaire ?

  2. Dupliquez le formulaire et ajoutez l'attribut action dans l'élément form qui aura pour valeur toto.html. Validez ce second formulaire et observez l'url.
  3. Qu'en déduisez-vous sur la signification de l'attribut action de la balise form ? Que signifient les attributs name dans les élément input ?
  4. Dupliquez à nouveau le code du formulaire sous un nouveau titre Recherche Google et faites en sorte que la validation redirige vers la page de réponse Google associée au texte saisi dans le champs.
  5. Idem avec le moteur de recherche Yahoo.
  6. Reprenez votre formulaire de recherche Google (question 4). À l'intérieur de la balise form, ajoutez le bloc ci-dessous, entre les deux éléments input précédents :

    <br>
    <input type="radio" name="abc" value="toto"> option 1
    <br>
    <input type="radio" name="abc" value="titi"> option 2
    <br>
    
  7. Testez votre page, validez le formulaire et observez l'URL qui a été construit.

3. Les différentes méthodes

  1. Dupliquez le formulaire ci-dessus (rechercher Google) et remplacez l'action par https://louisbigo.com/form-param.php. Cette page affiche simplement les différents paramètres (nom + valeur) qui accompagnent une requête GET ou POST.
  2. Modifiez l'attribut method en lui donnant l'autre valeur possible à savoir POST (plutôt que GET). Que constatez vous à propos de l'URL après validation ? et des résultats affichés ?
  3. Essayez de recharger la page. Un message s'affiche dans une fenêtre. Quelles sont ces "informations précédemment transmises" dont parle le message ?
  4. Retournez sur votre page HTML et ouvrez la fenêtre d'analyse du réseau (Outils/Developpement web/Réseau). Remplissez les champs et validez le formulaire, une fois avec get et une fois avec post. Observez les différences dans l'outil d'analyse du réseau
    • la valeur dans la colonne "Méthode"
    • après avoir cliqué sur la ligne de la requête, jetez un oeil dans l'onglet "Paramètres"
    • dans l'onglet "En-têtes" cliquer sur "Modifier et renvoyer" afin d'afficher le corps de chaque requête

4. Les types d'entrée et types de contrôle

  1. Testez les attributs size, maxlength, value, placeholder de l'élément HTML input, en leur donnant des valeurs pour observer leurs effets sur les zones de saisie. Que font-ils ?
  2. Ajoutez à votre formulaire un nouvel élément input avec l'attribut type qui a la valeur hidden. Ajoutez un attribut name qui vaut xyz et un attribut value qui vaut bonjour. Que se passe-t-il ?
  3. Essayez les types checkbox et radio (en particulier, crééz plusieurs champs de type radio). Que devez-vous faire sur l'attribut name pour rendre les boutons radios exclusifs ?
  4. Il éxiste en HTML5 d'autres types pour les formulaires (date, datetime, search, tel, search,…). Essayez les types suivants :
    • email
    • url
    • number et range (changer les attributs min, max, step)
    • color
  5. Testez maintenant le type file. Pour cela, vous devez passer les arguments par post et spécifier leur encodage par l'attribut enctype qui vaut multipart/form-data. Par ailleurs, pour cet exercice le nom du champ doit être fichier.
  6. Ajoutez maintenant une liste de choix de langue avec les éléments select et les éléments option. Utilisez les attributs value avec les valeurs fr, en, it. Les valeurs affichées doivent être respectivement français, English, Italiano.
  7. Ajoutez un formulaire google avec le choix de la langue. Le nom du paramètre est hl.
  8. Faites un troisième formulaire et y placer une zone de texte multiligne dans votre formulaire en utilisant l'élément textarea. Comment peut-on la préremplir?
  9. Inspirez-vous de http://www.w3schools.com/css/css_form.asp pour mettre en forme vos formulaires avec une jolie CSS. Il faut notamment que :
    • le champs de saisie de texte et le menu déroulant doivent avoir une largeur de 25%
    • le champ de saisie doit avoir un espacement intérieur (=padding) de 15px. (ne pas utiliser de sélécteur d'id pour cette question).
    • le menu déroulant doit avoir un espacement intérieur de 10px.
    • le champ et le menu déroulant doivent avoir une marge extérieure (margin) de 10px.
    • la bordure du champ de saisie doit être bleue et avoir des coins arrondis
    • les éléments du menu déroulant doivent s'afficher en blanc sur fond bleu
    • le bouton de validation doit être bleu, texte blanc, espacement intérieur de 20px, pas de bordure.