oujood.com

  HTML La balise <input> élément d'entré de données

Cet article explique les bases de la balise input en HTML, en mettant en avant quelques-uns de ses types les plus courants et en montrant un exemple de formulaire simple.
La balise <input> spécifie un champ de saisie où l'utilisateur peut entrer des données.

chercher |

Définition et utilisation La balise <input>

Les éléments <input> sont utilisés dans un élément <form> pour déclarer des contrôles d'entrée qui permettent aux utilisateurs d'entrer des données.

La balise <input> est utilisée pour créer des champs interactifs dans un formulaire HTML. Elle peut prendre plusieurs types, en fonction de l'interaction souhaitée.

Types de champs

Voici quelques-uns des types de champs les plus couramment utilisés avec la balise <input> :

  • Texte : Utilisé pour les champs de saisie de texte courts.
  • Mot de passe : Masque les caractères pour les champs de mot de passe.
  • Checkbox : Permet à l'utilisateur de sélectionner une ou plusieurs options.
  • Radio : Permet à l'utilisateur de sélectionner une seule option parmi plusieurs.
  • Bouton radio : Similaire à la radio, mais avec un style personnalisé.
  • Submit : Utilisé pour soumettre un formulaire.

Le champ d'entrée <input>  a plusieurs variétés  en fonction de l'attribut type voir le tableau en bas.

Exemple Un formulaire HTML avec trois éléments input ; dont  deux champs de saisie et un bouton :

Exemple :     📋 Copier le code

	  <form action="page cible">
	    Nom: <input type="text" name="nom"><br>
	    Prénom : <input type="text" name="pnom"><br>
	    <input type="submit" value="Envoyer">
	  </form>

Cet exemple crée un formulaire avec un champ de saisie de texte pour le nom d'utilisateur, un champ de mot de passe, et un bouton de soumission.

Appui de navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

La balise <input> est pris en charge dans tous les principaux navigateurs.

image astuce Astuces et conseils

Remarque : L’élément <input> est toujours  vide, il ne doit contenir que des attributs.

image asstuceAstuce : Utilisez l'élément <label> pour définir des étiquettes pour les éléments <input>.


Différences entre HTML 4.01 et HTML5

Dans HTML 4.01, l'attribut " align " est obsolète et n'est plus supporté en HTML5. Utiliser le CSS à la place.

En HTML5, la balise <input> a plusieurs nouveaux attributs, et l'attribut type a plusieurs nouvelles valeurs.


Différences entre HTML et XHTML

En HTML, la balise <input> n'a aucune balise de fin.

En XHTML, la balise <input> doit être correctement fermée, comme ça <input type="monType" value=""  />.


Les attributs de l’élément input :

La balise <input> en HTML prend plusieurs attributs qui permettent de contrôler son comportement et son apparence. Voici quelques-uns des attributs les plus couramment utilisés :

type

L'attribut type spécifie le type de champ à afficher. Les valeurs courantes sont :

  • text : Champ de texte simple.
  • password : Champ de mot de passe.
  • checkbox : Case à cocher.
  • radio : Bouton radio.
  • submit : Bouton de soumission.

Nouveau  : Nouveauté en HTML5.

Attribut ValeurDescription
accept audio/*
video/*
image/*
MIME_type
Spécifie les types de fichiers que le serveur doit accepter (uniquement pour le type = " file ")
align left
right
top
middle
bottom
N'est pas prise en charge en HTML5. Déconseillée dans HTML 4.01. Spécifie l'alignement d'une image d'entrée (uniquement pour type = " image ")
alt text Spécifie un texte de remplacement pour les images (uniquement pour type = " image ")
autocomplete Nouveau  on
off
Spécifie si un élément <input> devrait avoir la saisie automatique activé
autofocus Nouveau  autofocus Spécifie qu'un élément <input> doit obtenir automatiquement le focus lorsque la page est chargée
checked checked Spécifie qu'un élément <input> devrait être présélectionné (coché ) lorsque la page est chargée (pour le type = " checkbox " ou le type = " radio ")
disabled disabled Spécifie qu'un élément <input> doit être désactivé
form Nouveau  form_id Spécifie un ou plusieurs formulaires auxquelles l'élément <input> appartient
formaction Nouveau  URL Spécifie l'URL du fichier qui traitera le contrôle d'entrée  lorsque le formulaire est envoyé (pour type = " submit " et type = " image ")
formenctype Nouveau  application/x-www-form-urlencoded
multipart/form-data
text/plain
Spécifie comment les données du formulaire doivent être encodées lors de la soumission d'une demande au serveur (pour type = " submit " et type = " image ")
formmethod Nouveau  get
post
Définit la méthode HTTP pour l'envoi de données vers l'URL d'action (pour type = " submit " et type = " image ")
formnovalidate Nouveau  formnovalidate Spécifie que les  éléments cette form ne doivent pas être validées lors de la soumission
formtarget Nouveau  _blank
_self
_parent
_top
framename
Spécifie l'emplacement où afficher la réponse reçue après avoir rempli le formulaire (pour type = " submit " et type = " image ")
height Nouveau  pixels Spécifie la hauteur d'un élément <input> (uniquement pour type = " image ")
list Nouveau  datalist_id Fait référence à un élément <datalist> qui contient les options prédéfinies pour un élément <input>
max Nouveau  number
date
Spécifie la valeur maximale d'un élément <input>
maxlength number Spécifie le nombre maximal de caractères autorisés dans un élément <input>
min Nouveau  number
date
Spécifie une valeur minimale d'un élément <input>
multiple Nouveau  multiple Spécifie qu'un utilisateur peut entrer plusieurs valeurs dans un élément <input>
name text Spécifie le nom d'un élément <input>
pattern Nouveau  regexp Spécifie une expression régulière à laquelle la valeur de l'élément <input> doit être comparée
placeholder Nouveau  text Spécifie une courte indication qui décrit la valeur attendue de l'élément <input>
readonly readonly Spécifie qu'un champ d'entrée est en lecture seule
required Nouveau  required Spécifie qu'un champ de saisie doit être rempli avant d'envoyer le formulaire
size number Spécifie la largeur, en caractères, d'un élément <input>
src URL Spécifie l'URL de l'image à utiliser comme un bouton d'envoi (uniquement pour type = " image ")
step Nouveau  number Spécifie les intervalles numériques légales pour un champ de saisie
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
Spécifie le type de l'élément <input> à afficher
value text Spécifie la valeur d'un élément <input>
 
width Nouveau  pixels Spécifie la largeur d'un élément <input> (uniquement pour type = " image ")

Attributs globaux

La balise <input> prend également en charge les Attributs globaux dans HTML.


Attributs de l'événement

La balise <input> prend également en charge les Attributs de l'événement au format HTML.


Pages connexes

Tutoriel HTML: formulaires HTML

Tutoriel PHP: traitement des formulaires en php


Retour à l'accueil du site

Par carabde 10 mars 2014

Voir aussi nos tutoriel :

fonction strip_tags, strip_tags

Supprime les balises HTML et PHP d'une chaîne

html5 Audio

insérer des audio

Événements html

Aide mémoire : HTML Liste des attributs d'événement...