Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Activité HTML N° 3 les formulaires ======
===== Présentation =====
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**.

<WRAP center round info>
Dans ce **mode classique de fonctionnement** des applications Web : 
  * c'est donc l'utilisateur, le **client**, qui **sollicite** de **temps en temps** le serveur en envoyant des requêtes avec des données ;
  * le serveur **attend** uniquement les requêtes de plusieurs clients pour y **apporter** une réponse.
</WRAP>

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.

===== Créer un formulaire dans une page HTML=====
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 :
<code html>
<h1>Commande de la voiture</p>
<form>
   <p>Capteurs de la voiture</p>
   <p>Commande des moteurs</p>
</form>
</code>

  * connecte-toi au site ISN à l'adresse http://10.3.141.1/ et visualise le résultat de ta page.
<WRAP center round info>
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**.  
</WRAP>

===== Les zones de saisie basiques =====
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.
<WRAP center round info>
Le champ de **type nombre** (number) peut être personnalisé avec les attributs suivants :
  * **min**: valeur minimale autorisée.
  * **max**: valeur maximale autorisée.
  * **step**: le **pas** d'incrémentation.
</WRAP>

Une **étiquette** est nécessaire pour indiquer la **signification** du champ de saisie. C'est le rôle du couple de balises **<label>...</label>**. 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 :
<code html>
<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>
</code>
<WRAP center round info>
L'attribut **value** permet de définir une valeur par défaut.
</WRAP>

===== Les éléments d'options =====
==== Les cases à cocher ====
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 :
<code html>
<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>
</code>

==== Les zones d'options (boutons radio)====
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 :

<code html>
<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>
</code>
<WRAP center round info>
L'attribut  **checked** permet de définir le bouton radio comme coché par défaut.
</WRAP>

===== Les boutons =====
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** :
<code html>
<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>
</code>

===== Regrouper des groupes de champs =====
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 :

<code html>
<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>
</code>
{{ :isn:html_01.png?nolink |}}

<WRAP center round todo>
Travail à faire : compléter le formulaire pour gérer les deux moteurs.  
</WRAP>

===== Le résultat avec Trinket.io =====
<html>
<iframe src="https://trinket.io/embed/html/faa5d7d2d2" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
</html>

===== RessourcesLes premières balises utile pour le HTML =====
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

==== Activité Les langages pour créer des sites Web ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>
Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Outils de la page
