Latest web development tutorials

HTML attributs de type d'entrée

HTML entrée Tag Référence HTML balise <input>

Exemples

formulaire HTML avec deux types d'entrée différents, le texte et le soumettre:

<form action="demo-form.php">
用户名: <input type="text" name="usrname"><br>
<input type="submit" value="提交">

Essayez »
(Voir en bas de cette page pour plus d'exemples)

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Tous les principaux navigateurs prennent en charge l'attribut type. Cependant, tous les principaux navigateurs prennent en charge tous les différents types d'entrée peuvent travailler dans tous les principaux navigateurs.

Voir ci-dessous pour chaque type de support du navigateur d'entrée.


Définition et utilisation

<Entrée> attribut type spécifie le type d'élément que vous souhaitez afficher.

Le type par défaut est: texte.

Note: Cet attribut est pas nécessaire, mais nous pensons que vous devriez toujours l' utiliser.


Différences entre HTML 4.01 et HTML5

Les types d'entrée suivants sont nouveaux dans le type HTML5: la couleur, la date, datetime, datetime-local, le mois, la semaine, le temps, email, numéro, plage, recherche, tel et url.


grammaire

<input type="value">

Valeur de la propriété

描述
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox 定义复选框。
color New 定义拾色器。
date New 定义 date 控件(包括年、月、日,不包括时间)。
datetime New 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local New 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email New 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
month New 定义 month 和 year 控件(不带时区)。
number New 定义用于输入数字的字段。
password 定义密码字段(字段中的字符会被遮蔽)。
radio 定义单选按钮。
range New 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset 定义重置按钮(重置所有的表单值为默认值)。
search New 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel New 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
time New 定义用于输入时间的控件(不带时区)。
url New 定义用于输入 URL 的字段。
week New 定义 week 和 year 控件(不带时区)。


Exemples

Type d'entrée: Bouton

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définition des boutons cliquables, lorsque l'utilisateur clique sur un bouton pour démarrer une période de JavaScript:

<input type="button" value="点我" onclick="msg()">

Essayez »


Type d'entrée: case

OperaSafariChromeFirefoxInternet Explorer

Exemples

Box permet à l'utilisateur de sélectionner une ou plusieurs options dans un certain nombre de choix:

<input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>

Essayez »


Type d'entrée: Couleur

OperaSafariChromeFirefoxInternet Explorer

Exemples

Choisissez une couleur dans le sélecteur de couleur:

选择你喜欢的颜色: <input type="color" name="favcolor"><br>

Essayez »


Type d'entrée: Date

OperaSafariChromeFirefoxInternet Explorer

Exemples

Défini contrôles de date:

生日: <input type="date" name="bday">

Essayez »


Type d'entrée: datetime

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définir la date et l'heure des contrôles (avec le fuseau horaire):

生日 (日期和时间): <input type="datetime" name="bdaytime">

Essayez »


Type d'entrée: datetime local

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définir la date et l'heure des contrôles (sans fuseau horaire):

生日 (日期和时间):<input type="datetime-local" name="bdaytime">

Essayez »


Type d'entrée: email

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définitions de champ pour l'adresse e-mail (lorsque le formulaire est transmis automatiquement à la valeur du champ de courriel pour vérifier):

E-mail: <input type="email" name="usremail">

Essayez »

Astuce: iPhone navigateur Safari reconnaîtra le type e - mail d'entrée, puis changer le clavier de l' écran tactile pour s'y adapter (ajouter @ et .com options).


Type d'entrée: fichier

OperaSafariChromeFirefoxInternet Explorer

Exemples

Pour définir le champ de sélection de fichier et un bouton "Parcourir ...", pour le téléchargement de fichiers:

选择一个文件: <input type="file" name="img">

Essayez »


Type d'entrée: caché

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définition des champs cachés, champs cachés ne sont pas visibles à l'utilisateur. champs cachés stockent souvent une valeur par défaut, ou de modifier leurs valeurs par le JavaScript:

<input type="hidden" name="country" value="Norway">

Essayez »


Type d'entrée: l'image

OperaSafariChromeFirefoxInternet Explorer

Exemples

image personnalisée que le bouton d'envoi:

<input type="image" src="img_submit.gif" alt="Submit">

Essayez »


Type d'entrée: mois

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définir le mois et l'année de contrôle (sans fuseau horaire):

生日 ( 月和年 ): <input type="month" name="bdaymonth">

Essayez »


Type d'entrée: Numéro

OperaSafariChromeFirefoxInternet Explorer

Exemples

Entrez un numéro pour définir les champs pour (vous pouvez définir les numéros de limites acceptables):

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

Essayez »

S'il vous plaît utiliser les attributs suivants pour spécifier des restrictions:

  • MAX - le maximum autorisé par la réglementation.
  • min - le minimum autorisé par la réglementation.
  • STEP - Exigences pour l' intervalle numérique juridique.
  • La valeur - par défaut spécifiée.

Type d'entrée: mot de passe

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définir les champs de mot de passe (champs de mot de passe sont personnages masqués):

<input type="password" name="pwd">

Essayez »


Type d'entrée: la radio

OperaSafariChromeFirefoxInternet Explorer

Exemples

Il permet à l'utilisateur de sélectionner une option dans un certain nombre de choix:

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="女"> 女

Essayez »


Type d'entrée: gamme

OperaSafariChromeFirefoxInternet Explorer

Exemples

Il définit la valeur exacte est pas le contrôle numérique d'entrée importante (tels que les contrôles de curseur). Vous pouvez également définir des limites acceptables les numéros:

<input type="range" name="points" min="1" max="10">

Essayez »

S'il vous plaît utiliser les attributs suivants pour spécifier des restrictions:

  • MAX - le maximum autorisé par la réglementation.
  • min - le minimum autorisé par la réglementation.
  • STEP - Exigences pour l' intervalle numérique juridique.
  • La valeur - par défaut spécifiée.

Type d'entrée: reset

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définir le bouton de réinitialisation (reset toute la forme est la valeur par défaut):

<input type="reset">

Essayez »

Astuce: Soyez prudent en utilisant le bouton de remise à zéro!Pour les utilisateurs, accidentellement cliqué sur le bouton de réinitialisation est une chose très ennuyeux.


Type d'entrée: recherche

OperaSafariChromeFirefoxInternet Explorer

Exemples

champ de recherche défini (par exemple, la recherche de site ou de recherche Google, etc.):

Search Google: <input type="search" name="googlesearch">

Essayez »


Type d'entrée: soumettre

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définir le bouton de soumission:

<input type="submit">

Essayez »


Type d'entrée: tel

OperaSafariChromeFirefoxInternet Explorer

Exemples

champs définis pour la saisie des numéros de téléphone:

电话号码: <input type="tel" name="usrtel">

Essayez »


Type d'entrée: Texte

OperaSafariChromeFirefoxInternet Explorer

Exemples

L'utilisateur peut définir deux pour entrer une seule ligne de texte dans un champ de texte:

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>

Essayez »


Type d'entrée: le temps

OperaSafariChromeFirefoxInternet Explorer

Exemples

Entrez le moment de la définition du contrôle est utilisé (sans fuseau horaire):

选择时间: <input type="time" name="usr_time">

Essayez »


Type d'entrée: url

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définit des champs de saisie de l'URL:

添加你的主页: <input type="url" name="homepage">

Essayez »

Astuce: iPhone navigateur Safari reconnaîtra le type d'entrée url, puis changer le clavier de l' écran tactile pour s'y adapter (ajouter l' option .com).


Type d'entrée: semaine

OperaSafariChromeFirefoxInternet Explorer

Exemples

Définition de la semaine et le contrôle de l'année (sans fuseau horaire):

选择周: <input type="week" name="week_year">

Essayez »


HTML entrée Tag Référence HTML balise <input>