Une sous-interface de Element particulière : InputElement
Les éléments de type input sont des champ de saisie utilisateur, et la balise est dite auto-fermante, ce qui veut dire qu’il n’y a pas de HTML ni de texte à l'intérieur.
Comment donc récupérer leur valeur ?
Récupérer la valeur d'un (input) saisie par l’utilisateur
Avec les bases acquises en HTML, CSS, JavaScript, et DOM, nous pouvons comprendre le code suivant :
html
<html>
<head>
<style>
input {
border: 1px solid gray;
border-radius: 3px;
padding: 0.8em;
}
</style>
</head>
<body>
<form id="login-form">
<label for="login">
Nom d'utilisateur :
</label>
<input name="login" id="login" placeholder="Écrivez ici">
<label for="password">
Mot de passe :
</label>
<input type="password" name="password" id="password" placeholder="Et ici aussi">
<input type="submit" value="Puis cliquez ici">
</form>
<div>
Valeurs : <span id="result"></span>
</div>
<script>
const formElt = document.querySelector('#login-form') // Récupération de l'élément form par son id
const loginElt = document.querySelector('#login') // Récupération de l'input login par son id
const passwordElt = document.querySelector('#password') // Récupération de l'input password par son id
const resultElt = document.querySelector('#result') // Récupération de l'élément où on affichera des données par son id
formElt.addEventListener('submit', getValues) // Ajout d'un écouteur sur l'événement 'submit' du formulaire, cf plus loin
function getValues (event) { // Création de la fonction qui sera appelé à chaque fois que le formulaire sera soumis (validé)
event.preventDefault() // Annulation de l'action par défaut de l'événement (qui serait l'envoi à une page du contenu du formulaire)
const login = loginElt.value // Récupération de la valeur du champs 'login'
const password = passwordElt.value // Récupération de la valeur du champs 'password'
// Affichage des valeurs des champs (uniquement pour la démonstration, ne pas faire ce genre de choses !)
resultElt.innerHTML = 'Nom d\'utilisateur : <strong>' + login + '</strong> - Mot de passe : <strong>' + password + '</strong>'
}
</script>
</body>
</html>La propriété value d’un est modifiable :
js
loginElt.value = 'nouvelle valeur'Ainsi, si programmatiquement on change sa valeur, ce sera visible sur la page, dans le navigateur.
Le cas particulier des types checkbox et radio
Les input de type checkbox et radio auront toujours la même valeur, il faudra donc non pas récupérer seulement la valeur de value, il faut aussi la valeur de checked, c'est-à-dire voir s'ils sont cochés.
html
<html>
<head>
<style>
input {
border: 1px solid gray;
border-radius: 3px;
padding: 0.8em;
}
fieldset {
margin: 1em;
border: 1px solid gray;
border-radius: 3px;
padding: 0.8em;
}
</style>
</head>
<body>
<form id="menu-form">
Choisissez :
<fieldset>
<legend>Plat</legend>
<div>
<input type="checkbox" name="burger" id="burger" value="Un burger">
<label for="burger">
Burger
</label>
<input value="bœuf" type="radio" name="burger-protein" id="beef" checked>
<label for="beef">
Boeuf
</label>
<input value="portobello" type="radio" name="burger-protein" id="portobello">
<label for="portobello">
Portobello
</label>
</div>
<div>
<input type="checkbox" name="side" id="side" value="side">
<label for="side">
Accompagnement
</label>
<input type="radio" name="side-choice" id="salad" value="une salade" checked>
<label for="salad">
Salade
</label>
<input type="radio" name="side-choice" id="fries" value="des frites">
<label for="fries">
Frites
</label>
</div>
</fieldset>
<fieldset>
<input type="checkbox" name="dessert" id="dessert" value="dessert">
<label for="dessert">
Dessert
</label>
<input type="radio" name="dessert-choice" id="cheesecake" value="un cheesecake" checked>
<label for="cheesecake">
Cheesecake
</label>
<input type="radio" name="dessert-choice" id="brownie" value="un brownie">
<label for="brownie">
Brownie
</label>
</fieldset>
<input type="submit" value="Puis cliquez ici">
</form>
<div>
Menu : <span id="menu"></span>
</div>
<script>
const formElt = document.querySelector('#menu-form')
const burgerElt = document.querySelector('#burger')
const burgerProteinElts = Array.from(document.querySelectorAll('[name="burger-protein"]'))
const sideElt = document.querySelector('#side')
const sideChoiceElts = Array.from(document.querySelectorAll('[name="side-choice"]'))
const dessertElt = document.querySelector('#dessert')
const dessertChoiceElts = Array.from(document.querySelectorAll('[name="dessert-choice"]'))
const menuElt = document.querySelector('#menu')
formElt.addEventListener('submit', getValues)
function getValues (event) {
event.preventDefault()
// Déclaration de toutes les variables
let burger = ''
let side = ''
let sideStart = ''
let dessert = ''
let dessertStart = ''
let choice = ''
if (burgerElt.checked) {
burger = 'Burger au ' + burgerProteinElts.filter(elt => elt.checked).map(elt => elt.value)
}
console.log(burger)
if (sideElt.checked) {
sideStart = burgerElt.checked ? 'avec ' : 'Simplement '
side = sideStart + sideChoiceElts.filter(elt => elt.checked).map(elt => elt.value)
}
console.log(side)
if (dessertElt.checked) {
dessertStart = (burgerElt.checked || sideElt.checked) ? ' suivi d\'' : 'Simplement '
dessert = dessertStart + dessertChoiceElts.filter(elt => elt.checked).map(elt => elt.value)
}
console.log(dessert)
// Affichage des valeurs des champs (uniquement pour la démonstration, ne pas faire ce genre de choses !)
menuElt.innerHTML = burger + ' ' + side + ' ' + dessert
console.log(burger + ' ' + side + ' ' + dessert)
}
</script>
</body>
</html>