Dans une page HTML, les formulaires permettent de saisir des données :
Dans ce mode classique de fonctionnement des applications Web :
Pour le projet de voiture, nous allons procéder différemment en utilisant un Websocket qui permet :
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>.
<h1>Commande de la voiture</p> <form> <p>Capteurs de la voiture</p> <p>Commande des moteurs</p> </form>
La balise form utilise les attributs method et action pour préciser quelle page du serveur doit être activée afin de traiter les données envoyées. Mais dans le cadre de la mise en oeuvre d'un Websocket géré par javascipt, ces attributs ne seront pas utilisés.
La balise <input /> permet de saisir des information en précisant :
Le champ de type nombre (number) peut être personnalisé avec les attributs suivants :
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é.
<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>
L'attribut value permet de définir une valeur par défaut.
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 :
* 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>
L'attribut checked permet de définir le bouton radio comme coché par défaut.
Les boutons sont un type particulier de zone de saisie car il sont cliquables. Leur type peut être :
L'attribut value permet de mettre un libellé sur le bouton.
<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>
Travail à faire : compléter le formulaire pour gérer les deux moteurs.
Voici un lien parmi d'autres pour découvrir les balises de formulaire en HTML 5 :