Comment récupérer les valeurs de tous les types d'entrées HTML en JavaScript

Ce blog explique comment utiliser JavaScript pour récupérer les valeurs de différents types d'entrée dans un formulaire HTML par leur identifiant.

Types d'entrée et méthodes de récupération

1. Saisie de texte

• Code HTML :

  <input type="text">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const textValue = document.getElementById('textInput').value;

• Explication : Récupère la valeur saisie dans le champ de saisie de texte.

---

2. Saisie par e-mail

• Code HTML :

  <input type="email">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const emailValue = document.getElementById('emailInput').value;

• Explication : Récupère l'e-mail saisi par l'utilisateur. Ce champ attend un format d'e-mail valide.

---

3. Saisie du mot de passe

• Code HTML :

  <input type="password">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const passwordValue = document.getElementById('passwordInput').value;

• Explication : Récupère le texte saisi dans le champ de saisie du mot de passe.

---

4. Saisie du numéro

• Code HTML :

  <input type="number">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const numberValue = document.getElementById('numberInput').value;

• Explication : Récupère le numéro saisi dans le champ de saisie.

---

5. Saisie de la date

• Code HTML :

  <input type="date">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const dateValue = document.getElementById('dateInput').value;

• Explication : Récupère la date sélectionnée au format AAAA-MM-JJ.

---

6. Bouton radio

• Code HTML :

  <input type="radio">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const radioValue = document.querySelector('input[name="radioInput"]:checked')?.value || null;

• Explication : Récupère la valeur du bouton radio sélectionné. Si aucun n'est sélectionné, il renvoie null.

---

7. Case à cocher

• Code HTML :

  <input type="checkbox">



<ul>
<li>
<strong>JavaScript Code</strong>:
</li>
</ul>

<pre class="brush:php;toolbar:false">  const checkboxValues = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);

• Explication : Récupère toutes les valeurs de case à cocher sélectionnées sous forme de tableau. Si aucune case n'est cochée, il renvoie un tableau vide.

---

8. Liste déroulante (Sélectionner)

• Code HTML :

  <select>

• JavaScript Code:

  const dropdownValue = document.getElementById('dropdownInput').value;

• Explication : Récupère la valeur sélectionnée dans le menu déroulant.

---

9. Zone de texte

• Code HTML :

  <textarea>

• JavaScript Code:

  const textareaValue = document.getElementById('textareaInput').value;

• Explication : Récupère le texte saisi dans le champ textarea.

---

Exemple : Script complet

Voici un exemple qui récupère les valeurs de tous les types d'entrée dans un formulaire :

  <input type="text">

• JavaScript Code:

  const textValue = document.getElementById('textInput').value;

---

Comment utiliser

1. Ajoutez les éléments du formulaire HTML à votre page Web avec les attributs d'identification spécifiés.
2. Utilisez l'extrait JavaScript correspondant pour récupérer les valeurs des entrées.
3. Les données collectées peuvent être enregistrées ou envoyées à un serveur pour un traitement ultérieur.

---

Cette documentation fournit une référence claire pour travailler avec différents types d'entrée en HTML et collecter leurs valeurs à l'aide de JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!