HTML

Utilisation des éléments <input>, <textarea>, <select> et <button>

Utilisation des éléments <input>, <textarea>, <select> et <button>


Dans un formulaire HTML, différents éléments sont utilisés pour collecter des données de l'utilisateur. Voici comment utiliser ces éléments :


1. Balise <input> :


  • La balise <input> est utilisée pour créer des champs de saisie de données tels que des champs de texte, des cases à cocher, des boutons radio, etc.
  • L'attribut type définit le type de champ d'entrée.
  • Exemples :


<!-- Champ de texte -->
<input type="text" name="nom" id="nom">
<!-- Case à cocher -->
<input type="checkbox" name="newsletter" id="newsletter">
<!-- Bouton radio -->
<input type="radio" name="genre" value="homme"> Homme
<input type="radio" name="genre" value="femme"> Femme


2. Balise <textarea> :


  • La balise <textarea> est utilisée pour créer un champ de texte multiligne, permettant aux utilisateurs de saisir un texte plus long.
  • Vous pouvez définir le nombre de lignes et de colonnes à afficher.
  • Exemple :


<textarea name="message" id="message" rows="4" cols="50"></textarea>


3. Balise <select> :


  • La balise <select> est utilisée pour créer une liste déroulante (menu select).
  • Les options disponibles sont définies à l'intérieur de la balise <select> avec des balises <option>.
  • Exemple :


<select name="pays" id="pays">
  <option value="france">France</option>
  <option value="espagne">Espagne</option>
  <option value="italie">Italie</option>
</select>


4. Balise <button> :


  • La balise <button> est utilisée pour créer un bouton dans un formulaire.
  • Vous pouvez utiliser les attributs type pour définir le type de bouton (submit, reset, button).
  • Exemple :


<button type="submit">Envoyer</button>
<button type="reset">Effacer</button>
<button type="button">Cliquer</button>


Conseils d'utilisation :


  • Utilisez <input> pour les champs de saisie simples comme les champs de texte, les cases à cocher et les boutons radio.
  • Utilisez <textarea> pour les champs de texte multilignes.
  • Utilisez <select> pour les menus déroulants.
  • Utilisez <button> pour créer des boutons dans le formulaire.


Conclusion :


En utilisant les balises <input>, <textarea>, <select> et <button> dans votre fichier HTML, vous pouvez créer des formulaires interactifs pour collecter divers types de données auprès des utilisateurs. Assurez-vous d'utiliser ces éléments de manière appropriée en fonction des besoins de votre formulaire.

848 vues
Posté le 20 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
596 vues
Objets : création, propriétés, méthodes
Objets en JavaScript1. Création d'Objets :Un objet en JavaScript est une structure de données qui permet de stocker des collections de paires clé-valeur. Les clés sont des chaînes de caractères...
JS
19 906 vues
Créer un profil PHP
Après avoir créé notre page de connexion et notre page d'inscription il est temps de créer un profil pour votre utilisateur !La page profil permettra plusieurs choses ! D'éditer ses informations...
Créer son site
16 875 vues
Modifier un profil PHP
Après avoir créé notre page profil, nous allons créer une nouvelle page afin de modifier certaines données de l'utilisateur !La modification d'un profil se fait également par un...
Créer son site
749 vues
Les pseudo-classes et pseudo-éléments pour le stylisme conditionnel
Les Pseudo-Classes et Pseudo-Éléments pour le Stylisme ConditionnelEn CSS, les pseudo-classes et les pseudo-éléments permettent d'appliquer des styles à des éléments HTML en fonction de leur...
CSS
560 vues
Médias queries : rendre les pages Web réactives en fonction de la taille de l'écran
Media Queries : Rendre les Pages Web Réactives en Fonction de la Taille de l'ÉcranLes Media Queries sont une fonctionnalité de CSS qui permettent d'appliquer des styles en fonction des...
CSS
7 750 vues
Créer une barre de recherche
IntroductionDéroulement du coursCréation d'un formulaire permettant de faire une recherche d'utilisateur via un bouton afin d'afficher les résultats.Ajouter les librairies nécessaires afin de...
Créer son site
2 526 vues
Envoyer un message sans recharger la page (2/2)
Comme nous avons mis en place notre système en JavaScript / Ajax pour envoyer un message sans recharger notre page en cours nous allons maintenant enregistrer le message + afficher ce dernier dans...
Créer son site de rencontres
5 873 vues
Afficher la liste des catégories
Pour commencer nous allons créer la page maître de notre forum. C'est cette page qui contiendra les différentes catégories.Tout d'abord nous allons créer un dossier que nous...
Créer son site
Publicité
Cette pub permet au site de vivre ...