Activité HTML N° 3 les formulaires

Dans une page HTML, les formulaires permettent de saisir des données :

• l'utilisateur saisit des données,
• ensuite l'utilisateur valide sa saisie et soumet le formulaire c'est à dire demande l'envoi des informations saisies au serveur Web,
• le serveur Web reçoit les donnés, les traite et renvoie ensuite la réponse.

Pour le projet de voiture, nous allons procéder différemment en utilisant un Websocket qui permet :

• à l'utilisateur d'envoyer des données, des requêtes, au serveur pour commander par exemples les moteurs ;
• mais au serveur de prendre l'initiative d'envoyer des données à l'utilisateur comme par exemple les informations des capteurs de la voiture.
• il s'agit d'une communication bidirectionnelle qui peut être simultanée.

Pour cela, il sera nécessaire d'utiliser le langage Javascript dans la page HTML pour permettre au navigateur de dialoguer avec le serveur dans les deux sens : envoi de données au serveur et réception de données du serveur.

Les formulaires sont insérés avec le couple de balise principal <form> </form>.

• Complète le contenu du fichier index.html du site Web virtuel ISN pour ajouter le formulaire suivant :

<h1>Commande de la voiture</p>
<form>
   <p>Capteurs de la voiture</p>
   <p>Commande des moteurs</p>
</form>

• connecte-toi au site ISN à l'adresse http://10.3.141.1/ et visualise le résultat de ta page.

La balise <input /> permet de saisir des information en précisant :

• le type de données : texte (text), mot de passe (password), e-mail (email), URL (url), numéro de téléphone (tel), nombre (number), curseur (range), couleur (color), cases à cocher (checkbox) , bouton radio (radio), etc.
• le nom de la balise : name=“nom”
• son identifiant : id=“nomidentifiant”, ce qui sera très important pour interagir avec javascript.

Une étiquette est nécessaire pour indiquer la signification du champ de saisie. C'est le rôle du couple de balises …. L'attribut for de cette balise permet de faire le lien avec l'ID du champ input concerné.

• Complète le contenu du fichier index.html pour ajouter dans le formulaire les champs de saisie de la vitesse des moteur :

<h1>Commande de la voiture</p>
<form>
   <p>Capteurs de la voiture</p>
   <p>Commande des moteurs</p>
   <label for="vitesse1">Vitesse moteur 1 : </label>
   <input type="number" id="vitesse1" name="vitesse1" min="0" max="100" step="10" value="0"/>
</form>

Les cases à cocher permettent de faire un ou plusieurs choix parmi une liste de possibilités. * Complète le formulaire pour ajouter une liste de choix des flèches à activer :

<p>
 Cochez les flèches à activer :<br />
 <input type="checkbox" name="flecheAvancer" id="flecheAvancer" /> <label for="flecheAvancer">Avancer</label><br />
 <input type="checkbox" name="flecheReculer" id="flecheReculer" /> <label for="flecheReculer">Reculer</label><br />
 <input type="checkbox" name="flecheDroite" id="flecheDroite" /> <label for="flecheDroite">Droite</label><br />
 <input type="checkbox" name="flecheGauche" id="flecheGauche" /> <label for="flecheGauche">Gauche</label>
</p>

Les zones d'options vous permettent de faire un choix unique parmi une liste de possibilités. Pour cela :

• Elles doivent être organisées en groupes,
• posséder le même nom (name),
• chaque option doit avoir une valeur (value) différente.

* Complète le formulaire pour ajouter induquer si le moteur est configuré pour avancer ou pour reculer :

<p>
 Choisir le sens de fonctionnement du moteur :<br />
 <input type="radio" name="moteur1sens" value="avancer" id="avancer"  checked="True"/> <label for="avancer">Avancer</label><br />
 <input type="radio" name="moteur1sens" value="reculer" id="reculer" /> <label for="reculer">reculer</label><br />
</p>

Les boutons sont un type particulier de zone de saisie car il sont cliquables. Leur type peut être :

• submit pour soumettre traditionnellement un formulaire,
• reset pour reinitiliser le contenu du formulaire,
• button pour le rendre cliquableet que vous allez utiliser pour le projet de voiture.
• image pour utiliser une image cliquable en précisant dans l'attribut src l'URL de l'image

L'attribut value permet de mettre un libellé sur le bouton.

• Complète le formulaire pour ajouter un bouton Start et un bouton Stop :

<p>
 <input type="button" name="start" id="start" value="Start"/>
 <input type="button" name="stop" id="stop" value="Stop"/>
</p>
<p>
 <input type="reset" name="reset" id="reset" value="Reinitialiser"/>
</p>

Pour plus de lisibilité et davantage d'organisation, il est utile de regrouper ensemble des champs par fonctionnalités en utilisant les balises <fieldset> avec une balise légende <legend>. Modifiez voyer formùulaite eb ce sens :

<form>
 <p>Capteurs de la voiture</p>
 <fieldset>
  <legend>Cochez les flèches à activer :</legend> 
  <input type="checkbox" name="flecheAvancer" id="flecheAvancer" /> <label for="flecheAvancer">Avancer</label><br />
  <input type="checkbox" name="flecheReculer" id="flecheReculer" /> <label for="flecheReculer">Reculer</label><br />
  <input type="checkbox" name="flecheDroite" id="flecheDroite" /> <label for="flecheDroite">Droite</label><br />
  <input type="checkbox" name="flecheGauche" id="flecheGauche" /> <label for="flecheGauche">Gauche</label>
 </fieldset>
 <fieldset>
  <legend>Commande du moteur 1</legend> 
  <label for="vitesse1">Vitesse moteur 1 : </label>
  <input type="number" id="vitesse1" name="vitesse1" min="0" max="100" step="10" value="0"/>
  <p>
   Choisir le sens de fonctionnement du moteur :<br />
   <input type="radio" name="moteur1sens" value="avancer" id="avancer" checked="True"/> <label for="avancer">Avancer</label><br />
   <input type="radio" name="moteur1sens" value="reculer" id="reculer" /> <label for="reculer">reculer</label><br />
  </p>
  <p>
   <input type="button" name="start" id="start" value="Start"/>
   <input type="button" name="stop" id="stop" value="Stop"/>
  </p>
 </fieldset>
</form>

Voici un lien parmi d'autres pour découvrir les balises de formulaire en HTML 5 :

• https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-formulaires-8