Scribd
Importer
6 vues2 pages

Application JavaScript d'affichage d'infos

Le document présente un exemple de code HTML et JavaScript pour créer une application simple affichant les informations d'une personne. Il inclut un formulaire pour saisir le nom, l'âge et l'email, ainsi qu'un style CSS pour améliorer l'apparence. Les informations saisies sont affichées sans recharger la page grâce à un gestionnaire d'événements en JavaScript.

Transféré par

Précieux Kisembo
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
6 vues2 pages

Application JavaScript d'affichage d'infos

Le document présente un exemple de code HTML et JavaScript pour créer une application simple affichant les informations d'une personne. Il inclut un formulaire pour saisir le nom, l'âge et l'email, ainsi qu'un style CSS pour améliorer l'apparence. Les informations saisies sont affichées sans recharger la page grâce à un gestionnaire d'événements en JavaScript.

Transféré par

Précieux Kisembo
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Pour créer une application JavaScript simple qui affiche les informations complètes d'une

personne, vous pouvez utiliser HTML et JavaScript. Voici un exemple de code :

```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Affichage d'une personne</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.info {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
}
</style>
</head>
<body>

<h1>Informations d'une personne</h1>


<form id="personForm">
<label for="name">Nom :</label>
<input type="text" id="name" required><br><br>

<label for="age">Âge :</label>


<input type="number" id="age" required><br><br>

<label for="email">Email :</label>


<input type="email" id="email" required><br><br>

<button type="submit">Afficher</button>
</form>

<div id="result" class="info" style="display:none;"></div>

<script>
[Link]('personForm').addEventListener('submit', function(event) {
[Link](); // Empêche le rechargement de la page

// Récupération des valeurs du formulaire


const name = [Link]('name').value;
const age = [Link]('age').value;
const email = [Link]('email').value;

// Affichage des informations


const resultDiv = [Link]('result');
[Link] = 'block';
[Link] = `<strong>Nom :</strong> ${name}<br>
<strong>Âge :</strong> ${age}<br>
<strong>Email :</strong> ${email}`;
});
</script>

</body>
</html>
```

### Explication du code :

1. **HTML** : La structure de la page contenant un formulaire pour entrer le nom, l'âge et


l'email.
2. **CSS** : Un style simple pour rendre l'affichage plus agréable.
3. **JavaScript** : Gère l'événement de soumission du formulaire pour afficher les
informations saisies sans recharger la page.

### Comment l'utiliser :

1. Copiez le code ci-dessus dans un fichier avec l'extension `.html`.


2. Ouvrez ce fichier dans un navigateur web.
3. Remplissez le formulaire et cliquez sur "Afficher" pour voir les informations.

N'hésitez pas à personnaliser le code selon vos besoins !

Vous aimerez peut-être aussi