Objet RealMedia
Ce chapitre décrit comment utiliser l'objet Real Audio et Real Vidéo.
L'attribut type spécifie le type d'élément <input> à afficher.
L'attribut type spécifie le type d'élément <input> à afficher.
Le type par défaut est : texte.
Astuce :
L’attribut type n'est pas un attribut requis, mais nous pensons que vous devez toujours
l’inclure.
<input type="value">
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)
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.
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
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>
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>
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>
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>
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>
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>
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>
Astuce : Safari sur iPhone reconnaît le type de courrier et change le clavier à
l'écran pour faire correspondre.
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>
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>
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>
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>
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
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>
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>
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
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>
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.
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>
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>
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>
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>
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>
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 : Safari sur iPhone reconnaît le type d'entrée d'url et change le
clavier à l'écran pour faire correspondre
option adds . com )
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