article(s) dans votre panier VOIR

Tuto PHP/MySQL | Exercice

  • Vidéo 16 sur 158
  • 4h43 de formation
  • 158 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Exercice
00:00 / 02:46
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Définissez un formulaire contenant deux zones de texte pour saisir un prénom et un nom et un bouton de commande input de type button. Mettez en place le code nécessaire pour afficher Bonjour nom prénom au clic sur le bouton.
Vous pouvez mettre la vidéo sur Pause et saisir le code dans votre éditeur de code. Poursuivez la vidéo lorsque tout le code aura été entré.
Solution
Le formulaire de saisie est définie dans le corps du document, entre les lignes 15 et 21.
Pour améliorer l'aspect visuel du formulaire, nous utilisons un tableau, comme dans l'exercice précédent.
Le prénom est saisi dans un champ input de type text et d'identifiant prenom. Quant au nom, il est saisi dans un champ input de type text et d'identifiant nom.
Le bouton a pour libellé "Action". Lorsqu'il est cliqué, la fonction JavaScript disBonjour() s'exécute.
Remarquez la balise span d'identifiant résultat. Elle sera utilisée par le code JavaScript pour dire bonjour à l'utilisateur.

Nous allons maintenant nous intéresser au code JavaScript
Le code correspondant sera saisi entre les balises head et /head, encadré par les balises script et /script.
Le prénom et le nom sont récupérés parf la fonction getElementById().value et stockés dans les variables prenom et nom. Il ne reste plus qu'à afficher la valeur de ces deux variables dans le span d'identifiant resultat
Voyons si ce code fonctionne. Le menu Exécution permet d'exécuter le code dans un navigateur Web. Ici par exemple dans Firefox. Nous saisissons un prénom et nom, puis nous appuyons sur le bouton action. Le message de bienvenue est immédiatement affiché dans le span.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function disBonjour() {
        var prenom = document.getElementById('prenom').value;
        var nom = document.getElementById('nom').value;
        document.getElementById('resultat').innerHTML = 'Bonjour ' + prenom + ' ' + nom;
      }
    </script>
  </head>
  <body>
    <form name="MonFormulaire">
      <table>
        <tr><td>Prénom</td><td><input type="text" id="prenom"></td></tr>
        <tr><td>Nom</td><td><input type="text" id="nom"></td></tr>
        <tr><td><input type="button" value="Action" onclick="disBonjour(); return false;"></td></tr>
      </table>
    </form>
    <br><br><span id="resultat"></span>
  </body>
</html>