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 astuceAstuce : 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 :

Sélectionner 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

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

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

Sélectionner 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

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

Sélectionner 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

Exemple Sélectionnez une couleur dans un nuancier :

Sélectionner 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

Exemple Définir un contrôle de date :

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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 Safari sur iPhone reconnaît le type de courrier et change le clavier à l'écran pour faire correspondre.

Type d'entrée : file

Opera

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

Sélectionner 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

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 :

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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

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 :

Sélectionner 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

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

Sélectionner 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 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

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

Sélectionner 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

Exemple Définir un bouton Envoyer :

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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

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

Sélectionner 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 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

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

Sélectionner 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

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE

Consulter


1tpe