Le Web - Première NSI

Bulle de dialogue

Bonjour, je m'appelle Pascale D. Bob.

Merci aux Terminales de m'avoir trouvé un nom.

Entrons dans le monde des sciences du numérique !

A la découverte de l'informatique !

Un jour, je serai le roi du Python !

Revenons sur la page d'accueil.

Où veux-tu aller ?

bannière clavier
⇡

Chapitre 5 - Le Web

Le World Wide Web est un système hypertexte public fonctionnant sur Internet créé dans les années 1989-90.


5 - Les formulaires HTML

5.1. La balise 'input'

5.2. La balise 'label'

5.3. Envoyer les données



Revenir au menu principal



5 - Les formulaires HTML


5.1. La balise 'input'

La balise input permet aux pages Web de communiquer avec les utilisateurs et les utilisatrices. Cette balise a un attribut type qui permet de choisir différents types de saisie.


Commençons pas les saisies de textes :

Code HTMLZones de saisies
<input type="text">

C'est le plus utilisé car il convient pour tous les textes à saisir.
<input type="tel">
<input type="email">
<input type="url">
<input type="number">

Il permet de saisir uniquement des nombres.
<input type="password">

Il cache la saisie par des *.
<input type="search">

Il possède une croix permettant de supprimer la saisie.

Les types tel, email et url ne restreignent pas la saisie. Par exemple, on peut écrire un email dans une zone de saisie de type url.

Leur utilité réside dans le fait que les navigateurs les détectent, ce qui permet de sauvegarder des informations.


Code HTMLZones de saisies
<input type="text" value="NSI">
<input type="tel" placeholder="N° de tél.">

Il est possible de pré-remplir les zones de saisies, avec l'attribut value :

Il est aussi possible d'indiqué ce que l'utilisateur doit saisir, avec l'attribut placeholder :



Les boutons checkbox

Les types checkbox sont très utilisés dans les formulaires, notamment dans les QCM.

Code HTMLBoutons checkbox
<input type="checkbox"> Réponse 1 <input type="checkbox"> Réponse 2 <input type="checkbox"> Réponse 3

Réponse 1

Réponse 2

Réponse 3

Il est possible de cocher un bouton checkbox par défaut avec l'attribut checked.

Code HTMLBoutons checkbox
<input type="checkbox" checked> Réponse

Réponse



Les boutons radios

Les types radio sont toute autant utilisés que le type précédent.

Code HTMLBoutons radios
<input type="radio"> Réponse 1 <input type="radio"> Réponse 2 <input type="radio"> Réponse 3 <input type="radio"> Réponse 4

Réponse 1

Réponse 2

Réponse 3

Réponse 4

Si tu as cliqué sur les boutons radios précédent, tu as du constater qu'il n'était pas possible de décocher les boutons une fois valider... Ce qui est embêtant car le principe des boutons radios est que le choix doit être unique.

Pour régler ce problème, il faut ajouter l'attribut name !

Pour lier des boutons radios, il faut qu'ils aient la même valeur dans l'attribut name.

Code HTMLBoutons radios
<input type="radio" name="animaux"> Chat <input type="radio" name="animaux"> Chien <input type="radio" name="animaux"> Oiseau <input type="radio" name="binaire"> 0 <input type="radio" name="binaire"> 1

Chat

Chien

Oiseau

0

1

Il est possible de cocher un bouton checkbox par défaut avec l'attribut checked.

Code HTMLBoutons radios
<input type="radio" checked> Réponse

Réponse


Les boutons

Les boutons de type button sont peu utilisés, voir inutiles sans JavaScript.

Les boutons de type submit sont très importants : ils permettent de valider le formulaire et d'envoyer les données au serveur du site Web.

L'attribut value permet de donner un nom au bouton.

Code HTMLBoutons
<input type="button"> <input type="button" value="Texte"> <input type="submit"> <input type="submit" value="Texte">



Les dates et les heures

Code HTMLZones de saisies
<input type="date"> <input type="week"> <input type="month"> <input type="datetime-local"> <input type="time">



Les autres input

Code HTMLZones de saisies
<input type="color"> <input type="range"> <input type="hidden" value="val. cachée"> <input type="file">




5.2. La balise 'label'

Les balises input doivent toujours être accompagnées d'une balise label.

Cette balise est un texte lié à la balise input, qui indique à l'utilisateur/utilisatrice ce qu'il/elle doit fait.


Pour lier les deux balises, il faut :

On rappelle que les identifiants sont uniques.

Exemples :

Codes HTMLAffichages
<label> Ton prénom : <input type="text"> </label> <label> Ton nom : <input type="text"> </label> <label> <input type="checkbox"> Chat </label> <label> <input type="checkbox"> Chien </label>




Codes HTMLAffichages
<label for="pre1"> Ton prénom :</label> <input type="text" id="pre1"> <label for="nom2">Ton nom :</label> <input type="text" id="nom2"> <input type="checkbox" id="cha"> <label for="cha">Chat</label> <input type="checkbox" id="chi1"> <label for="chi1">Chien</label>




Note :



5.3. Envoyer les données

La balise form contient toutes les balises de formulaire.

Si des balises input se trouvent hors d'une balise form, elles ne seront pas prise en compte lorsque le formulaire sera validé.


Pour que les données ne soient pas envoyées n'importe comment, on va donner un nom à chaque balise input à l'aide de l'attribut name.

Toutes les valeurs de name doivent être différentes (comme les attributs id), sauf pour les boutons radios (voir plus haut). Pour différencier les boutons radios, il faut ajouter un attribut value avec la valeur à envoyer.

Exemple :

Codes HTMLAffichages
<form> <label> Ton prénom : <input type="text" name="pre1"></label> <label >Ton nom : <input type="text" name="nom2"></label> <label> <input type="radio" name="animal" value="chat"> Chat </label> <label> <input type="radio" name="animal" value="chien"> Chien </label> </form>




Voyons maintenant plusieurs façons d'envoyer des données grace à un formualire :


Répondre aux questions suivantes :

1. Remplir le formulaire de la méthode GET. Qu'y a-t-il dans l'URL après avoir valider le formualrie ?

2. Faire de même avec le formualire de la méthode POST. Quelle est la différence avec la méthode précédente ?

3. Quelle est l'utilité de l'attribut action ?

4. Quelles sont les différences entre les méthodes GET et POSt ? Faites des recherches pour répondre à cette question.




Revenir au menu principal