\chapter{Interactions humain-machine sur le Web}

\begin{exointro}{\null}
\nathanliveVideo
\label{video:ch04extype}
Cassandre souhaite créer une page web contenant le formulaire suivant :

\Par

\begin{center}
\fbox{
\begin{minipage}{0.8\linewidth}
\begin{tabular}{ZlZl}
Entre ton nom : & \begin{tabular}{|p{3cm}|}\hline \\\hline\end{tabular}\\
Entre ton prénom : & \begin{tabular}{|p{3cm}|}\hline \\\hline\end{tabular}\\
Entre un mot de passe : & \begin{tabular}{|p{3cm}|}\hline \\\hline\end{tabular}\\
Tu es : & $\square$ un garçon \qquad $\square$ une fille
\end{tabular}
\begin{center}
\fbox{Valide le formulaire}
\end{center}
\end{minipage}
}
\end{center}

\Par

\begin{questions}
\item Quelle méthode de transmission des données va-t-elle a priori utiliser ?

\Par

\item Elle souhaite vérifier si le mot de passe est entré avant de transmettre les informations au serveur. 

Quel événement peut-elle utiliser ?

\Par

\item Proposer un code HTML (sans le détail de la fonction Javascript). On nommera \texttt{traitement.php} le fichier recevant les informations et\linebreak \textit{formulaire} le formulaire.
\end{questions}
\end{exointro}
\newpage

\section{Modalités de l'interaction}

\subsection{Définition}

\begin{defin}[IHM]
Les \textit{Interactions Humain-Machine} (IHM) sur le web définissent les moyens et les outils mis en \oe uvre afin qu'une personne physique puisse agir (contrôler, communiquer) à distance, par l'intermédiaire d'Internet par exemple.
\end{defin}

Parmi ces moyens, on trouve le langage HTML (HyperText Markup Language).

\subsection{Structure principale d'un fichier HTML}
\label{structure-principale}

Un document HTML est composé de deux parties séparées par des \textit{balises} :
\begin{itemize}
\item son \textit{en-tête}, entre les balises \texttt{<head>} et \texttt{</head>};
\item son \textit{corps}, entre les balises \texttt{<body>} et \texttt{</body>}.
\end{itemize} 

Un document HTML ressemble à ceci :

\begin{listing}[language=html]{}{04-crs-01.html}\end{listing}

\Par

Remarquez que la première ligne indique le langage utilisé : elle est à destination des navigateurs Internet afin qu'ils sachent interpréter correctement le code du document.

\Par

Dans l'en-tête d'un document HTML, on retrouve par exemple :
\begin{itemize}
\item l'encodage, indiqué comme ceci (par exemple) dans le cas d'un encodage \mbox{UTF-8:}

\Par

\qquad\texttt{<meta charset="utf-8">}

\item le titre de la page, indiqué comme ceci :

\Par

\qquad\texttt{<title>Mon titre</title>}

\newpage

\item l'éventuel style de la page (définition des couleurs, des polices de caractères, etc.), indiqué par :

\Par

\qquad\texttt{<link rel="stylesheet" href="style.css">}

\Par

où \texttt{style.css} est un fichier dans lequel est contenu le style de tous les éléments de la page;

\item les éventuelles fonctions qui gèrent certains événements, notamment en\linebreak Javascript, indiqué ainsi :

\Par

\qquad\texttt{<script src="script.js"></script>}

\Par

où \texttt{script.js} est le fichier contenant toutes les fonctions en Javascript.
\end{itemize}

Dans le corps, il est mis tout ce qui doit être proposé aux personnes accédant à cette page : du texte, des images, des liens, etc.

\subsection{Les éléments d'une page HTML}

\subsubsection{Les textes}

Tout document HTML doit être structuré. C'est la raison pour laquelle chaque élément devrait être \textit{balisé}.

\subsubsectionnn{Les titres}

\begin{itemize}
\item Un titre \textit{niveau 1} s'écrit :

\Par

\qquad\texttt{<h1>Mon titre niveau 1</h1>}


\item Un titre \textit{niveau 2} s'écrit :

\Par

\qquad\texttt{<h2>Mon titre niveau 2</h2>}

\Par

Il sera écrit par défaut à l'aide d'une taille de caractères plus petite que le titre de niveau 1.
\end{itemize}

On peut aller ainsi jusqu'au 6\ieme{} niveau.

\subsubsectionnn{Paragraphes}

Chaque paragraphe s'écrit :

\Par

\qquad\texttt{<p>Mon paragraphe.</p>}


\newpage

\subsubsectionnn{Italique et gras}

\begin{itemize}
\item Un groupe de mots en italique s'écrit :

\Par

\qquad\texttt{<i>Mon texte en italique.<i>}

\qquad\texttt{<em>Mon texte en italique.</em>}

\Par

(les balises \texttt{<em></em>} ont en HTML5 le même effet que \texttt{<i></i>}).

\Par

\item Un groupe de mots en gras (\textit{bold} en anglais) s'écrit :

\Par

\qquad\texttt{<b>Mon texte en gras.</b>}

\qquad\texttt{<strong>Mon texte en gras.</strong>}

\Par

(les balises \texttt{<strong></strong>} ont en HTML5 le même effet que \texttt{<b></b>}).
\end{itemize}

\subsubsection{Les images}

Les images sont indiquées ainsi :

\Par

\qquad\texttt{<img src='monimage.jpg' alt='titre' />}

\subsubsection{Les blocs}

Les blocs sont très utilisés en HTML. Ils s'écrivent ainsi :

\Par

\begin{tabular}{@{\qquad}>{\ttfamily}l}
<div>\\
Contenu du bloc\\
</div>
\end{tabular}

\Par

Ils servent à diviser de façon structurée une page web.

On peut imaginer, par exemple, qu'un menu est dans un bloc, que le contenu principal est dans un autre bloc, que le bas de chaque page est dans un autre, etc.

\subsubsection{Les liens}

C'est l'une des choses les plus importantes sur le web. Ils se présentent sous cette forme :

\Par

\qquad\texttt{<a href='cible du lien'> texte ou image </a>}

\subsubsection{Les cadres}

Les cadres sont des moyens d'afficher une autre page ou un autre objet dans la page courante. Elles sont très utilisées pour partager des vidéos par exemple.

\Par

\qquad\texttt{<iframe src='adresse de ce que nous voulons afficher'></iframe>}

\newpage

\subsubsection{Tableaux}

Les tableaux sont indiqués comme ceci :

\begin{listing}[language=html]{}{04-crs-02.html}\end{listing}

\Par

Les balises \texttt{<thead></thead>}, \texttt{<tbody></tbody>} et \texttt{<tfoot></tfoot>} ne sont pas obligatoires. Elles indiquent respectivement l'en-tête, le corps et le pied du\linebreak tableau.


\subsubsection{Les formulaires et les entrées}

Les formulaires sont aussi très répandus. Ils se déclarent ainsi :

\Par

\begin{tabular}{@{\qquad}>{\ttfamily}l}
<form>\\
Contenu du formulaire\\
</form>
\end{tabular}

\Par

Dans les formulaires, on peut voir :
\begin{itemize}
\item un champ de saisie pour du texte;

\Par

\qquad\texttt{<label for="txt">Mon texte : </label>}

\qquad\texttt{<input type="text" name="txt" id="txt" />}

\item un champ de saisie pour les mots de passe:

\Par

\qquad\texttt{<label for="mdp">Mot de passe : </label>}

\qquad\texttt{<input type="password" name="mdp" id="mdp" />}


\item un champ de sélection unique:

\Par

\qquad\texttt{<label for="choix">Mon choix : </label>}

\qquad\texttt{<input type="radio" name="choix" id="choix" />}


\item une case à cocher:

\Par

\qquad\texttt{<label for="choix">Mon choix : </label>}

\qquad\texttt{<input type="checkbox" name="choix" id="choix" />}


\begin{Remarque}
la balise \texttt{<label>} sert à étiqueter un élément. On peut aussi adopter la syntaxe imbriquée pour ne pas spécifier le nom de l'élément :

\Par

\qquad\texttt{<label>Mon choix :}

\qquad\texttt{<input type="radio" name="choix" /></label>}
\end{Remarque}

\item un menu déroulant:

\Par

\begin{tabular}{@{\qquad}>{\ttfamily}l}
<label>\\
<select name="choix">\\
\qquad	<option>Option 1</option>\\
\qquad	<option>Option 2</option>\\
\qquad	...\\
</select>\\
</label>
\end{tabular}

\item un menu à sélections multiples:

\Par

\begin{tabular}{@{\qquad}>{\ttfamily}l}
<label>\\
<select multiple name="liste[]">\\
\qquad	<option>Option 1</option>\\
\qquad	<option>Option 2</option>\\
\qquad	...\\
</select>\\
\end{tabular}

\item un bouton:

\Par

\qquad\texttt{<label><input type="button" name="monbouton" /></label>}
\end{itemize}

\newpage

\subsection{Description d'un élément}

Chaque élément présenté précédemment accepte les attributs principaux réunis dans le tableau suivant :

\Par

\begin{center}
\begin{tabular}{|Zc|Zc|}
\tabulartitle\hline
Attribut & Raccourci \\
\hline
Identifiant & id \\
\hline
Nom & name\\
\hline
Classe & class\\
\hline
Titre & title\\
\hline
\end{tabular}
\end{center}

\Par

L'attribut \texttt{class} sert à définir le style CSS de l'élément (plusieurs éléments peuvent avoir la même classe), mais il peut aussi servir à déterminer le comportement des éléments ayant cette classe.


\begin{attention}
Plusieurs éléments peuvent avoir une même classe; en revanche, plusieurs éléments ne peuvent pas avoir le même nom ou le même identifiant.
\end{attention}

\begin{Exemple}
\begin{listing}[language=html]{}{04-crs-03.html}\end{listing}

\Par

Dans cet exemple, les deux champs de saisie ont la même classe pour signifier qu'ils doivent avoir le même aspect. Le dernier élément a une classe différente pour traduire le fait que son apparence est différente des deux autres.
\end{Exemple}

\begin{Remarque}
remarquez que l'élément \texttt{label} est lié à son champ de saisie à l'aide de l'identifiant de ce dernier.
\end{Remarque}

À ces attributs s'ajoutent ceux qui sont spécifiques aux images :

\Par\enlargethispage*{3em}

\begin{center}
\begin{tabular}{|Zc|Zc|}
\tabulartitle\hline
Texte alternatif & alt \\
\hline
Hauteur & height \\
\hline
Largeur & width\\
\hline
\end{tabular}
\end{center}

\begin{Exemple}~\par 
\qquad\texttt{<img src='monimage.jpg' id='cousin-evariste'}

\qquad\texttt{alt='Cousin Évariste à la plage' width='600' />}
\end{Exemple}

\begin{Remarques}
\begin{itemize}
\item Si seule l'une des dimensions est indiquée, l'autre sera calculée proportionnellement à celle informée.
\item Les dimensions peuvent être exprimées en pourcentage (contrairement à l'exemple ci-dessus où elles sont par défaut exprimées en pixels).

Dans ce cas, c'est par rapport à la largeur (\texttt{width}) ou la hauteur (\texttt{height}) de l'élément contenant l'image (la fenêtre du navigateur, un bloc, une cellule de tableau, etc.).
\end{itemize}
\end{Remarques}


\subsection{\'Evénements}

Les événements sont le plus souvent réalisés à l'aide de Javascript (ou de sa\linebreak bibliothèque JQuery). Nous nous pencherons ici uniquement sur Javascript.

\subsubsection{Clic sur un lien}

Il existe deux types d'événements :

\begin{itemize}
\item redirection :

\Par

\qquad\texttt{<a href='autrepage.html'>Clique ici</a>}

\Par

Dans ce cas, quand on clique sur le texte \og Clique ici \fg, la page \textit{autrepage.html} se charge.

\item exécution d'une fonction :

\Par

\qquad\texttt{<a href='javascript:fonction()'>Clique ici</a>}

\Par

Dans ce cas, la fonction javascript \texttt{fonction()} s'exécute, cette fonction étant définie dans le document (très souvent dans l'en-tête).
\end{itemize}


\begin{Exemple}
\begin{listing}[language=html]{}{04-crs-04.html}\end{listing}

\Par

Dans cet exemple, une fenêtre apparaît quand on clique sur le lien.
\end{Exemple}

\newpage\enlargethispage*{3em}

\subsubsection{\'Evénements de curseur}

Ces événements sont déclenchés lorsque le curseur de la souris fait quelque chose sur un élément.

Voici quelques événements principaux :

\begin{center}
\begin{tabular}{|Zc|Zc|}
\tabulartitle\hline
\'Evénement & Description\\
\hline
onclick & le script se déclenche quand on clique.\\
\hline
ondblclick & le script se déclenche quand on double-clique.\\
\hline
onmouseover & le script se déclenche quand la souris est sur l'élément.\\
\hline
\end{tabular}
\end{center}

\begin{Exemple}
\begin{listing}[language=html]{}{04-crs-05.html}\end{listing}

\Par

Ici, la fenêtre s'affiche quand on survole le texte.
\end{Exemple}

\subsubsection{\'Evénements de formulaire}

Les événements suivants (les principaux) sont propres aux formulaires.

\begin{center}
\begin{tabular}{|Zc|Z{m{8cm}}|}
\tabulartitle\hline
\'Evénement &\centering\arraybackslash Description\\
\hline
onblur & le script se déclenche quand le champ perd le focus.\\
\hline
onchange & le script se déclenche quand on change la valeur du champ.\\
\hline
onfocus & le script se déclenche quand le champ gagne le focus.\\
\hline
onformchange & le script se déclenche quand le formulaire est modifié.\\
\hline
oninput & le script se déclenche quand le champ est informé.\\
\hline
oninvalid & le script se déclenche quand la valeur saisie est invalide.\\
\hline
onselect & le script se déclenche quand on sélectionne un champ dans un menu.\\
\hline
onsubmit & le script se déclenche quand on valide le formulaire.\\
\hline
\end{tabular}
\end{center}

\begin{Exemple}
\begin{listing}[language=html]{}{04-crs-06.html}\end{listing}

\Par

Dans cet exemple, dès que l'on clique dans le champ correspondant au mot de passe et qu'on le quitte (on perd le focus), la fonction \texttt{controle} s'exécute et vérifie si la longueur de la variable est plus petite que 8 caractères; dans un tel cas, un message apparaît.
\end{Exemple}

\begin{Remarque}
dans cet exemple, on aurait aussi pu écrire :

\Par

\begin{tabular}{@{\qquad}>{\ttfamily}l}
<form onsubmit='javascript:controle(mdp.value)'>\\
...\\
<input type='password' id='mdp'/>\\
<form>
\end{tabular}

\Par

Dans ce cas, la fonction est appelée uniquement quand on appuie sur le bouton de validation, ce qui peut être ici un inconvénient : on a tout intérêt à vérifier la longueur du mot de passe dès qu'il est saisi. 
\end{Remarque}

\newpage

\section{Interaction client-serveur}

\subsection{L'environnement client-serveur}

\begin{defin}
Une \textit{requête} est une instruction contenant une ou plusieurs demandes.
\end{defin}

\begin{center}
\includegraphics{129_04-Client-serveur}
\end{center}


Dans un environnement client-serveur, 
\begin{itemize}
\item le \textit{client} est généralement l'ordinateur sur lequel on se connecte à Internet : c'est lui qui envoie les requêtes;
\item le \textit{serveur} est la machine sur laquelle est la page web : c'est elle qui répond aux requêtes.
\end{itemize}

\subsection{Interaction client-serveur}

Les requêtes exécutées au niveau du client sont en général les requêtes Javascript. Dans les exemples précédents, où l'on traitait des événements, tout se passait au niveau du client. Par conséquent, le serveur (où est hébergée la page web) n'a aucune connaissance de l'issue des événements.

Ainsi, quand on testait la longueur du mot de passe, le serveur ne savait pas si notre première tentative convenait ou non. La réponse est donc plus rapide (car il n'y a pas de délai entre l'instant où l'on exécute la requête et l'instant où l'on reçoit sa réponse).

On comprend alors aisément que plus les requêtes se font au niveau client, plus les réponses sont rapides.

\Par

En revanche, quand on valide un formulaire par exemple, la requête est envoyée sur le serveur afin que ce dernier traite les informations et exécute un code-réponse, qui va être envoyé au client.

\subsection{Les requêtes clients HTTP}

\begin{defin}[syntaxe générale]
La syntaxe d'une requête client est toujours de la forme  :

\Par

\bgroup\ttfamily
Méthode

En-tête de requête

<saut de ligne>

Corps de requête
\egroup
\end{defin}

\subsubsection{La méthode}

Il existe plusieurs méthodes pour une requête HTTP. Les plus importantes sont :

\begin{itemize}
\item GET : c'est la méthode la plus courante pour demander une ressource au client. Cette requête ne modifie pas la ressource, et il doit être possible de la répéter sans effet.

\item HEAD : cette méthode ne demande que des informations sur la ressource, sans demander la ressource elle-même.

\item POST : cette méthode doit être utilisée lorsqu'une requête modifie la ressource.
\end{itemize}

\subsubsection{L'en-tête}

C'est un peu le même principe que les balises \og <meta> \fg{} de l'HTML : elles peuvent prendre beaucoup de valeurs. Par exemple:

\begin{itemize}
\item HOST: <nom du site>
\item Cookie: <nom du cookie>=<valeur du cookie>
\item Connection: Close ou Keep-Alive
\item Content-type: <type de média du corps de la requête>
\item Content-Length: <longueur du corps de la requête>
\end{itemize}

\begin{Remarque}
un cookie est un fichier texte qui est sauvegardé côté client et dans lequel sont stockées certaines informations (par exemple, votre identifiant au site afin que vous n'ayez pas à l'écrire à chaque fois).
\end{Remarque}


Pour ce qui est de l'en-tête \og Connection \fg{} :
\begin{itemize}
\item \og Close \fg{} ferme la connexion après la réponse ;
\item \og Keep-Alive \fg{}  conserve la connexion après la réponse.
\end{itemize}


\subsubsection{Le corps}

Il peut contenir par exemple le contenu d'un formulaire HTML.

\subsubsection{Exemples de requêtes}

\subsubsectionnn{Avec la méthode HEAD}

Cette méthode est intéressante si on veut, par exemple, récupérer des informations sur un fichier ou sur le serveur.

\begin{Exemple}
\bgroup\ttfamily
HEAD /fichier.html HTTP/1.1

Host: www.site.com

Connection: Close

<saut de ligne>
\egroup
\end{Exemple}

\subsubsectionnn{Avec la méthode GET}

C'est la méthode permettant de récupérer le contenu d'un fichier.

\begin{Exemple}
\bgroup\ttfamily
GET /fichier.html HTTP/1.1

Host: www.site.com

Connection: Close

<saut de ligne>
\egroup
\end{Exemple}


\subsubsectionnn{Avec la méthode POST}

C'est la méthode permettant de transmettre des données à un fichier. Très souvent, le fichier est codé en PHP (encore un autre langage !) afin qu'il puisse traiter les informations reçues.

\begin{Exemple}
\bgroup\ttfamily
POST /fichier.php HTTP/1.1

Host: www.site.com

Connection: Close

Content-type: application/x-www-form-urlencoded

Content-Length: 22

<saut de ligne>

nom=DUPONT\&prenom=Jean

\egroup
\end{Exemple}

\subsection{Les réponses}

\begin{defin}[syntaxe générale]
Les réponses du serveur ont la syntaxe générale suivante :

\bgroup\ttfamily
Ligne de statut 

En-tête de réponse

<saut de ligne>

Corps de réponse
\egroup
\end{defin}

\subsubsection{Ligne de statut}

La ligne de statut est composée :
\begin{itemize}
\item de la version HTTP du serveur;
\item du code d'erreur retourné (par exemple 200, 403, 404, 500);
\item du texte associé à l'erreur (respectivement pour les exemples précédents : \og OK \fg, \og FORBIDDEN \fg, \og NOT FOUND \fg, \og INTERNAL ERROR \fg).
\end{itemize}

\begin{Exemple}
\ttfamily HTTP/1.1 200 OK
\end{Exemple}

\subsubsection{L'en-tête}

Les en-têtes peuvent contenir ici aussi beaucoup d'informations, comme :
\begin{itemize}
\item l'horodatage de génération de la réponse;
\item le modèle du serveur HTTP;
\item le type de média;
\item la longueur du corps;
\item le cookie;
\item etc.
\end{itemize}

\begin{Exemple}
\bgroup\ttfamily
Date: Thu, 15 Nov 2018 09:38:57 GMT

Server: Apache/2.5.12 (Debian GNU/Linux) DAV/2 SVN/1.1.4

Connection: close

Transfer-Encoding: chunked

Content-Type: text/html; charset=UTF-8
\egroup 
\end{Exemple}

Dans cet exemple, la dernière ligne nous informe que la réponse est au format HTML et encodée en UTF-8.

Quant à l'avant-dernière, elle nous informe du type d'encodage du transfert (ici, \og chunked \fg{} signifie que les données sont transférées par blocs, ce qui permet de ne pas connaître à l'avance la taille du corps).


\subsection{Transmissions chiffrées}

Certaines données sont sensibles (par exemple, le numéro de carte bancaire). Il est donc important, quand on souhaite les transmettre via le protocole HTTP, que ces données soient chiffrées, c'est-à-dire transformées pour ne pas être comprises par d'éventuel.le.s pirates informatiques qui les intercepteraient entre le client et le serveur.

Les pages chiffrées sont reconnaissables en regardant la barre d'adresse; l'URL commence toujours par :
\begin{center}
\texttt{https://...}
\end{center}

\og https \fg{} signifie \textit{HyperText Transfert Protocol Secure}; c'est la combinaison du HTTP et d'une couche de chiffrement (comme le SSL ou le TLS, deux protocoles de sécurisation des échanges sur Internet).

\section{Formulaire d'une page web}

Dans ce paragraphe, nous allons voir concrètement comment fonctionnent les\linebreak formulaires que vous pouvez remplir sur le web, et notamment la façon dont sont transmises les informations.

\subsection{Structure générale}

Nous allons prendre l'exemple simple d'un formulaire demandant à l'utilisateur ou l'utilisatrice son identifiant et son mot de passe, et proposant un bouton poussoir de validation.

La structure du code HTML est la suivante :

\begin{listing}[language=html]{}{04-crs-07.html}\end{listing}

\Par

Ce code permet d'afficher le formulaire. Il ne reste plus maintenant qu'à\linebreak transmettre les informations au serveur. Pour cela, il existe deux méthodes.

\subsection{Avec la méthode GET}

La première chose à faire est de choisir le fichier destination des données. Nous allons nommer ce fichier \texttt{traitement.php} (c'est en effet très souvent un fichier codé en PHP qui traite les informations).

\newpage

Pour utiliser la méthode GET, nous allons remplacer la ligne:
\begin{center}
\texttt{<form name='connexion'>}
\end{center}
par :
\begin{center}
\ttfamily
<form name='connexion' action='traitement.php' method='get'>
\end{center}

Supposons que l'on complète le champ \textit{identifiant} par \og toto \fg{}  et le champ\linebreak \textit{motdepasse} avec \og moi \fg. En cliquant sur le bouton, le fichier PHP est appelé. Mais si vous essayez, vous verrez que dans la barre d'adresse s'affiche :
\begin{center}
\texttt{traitement.php?identifiant=toto\&motdepasse=moi}
\end{center}
La méthode GET fait passer les variables en toute transparence... ce qui est\linebreak fâcheux dans notre cas. 

\subsection{Avec la méthode POST}

Nous allons utiliser maintenant la méthode POST. La syntaxe ne change pas; seule la méthode change :

\Par

\texttt{<form name='connexion' action='traitement.php' method='post'>}

\Par

La différence est toutefois majeure ici car, quand on valide le formulaire, on voit dans la barre d'adresse :
\begin{center}
\texttt{traitement.php}
\end{center}
Les données n'apparaissent pas, et c'est beaucoup mieux ainsi dans notre\linebreak situation.

\Par

Ainsi, on préfèrera :
\begin{itemize}
\item la méthode GET pour des transmissions non sensibles, non confidentielles, où les variables transmises peuvent être visibles côté client;
\item la méthode POST pour des transmissions de données confidentielles, comme des mots de passe, ou des numéros de cartes bancaires.
\end{itemize}

\begin{Remarque}
la méthode POST ne suffit pas à sécuriser les transmissions. Il faut pour cela la coupler avec d'autres techniques de sécurisation.
\end{Remarque}

\begin{solintro}
\nathanliveVideo
\vspace*{-3mm}
\begin{questions}
\item Nous voyons qu'il y a un mot de passe à transmettre. Par conséquent, il ne faut pas que les données transmises apparaissent dans la barre d'adresse du navigateur. La méthode GET n'est donc pas recommandée ici.

Il faut donc utiliser la méthode POST pour transmettre les données de ce formulaire au serveur.
\vspace*{-1.5em}

\Break

\item Elle pourrait utiliser l'événement \texttt{onsubmit} quand le bouton de validation est cliqué, événement qui déclenchera l'appel d'une fonction Javascript par exemple, mais le formulaire est validé, quelle que soit l'issue de la fonction Javascript utilisée.

Il est donc préférable d'insérer un bouton poussoir basique qui, lorsque l'on clique dessus, va déclencher l'événement souhaité, à savoir vérifier si le mot de passe est écrit et si tel est le cas, envoyer le formulaire.

\item \raisebox{-0.5\totalheight+3mm}{\begin{minipage}{\linewidth}\begin{listing}{}{04-solintro.html}\nathanliveProgWithoutText\end{listing}\end{minipage}}
\end{questions}
\end{solintro}