oujood.com

  HTML L’attribut type de la balise input

L'attribut type spécifie le type d'élément <input> à afficher.

chercher |

Définition et utilisation attribut type

LES BALISES HTML

L'attribut type spécifie le type d'élément <input> à afficher.

Le type par défaut est : texte.

image astuce  Astuce : L’attribut type n'est pas un attribut requis, mais nous pensons que vous devez toujours l’inclure.

Syntaxe

<input type="value">

Exemple Un formulaire HTML avec deux types différents d'entrée : text et submit :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action="page- cible.php "> 
	     Nom: <input type="text" name="nom">< br >< br > 
	  <input type="submit"> 
	  </form> 
	  </body> 
	  </html>

( plus d’exemples ci-dessous)

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut type fonctionne dans tous les principaux navigateurs. Cependant, les différents types d'entrée ne fonctionnent pas tous dans tous les principaux navigateurs.

Jetez un coup d'oeil ci-dessous pour voir navigateur et prise en charge pour chaque type d'entrée.

Différences entre HTML 4.01 et HTML5

HTML5 a les nouveaux types d'entrée suivants : color , date, datetime , datetime-local , month , week , time, email, nombre , range, search , tel, et url.

Valeurs d'attribut

Valeur

Description

button

Définit un bouton cliquable (plus souvent utilisé avec un JavaScript pour éxecuter un script)

checkbox

Définit un contrôle checkbox

color Nouveau

Définit un sélecteur de couleurs

date Nouveau

Définit un contrôle de date (année, mois et jour (pas de temps))

datetime Nouveau

Définit un contrôle de date et d'heure (année, mois, jour, heure, minute, seconde et fraction de seconde, basée sur le fuseau horaire UTC)

datetime-local Nouveau

Définit un contrôle de date et d'heure (année, mois, jour, heure, minute, second et fraction d'une seconde (aucun fuseau horaire)

email Nouveau

Définit un champ pour une adresse de messagerie

file

Définit un champ de sélection de fichiers avec un bouton « Parcourir... » (pour les téléchargements de fichiers)

hidden

Définit un champ d'entrée caché

image

Définit une image comme bouton Envoyer

month Nouveau

Définit un contrôle du mois de l'année (aucun fuseau horaire)

nombre Nouveau

Définit un champ pour entrer un nombre

password

Définit un champ de mot de passe (les caractères sont masqués)

radio

Définit un bouton radio

range Nouveau

Définit un contrôle permettant d'entrer un nombre dont la valeur exacte n'est pas importante (comme un contrôle slider )

reset

Définit un bouton reset (réinitialise toutes les valeurs de formulaire aux valeurs par défaut)

search Nouveau

Définit un champ de texte pour entrer une chaîne à rechercher

submit

Définit un bouton Envoyer

tel Nouveau

Définit un champ pour entrer un numéro de téléphone

text

Valeur par défaut. Définit un champ de texte mono ligne (largeur par défaut est de 20 caractères)

time Nouveau

Définit un contrôle permettant d'entrer un temps (sans fuseau horaire)

url Nouveau

Définit un champ permettant d'entrer une URL

week Nouveau

Définit un contrôle une semaine de l’année (aucun fuseau horaire)

Exemples pour chaque type

Type d'entrée : button

Opera Safari Chrome Firefox Internet Explorer

Exemple Un bouton cliquable, qui actionne un JavaScript lorsqu'il est sélectionné :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  <script> 
	  function msg () 
	  { 
	  alert ( "Bonjour le monde!"); 
	  } 
	  </script> 
	  </head> 
	  <body> 
	  <form> 
	  <input type="button" value="Click me" onclick =" msg ()"> 
	  </ form > 
	  <p>Le bouton ci-dessus active une fonctionnalité JavaScript quand on clique
	  dessus .< /p> 
	  </body> 
	  </html>
 

Type d'entrée : checkbox

Opera Safari Chrome Firefox Internet Explorer

Exemple Cases à cocher permettre à un utilisateur de sélectionner une ou plusieurs options d'un nombre limité de choix :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  <input type="checkbox" name="vehicle" value="Bike"> J'ai un vélo < br > 
	  <input type=" checkbox " name =" vehicle " value="Car">J'ai une voiture< br
	  > 
	  <input type=" checkbox " name =" vehicle " value="Rien">Sans moyen
	  personnel< br > 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : color

Opera Safari Chrome Firefox Internet Explorer

Exemple Sélectionnez une couleur dans un nuancier :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  Sélectionnez votre couleur favorite   <input type=" color " name=" favcolor
	  "> 
	  </form> 
	  </body> 
	  </html>

Type d'entrée : date

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un contrôle de date :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  Date de naissance: <input type="date" name=" bday "> 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : datetime

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un contrôle de date et d'heure (avec fuseau horaire) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  Date de naissance(date et heur ): <input type=" datetime " name=" bdaytime "> 
	  </form>
	  </body> 
	  </html>

Type d'entrée : datetime local

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un contrôle de date et d'heure (sans fuseau horaire) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  Date de naissance(date et heur ): <input type=" datetime -local" name=" bdaytime
	  "> 
	  </form> 
	  </body> 
	  </html>
 

Type d'entrée : email

Opera Safari Chrome Firefox Internet Explorer

Exemple Définissez un champ pour une adresse de messagerie (sera automatiquement validée lorsque il est envoyé) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  E-mail: <input type="email" name=" usremail "> 
	  </form> 
	  </body> 
	  </html>

Image Astuce : Safari sur iPhone reconnaît le type de courrier et change le clavier à l'écran pour faire correspondre.

Type d'entrée : file

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un champ de sélection de fichier avec un bouton « Parcourir... » ( pour les téléchargements de fichiers) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  Sélectionner un fichier: <input type="file" name ="fichier"> 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : hidden

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un champ caché (non visible par un utilisateur). Souvent, un champ masqué stocke une valeur par défaut, ou peut avoir sa valeur modifiée par un JavaScript :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  <input type="hidden" name="country" value=" Norway "> 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : image

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir une image comme bouton d'envoi :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  <input type="image" src =" img_submit.gif " alt="Submit"> 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : month

Opera Safari Chrome Firefox Internet Explorer

Exemple Définissez un contrôle mois et l'année (aucun fuseau horaire) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  Date de naisance ( mois et année ): <input type="month" name=" bdaymonth "> 
	  </form> 
	  </body> 
	  </html>

Type d'entrée : nombre

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un champ pour entrer un numéro (vous pouvez également définir des restrictions sur le type de chiffres acceptés) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </ head > 
	  <body> 
	  < form > 
	  Quantité (entre 1 et 5 ): <input type=" nombre " name =" quantite " min="1"
	  max="5"> 
	  </ form > 
	  </body> 
	  </html>


  Utilisez les attributs suivants pour spécifier des restrictions :

max - spécifie la valeur maximale autorisée

min - spécifie la valeur minimale autorisée

step - spécifie les intervalles de nombres autorisés

value - spécifie la valeur par défaut

Type d'entrée : password   ( mot de passe)

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un champ de mot de passe (les caractères sont masqués)

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  mot de pase :<input type="password" name=" pwd "> 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : radio

Opera Safari Chrome Firefox Internet Explorer

Exemple Cases d'option permettre à un utilisateur de choisir un seul d'un nombre limité de choix :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  <input type="radio" name=" sexe " value="male"> Home< br >< br > 
	  <input type="radio" name=" sexe " value="female"> Femme< br > 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : range

Opera Safari Chrome Firefox Internet Explorer

Exemple Définissez un contrôle permettant d'entrer un nombre dont la valeur exacte n'est pas importante (comme un contrôle slider ).

  Vous pouvez également définir des restrictions sur le type de chiffres acceptés :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form> 
	  <input type="range" name="points" min="1" max="10"> 
	  </ form > 
	  </body> 
	  </html>
 

Utilisez les attributs suivants pour spécifier des restrictions :

max - spécifie la valeur maximale autorisée

min - spécifie la valeur minimale autorisée

step - spécifie les intervalles de nombres autorisés

value - spécifie la valeur par défaut

Type d'entrée : reset

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un bouton reset (réinitialise toutes les valeurs du formulaire aux valeurs par défaut) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action=""> 
	    Email: <input type="text" name="email">< br > 
	    Pin: <input type="text" name="pin" maxlength ="4">< br >< br
	  > 
	    <input type="reset" value="Reset">    <input type="submit"
	  value="Submit"> 
	  </ form > 
	  <p>Click sur le bouton reset pour réinitialiser le formulaire .< /p> 
	  </body> 
	  </html>

image astuce   Astuce : Utilisez le bouton de réinitialisation avec précaution ! Il peut être ennuyeux pour les utilisateurs qui active accidentellement le bouton de réinitialisation.

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un champ de recherche (comme un site recherche ou recherche Google ) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action=""> 
	  Recherche Google : <input type="search" name=" googlesearch "> 
	  </ form > 
	  </body> 
	  </html>

Type d'entrée : submit

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un bouton Envoyer :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action=""> 
	  Recherche Google : <input type="search" name=" googlesearch "> 
	  <input type="submit"> 
	  </form> 
	  </body> 
	  </html>

Type d'entrée: Tel.

Opera Safari Chrome Firefox Internet Explorer

Exemple Définissez un champ pour entrer un numéro de téléphone :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action=""> 
	  Téléphone : <input type=" tel " name=" usrtel "> 
	  <input type="submit"> 
	  </form> 
	  </body> 
	  </html>

Type d'entrée : text

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir deux champs d'une ligne de texte qu'un utilisateur peut entrer du texte dans :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action=""> 
	  Prénom : <input type="text" name=" pnom ">< br > 
	  Nom : <input type="text" name="nom">< br > 
	  Telephone: <input type=" tel " name=" usrtel ">< br > < br > 
	  <input type="submit"> 
	  </form> 
	  </body> 
	  </html>

Type d'entrée : time

Opera Safari Chrome Firefox Internet Explorer

Exemple Définissez un contrôle permettant d'entrer une heure (sans fuseau horaire) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action=""> 
	  Sélectionner un temps: <input type="time" name=" usr_time "> 
	  <input type="submit"> 
	  </form> 
	  </body> 
	  </html>

Type de saisie : url

Opera Safari Chrome Firefox Internet Explorer

Exemple Définir un champ permettant d'entrer une URL :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title> 
	  </head> 
	  <body> 
	  <form action=""> 
	  Votre site: <input type=" url " name="site">< br > < br > 
	  <input type=" submit "> 
	  </ form > 
	  <p>pour voir l'effet saisissez quelque chose qui n'est pas une url et cliquez
	  sur envoyer</p> 
	  </body> 
	  </html>

astuce   Astuce : Safari sur iPhone reconnaît le type d'entrée d'url et change le clavier à l'écran pour faire correspondre

option  adds . com )

Type d'entrée : week

Opera Safari Chrome Firefox Internet Explorer

Exemple Définissez un contrôle semaine et année (aucun fuseau horaire) :

Exemple :       Copier le code

	  <!DOCTYPE html> 
	  <html lang =" fr "> 
	  <head> 
	  <meta http-equiv="Content-Type" content="text/html; charset =utf-8" /> 
	  <title>html5 demo</title>
	  </head> 
	  <body> 
	  <form action=""> 
	  choisir une semaine : <input type="week" name=" week_year ">< br > <
	  br > 
	  <input type="submit"> 
	  </form> 
	  </body> 
	  </html>

Retour à l'accueil du site

Par carabde 10 mars 2014



Voir aussi nos tutoriel :

fonction str_pad

Complète une chaîne jusqu' une taille donnée

Où mettre le code js

Où mettre le code js : Dans ce cours nous allons apprendre plus de précision sur où mettre le code js dans une page web

La variable globale de PHP get

La variable globale de PHP get