3.1 Élément <input type="button">
L'élément <input type="button"> est utilisé pour créer un bouton qui n'a pas de comportement par défaut intégré. Contrairement aux boutons submit et reset, qui effectuent certaines actions lorsqu'ils sont cliqués, le bouton button est généralement utilisé avec du JavaScript pour effectuer des tâches spécifiques.
Exemple d'utilisation :
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
Attributs principaux :
1. Attribut value : définit le texte qui sera affiché sur le bouton.
<input type="button" value="Click Me">
2. Attribut onclick : définit la fonction JavaScript qui sera exécutée lorsqu'on cliquera sur le bouton.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
Exemples d'utilisation :
Appel d'une fonction JavaScript :
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
Changer le style d'un élément :
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">This is a paragraph.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 Élément <input type="checkbox">
L'élément <input type="checkbox"> est utilisé pour créer des cases à cocher qui permettent aux utilisateurs de sélectionner une ou plusieurs options parmi celles proposées. La case à cocher peut être activée ou désactivée.
Exemple d'utilisation :
<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
Attributs principaux :
1. Attribut name : définit le nom de l'élément de formulaire qui sera envoyé au serveur avec les données.
<input type="checkbox" name="subscribe">
2. Attribut value : définit la valeur qui sera envoyée au serveur si la case est cochée.
<input type="checkbox" name="subscribe" value="yes">
3. Attribut checked : détermine si la case doit être cochée par défaut.
<input type="checkbox" name="subscribe" value="yes" checked>
Exemples d'utilisation :
Plusieurs cases à cocher :
<p>Select your interests:</p>
<input type="checkbox" name="interest" value="sports">Sports<br>
<input type="checkbox" name="interest" value="music">Music<br>
<input type="checkbox" name="interest" value="movies">Movies<br>
Case cochée par défaut :
<input type="checkbox" name="terms" value="agree" checked> I agree to the terms and conditions
3.3 Élément <input type="radio">
Champ de sélection de bouton radio (type="radio")
L'élément <input type="radio"> est utilisé pour créer des « boutons radio » qui permettent aux utilisateurs de sélectionner une seule option parmi un groupe. Les boutons radio sont regroupés par le même attribut name.
Exemple d'utilisation :
<p>Choose your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
Attributs principaux :
Attribut name : définit le nom du groupe de boutons radio. Tous les boutons radio avec le même nom appartiendront à un seul groupe, et l'utilisateur ne pourra en sélectionner qu'un seul.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
Attribut value : définit la valeur qui sera envoyée au serveur si le bouton radio est sélectionné.
<input type="radio" name="gender" value="male">
Attribut checked : détermine si le bouton radio doit être sélectionné par défaut.
<input type="radio" name="gender" value="male" checked>
Exemples d'utilisation :
Groupe de boutons radio pour sélectionner une option :
<p>Choose a color:</p>
<input type="radio" name="color" value="red">Red<br>
<input type="radio" name="color" value="green">Green<br>
<input type="radio" name="color" value="blue">Blue<br>
Bouton radio avec valeur par défaut :
<input type="radio" name="subscription" value="monthly" checked>Monthly<br>
<input type="radio" name="subscription" value="yearly">Yearly<br>
GO TO FULL VERSION