G-Manipulation des propriétés de formulaire HTML en JavaScript
Les formulaires vont nous servir à recevoir des données envoyées par les utilisateurs.
Par exemple, lors de la création d’un compte client, nous utiliserons un formulaire pour récupérer les différentes informations relatives au client (nom, prénom, adresse, etc.).
On peut également utiliser les formulaires pour créer des formulaires de contact.
Pour rappel, les formulaires vont être écrits en HTML (et mis en forme en CSS), puis les informations envoyées vont être analysées et / ou stockées par d’autres langages comme le PhP ou MySQL.
Pour créer le squelette notre formulaire en HTML, il nous faut déjà préciser un élément form qui va définir le formulaire en soi.
Nous devons également donner deux attributs à l’élément form : les attributs method et action.
L’attribut method va nous permettre de choisir la méthode d’envoi des données (post ou get), tandis que l’attribut action va être indispensable pour préciser la page qui doit effectuer le traitement des données.
Ensuite, pour créer notre formulaire en soi, nous avons à notre disposition différents éléments et de nombreux attributs.
L’élément que nous utiliserons majoritairement est l’élément input. L’attribut type de cet élément va nous permettre de modifier la forme du champ de formulaire créé en précisant le type de données que doit recevoir le champ à priori.
- Manipuler input de type text en JavaScript
On peut manipuler les propriétés suivantes
- Value
- Size
- Maxlength
- Focus
- blur
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{text-align: center;}
input{margin:3em}
</style>
</head>
<body>
<h1>Les Formulaire</h1>
<form action="">
<input type="text" value="Bonjour">
</form>
<script>
let elt = document.querySelector('input')
console.log(elt.value)
elt.value="au revoir"
console.log(elt.size)
elt.size=5
elt.style.border='1px dashed red'
</script>
</body>
</html>Changer l’apparence de l’input aux évènements focus et blur
<script>
let elt = document.querySelector('input')
elt.addEventListener('focus',function(){
elt.style.backgroundColor="green"
})
elt.addEventListener('blur',function(){
elt.style.backgroundColor="red"
})
</script>
- Manipuler textarea en JavaScript
- Value
- Cols/rows
- width
- resize
- wrap
<body>
<form action="">
<textarea name="" id="" cols="30" rows="10">Bonjour à tous</textarea>
</form>
<script>
let elt = document.querySelector('textarea')
console.log(elt.cols)
console.log(elt.rows)
elt.cols=80
elt.rows=10
elt.style.width="100%"
elt.style.resize='none'
elt.spellcheck=false
elt.wrap="off"
</script>
</body>- Manipuler select en JavaScript
- selectIndex
- Value
- Le tableau options
<body>
<form action="">
<select name="choix[]" multiple>
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
</select>
</form>
<script>
let elt = document.querySelector('select')
elt.addEventListener('change', function() {
var tab =[];
for (var i = 0; i < elt.options.length; i++) {
if ( elt.options[i].selected === true ) tab[i] = i;
}
console.log(tab);
})
</script>
</body>- Manipuler input de type checkBox
- checked
- value
<body>
<form action="">
<label for="check">Choix</label>
<input type="checkbox" id="check">
</form>
<script>
let elt = document.querySelector('input')
console.log(elt.checked);
elt.checked=true
console.log(elt.value)
</script>
</body>- Manipuler input de type radio
- checked
- value
<body>
<input type="radio" name="choix" value=0>choix1
<input type="radio" name="choix" value=1>choix2
<input type="radio" name="choix" value=2>choix3
<script>
let elt = document.querySelectorAll('input')
for (let i=0;i<elt.length;i++){
console.log(elt[i].value)
if(elt[i].checked=== true){
break
}
}
</script>
</body>