Formulaire HTML

👨‍🏫 Introduction

Objectif

Nous souhaitons mettre en œuvre une base de données des élèves suivant l'option NSI en classe de première. Pour l'acquisition des données, nous faisons le choix de développer un formulaire web proposant les fonctionnalités suivantes :

• Saisie du nom de l'élève
• Saisie du prénom de l'élève
• Saisie de l'année scolaire
• Choix de la classe de l'élève, parmi la liste exhaustive des classes de première du lycée
• Indication des autres options suivies par l'élève, parmi la liste exhaustive des options disponibles au lycée
• Indication de la poursuite ou non de l'option en classe de Terminale

Les données du formulaire seront transmises à un script de traitement chargé de l'enregistrement des données (persistance). Voici le nom des paramètres attendus pour chaque champ :

Libellé	Attribut name
Nom de l'élève	nom
Prénom de l'élève	prenom
Année scolaire	annee_scolaire
Classe	classe
Autres options suivies	options
Poursuite en terminale	poursuite

Préparation

Afin de garder organisées les productions réalisées en travaux pratiques, veuillez mettre à jour l'arborescence du dossier NSI en fonction l'ordinateur utilisé :

💻 Ordinateur portable

1. Lancer
2. Se rendre dans le dossier Documents
3. Créer le dossier NSI s'il n'existe pas
4. Dans le dossier NSI, créer le dossier chapitre_12
5. Dans le dossier chapitre_12, créer le dossier tp1_formulaire

🖥 Ordinateur fixe des salles informatiques

1. Depuis le bureau, cliquer sur l'icône intitulée Zone personnelle
2. Créer le dossier NSI s'il n'existe pas
3. Dans le dossier NSI, créer le dossier chapitre_12
4. Dans le dossier chapitre_12, créer le dossier tp1_formulaire

Téléchargement des fichiers

Pour effectuer ce TP, il est nécessaire de télécharger certains fichiers :

1. Télécharger le fichier ZIP contenant les fichiers du TP : 📦 télécharger
2. Ouvrir le fichier ZIP
3. Copier/coller tous les fichiers dans le dossier NSI\chapitre_12\tp1_formulaire

Partie 1 - création du formulaire

Formulaire de saisie des informations d'un élève

Formulaire

Principe

L'élément HTML <form> représente un formulaire. Celui-ci contient des contrôles interactifs permettant à un utilisateur de fournir des informations.

Documentation

Consulter la page <form> : l'élément représentant un formulaire

Exemple

<form>
    ...
</form>

🛠 Mise en pratique

Ouvrir le fichier index.html et y créer simplement les balises d'ouverture et de fermeture du formulaire qui accueillera l'ensemble des champs de saisie.

Champ texte

Principe

L'élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément <input> dépendent fortement de la valeur de son attribut type.

Documentation

Consulter la page <input> : l'élément de saisie dans un formulaire

Exemple

Champ 1 : <input type="text" name="champ1" /><br />
Champ 2 : <input type="text" name="champ2" />

Champ 1 :
Champ 2 :

🛠 Mise en pratique

1. Créer le champ de saisie du nom de l’élève
2. Créer le champ de saisie du prénom de l’élève
3. Créer le champ de saisie de l’année scolaire

Attention

Ne pas oublier de renseigner correctement l'attribut name, en accord avec le tableau de la section objectif

Liste d'options

Principe

L’élément HTML <select> représente un contrôle qui fournit une liste d’options parmi lesquelles l’utilisateur pourra faire un choix.

Documentation

Consulter la page <select>

Exemple

<select name="choix">
  <option value="1">Choix 1</option>
  <option value="2">Choix 1</option>
  <option value="3">Choix 3</option>
</select>

Choix 1Choix 1Choix 3

🛠 Mise en pratique

Créer le champ de sélection de la classe de l’élève en utilisant l’élément liste de choix.

Attention

Ne pas oublier de renseigner correctement l'attribut name, en accord avec le tableau de la section objectif

Cases à cocher

Principe

L’élément <input type="checkbox"> correspond à une case à cocher qui permet de sélectionner/déselectionner une valeur.

Documentation

Consulter la page <input type="checkbox">

Exemple

<input type="checkbox" name="options" value="option1" />Libellé Option 1<br />
<input type="checkbox" name="options" value="option2" />Libellé Option 2

Libellé option 1
Libellé option 2

🛠 Mise en pratique

Créer le champ d’indication des autres options suivies par l’élève en utilisant plusieurs occurrences de l’élément case à cocher.

Attention

Ne pas oublier de renseigner correctement l'attribut name, en accord avec le tableau de la section objectif

Boutons radio

Principe

L’élément <input type="radio"> correspond à un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de valeurs.

Documentation

Consulter la page <input type="radio">

Exemple

    <input type="radio" value="1" name="reponse">Oui
    <input type="radio" value="0" name="reponse">Non

OuiNon

🛠 Mise en pratique

Créer le champ d’indication de poursuite de l’option en utilisant plusieurs occurrences de l’élément bouton radio.

Attention

Ne pas oublier de renseigner correctement l'attribut name, en accord avec le tableau de la section objectif

Partie 2 - Transmission des données

Bouton de soumission

Principe

Afin de pouvoir transmettre le formulaire pour traitement, celui-ci doit disposer d'un bouton d'envoi. L'élément HTML permettant la création de ce bouton est <input type="submit">

Documentation

Consulter la page <input type="submit">

Exemple

    <input type="submit" value="Texte du bouton" />

🛠 Mise en pratique

1. Créer le bouton d'envoi du formulaire
2. Cliquer sur le bouton d'envoi du formulaire. Qu'observez-vous ?

Destination du formulaire

Il est possible de spécifier une URL à laquelle transmettre les données du formulaire. Nous souhaiterions les transmettre à l'URL suivante :

https://europe-west1-mulot-nsi.cloudfunctions.net/handle-get

🛠 Mise en pratique

1. Modifier l'attribut action du formulaire de façon à transmettre les données à l'URL indiquée
2. Saisir des données et envoyer le formulaire. Qu'observez-vous ?
3. Que se passe-t-il si vous modifiez les données directement depuis l'URL ?
4. Est-il sécurisé d'avoir les données visibles depuis l'URL ?

Méthode de transmission du formulaire

Il existe une autre méthode de transmission des données du formulaire.

🛠 Mise en pratique

1. Modifier la balise ouvrante du formulaire comme suit (attention l'URL de l'action change) :

<form method="POST" action="https://europe-west1-mulot-nsi.cloudfunctions.net/handle-post">

2. Saisir des données et envoyer le formulaire. Qu'observez-vous ?
3. Où sont les données selon vous ? Essayer de les retrouver en activant le mode développeur du navigateur et en consultant les échanges réseau.