Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment ajouter des boutons dans un formulaire HTML.
accès rapide
La démo
mettre ici la vidéo de la démonstration
Bouton Radio
Les boutons radio sont utilisés pour permettre à l’utilisateur de choisir une des options listées.
Ci-dessous un exemple de bouton radio :
<form>
<h2>Catégories d'âge</h2>
<p>
Sénior: <input type="radio" name="categorie" /><br />
Adulte: <input type="radio" name="categorie" /><br />
Enfant: <input type="radio" name="categorie" />
</p>
</form>
Pour faire la différence entre plus d’un groupe de boutons radio , nous devons ajouter l’attribut name :
<form>
<h2>Catégories d'âge</h2>
<p>
Sénior: <input type="radio" name="categorie" /><br />
Adulte: <input type="radio" name="categorie" /><br />
Enfant: <input type="radio" name="categorie" />
</p>
<h2>choisisser votre sexe</h2>
<p>
Homme: <input type="radio" name="sexe" /><br />
Femme: <input type="radio" name="sexe" /><br />
</p>
</form>
Les boutons radio peuvent être sélectionnés par défaut pour faciliter la saisie de l’utilisateur.
L’attribut checked= »checked » permet de rendre le bouton radio sélectionné :
<form>
<h2>Catégories d'âge</h2>
<p>
Sénior: <input type="radio" name="categorie" checked/><br />
Adulte: <input type="radio" name="categorie" /><br />
Enfant: <input type="radio" name="categorie" />
</p>
<h2>choisisser votre sexe</h2>
<p>
Homme: <input type="radio" name="sexe" checked="checked"/><br />
Femme: <input type="radio" name="sexe" /><br />
</p>
</form>Bouton Checkbox
La valeur checkbox donne à l’utilisateur la possibilité de choisir aucun choix, un choix ou même plusieurs choix.
Attributs : name, checked,value
<form>
Quel(s) sport(s) pratiquez vous ?<br />
<input type="checkbox" name="sport" value="natation" checked> Natation <br />
<input type="checkbox" name="sport" value="boxe" > boxe <br />
<input type="checkbox" name="sport" value="course" > Course à pied <br />
<input type="checkbox" name="sport" value="foot" > foot <br />
<input type="checkbox" name="sport" value="escalade"> Escalade
</form>
Bouton
Les éléments <input> de type button permettent de créer un bouton poussoir.
La valeur de l’attribut value d’un élément contient une chaîne de caractères qui est affichera le libellé du bouton.
<form>
<input type="button" name="ajouter" value="ajouter">
</form>Bouton : Submit
Les éléments <input> dont l’attribut type vaut "submit" sont affichés comme des boutons permettant d’envoyer les données d’un formulaire.
<form>
<input type="submit" value="Envoyer le formulaire">
</form>Bouton : Reset
Les éléments <input> de type "reset" sont affichés sous la forme de boutons permettant de réinitialiser l’ensemble des champs du formulaire avec leurs valeurs initiales.
<form>
<input type="reset" name="Supprimer" value="Supprimer">
</form>Bouton : Image
Les éléments <input> dont l’attribut type vaut image sont utilisés pour créer des boutons d’envoi de formulaire graphiques. Autrement dit, il s’agit de boutons d’envoi qui affichent une image plutôt qu’un texte.
<form>
<input type="image" name ="bi" src="image/bimage.jpg">
</form>Exemple
<h1>Formulaire </h1>
<form>
<label>Mot de passe</label>
<input type="password" name="password" required><br>
<input type="reset" value="Supprimer">
<input type="submit" value="Envoyer">
<input type="button" value="Acceuil">
</form>
Dans cette partie , nous avons appris comment ajouter des boutons dans un formulaire HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer créer insérer des listes déroulantes dans un formulaire HTML.