On considère le code html du formulaire que l’on a envisagé dans l’exercice précédent. Maintenant on va rajouter le code javascript qui va permettre après l’enregistrement de pouvoir dialoguer avec une fenêtre popup permettant de faire la synthèse des résultats. La page html ainsi ouverte s’appelle fille.html et le dialogue mère-fille et fille-mère est rendu possible par les fichiers de scripts externes intitulés javascript.js et javascriptfille.js.

Le code du formulaire est quasiment inchangé. On a seulement rajouté :
 l’identifiant formulaire au formulaire,
 l’identifiant monsieur à l’option "Un homme",
 l’identifiant madame à l’option "Une femme",
 un identifiant à toutes les options de la liste déroulante relative aux loisirs,
 l’identifiant enregistrer au bouton "Enregistrer",
 l’identifiant effacer au bouton "Effacer".

Le but de cet ajout est de montrer, dans certains cas, une autre façon de désigner les objets (on utilise l’attribut id avec la méthode getElementById plutôt que le chemin hiérachique complet qui utilise l’attribut name ; parfois on mixe les deux méthodes).

Ainsi on a :

<form action="" id="formulairewebdev" >

<p id="civil">
Nom : <input type ="text" name="nom" value="" /><br/>
Prénom : <input type ="text" name="prenom" value="" /><br/>
Mot de passe : <input type="password" name="secret"  />
</p>

<p class="clair un">
Vous êtes  :
<input type="radio" name="genre" value="un homme" id="homme" checked="checked" />Un homme
<input type="radio" name="genre" value="une femme" id="femme"/>Une femme
</p>

<p class="clair deux">
<label for="loisir">
Quel est votre loisir préféré ?
</label>
<select name="loisir" id="loisir" >
 <option id="informatique" >informatique </option>
 <option id="sport">sport</option>
 <option id="cinema"> cinéma</option>
 <option id="musique">musique</option>
</select>
</p>

<p class="clair un">
Quelle langue parlez-vous ?<br/>
<input type="checkbox" checked="checked" name="francais" value="francais" />français
<input type="checkbox" name="anglais" value="anglais" />anglais
<input type="checkbox" name="allemand" value="allemand" />allemand
<input type="checkbox" name="espagnol" value="espagnol" />espagnol
</p>

<p class="clair deux">
Ecrivez ci-dessous un petit texte :
</p>

<div class="flotdroite">
<textarea name="projet" rows="5" cols="33">
</textarea>
</div>

<table class="formulaire">
 <tr >
 <td >Valider ces informations <br/>
 <input type="button" class="bouton" value="Enregistrer" id="enregistrer"/>
 </td>
 <td >Recommencer la saisie<br/>
 <input type="reset" class="bouton" value="Effacer" id="effacer"/>
 </td>
 </tr>
</table>

</form>