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…
- 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
- 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 ?
- Allez sur https://fr.search.yahoo.com/, puis entrez
chat
dans le formulaire. - Identifiez le nom du paramètre qui identifie les termes recherchés
- 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
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 ?
- Dupliquez le formulaire et ajoutez l'attribut
action
dans l'élémentform
qui aura pour valeurtoto.html
. Validez ce second formulaire et observez l'url. - Qu'en déduisez-vous sur la signification de l'attribut
action
de la baliseform
? Que signifient les attributsname
dans les élémentinput
? - 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.
- Idem avec le moteur de recherche Yahoo.
Reprenez votre formulaire de recherche Google (question 4). À l'intérieur de la balise
form
, ajoutez le bloc ci-dessous, entre les deux élémentsinput
précédents :<br> <input type="radio" name="abc" value="toto"> option 1 <br> <input type="radio" name="abc" value="titi"> option 2 <br>
- Testez votre page, validez le formulaire et observez l'URL qui a été construit.
3. Les différentes méthodes
- 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êteGET
ouPOST
. - Modifiez l'attribut
method
en lui donnant l'autre valeur possible à savoirPOST
(plutôt queGET
). Que constatez vous à propos de l'URL après validation ? et des résultats affichés ? - 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 ?
- 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 avecpost
. 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
- Testez les attributs
size
,maxlength
,value
,placeholder
de l'élément HTMLinput
, en leur donnant des valeurs pour observer leurs effets sur les zones de saisie. Que font-ils ? - Ajoutez à votre formulaire un nouvel élément
input
avec l'attribut type qui a la valeurhidden
. Ajoutez un attributname
qui vautxyz
et un attributvalue
qui vautbonjour
. Que se passe-t-il ? - Essayez les types
checkbox
etradio
(en particulier, crééz plusieurs champs de type radio). Que devez-vous faire sur l'attributname
pour rendre les boutons radios exclusifs ? - Il éxiste en HTML5 d'autres types pour les formulaires (date, datetime, search, tel, search,…). Essayez les types suivants :
- url
- number et range (changer les attributs min, max, step)
- color
- Testez maintenant le type
file
. Pour cela, vous devez passer les arguments parpost
et spécifier leur encodage par l'attributenctype
qui vautmultipart/form-data
. Par ailleurs, pour cet exercice le nom du champ doit êtrefichier
. - Ajoutez maintenant une liste de choix de langue avec les éléments
select
et les élémentsoption
. Utilisez les attributs value avec les valeursfr
,en
,it
. Les valeurs affichées doivent être respectivement français, English, Italiano. - Ajoutez un formulaire google avec le choix de la langue. Le nom du paramètre est
hl
. - 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? - 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.