Latest web development tutorials

atributos de tipo de entrada HTML

Etiquetas HTML de entrada de referencia etiqueta <input> HTML

Ejemplos

formulario HTML con dos tipos diferentes de entrada, texto y presentar:

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

Trate »
(Vea la parte inferior de esta página para más ejemplos)

Soporte para el navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Todos los principales navegadores soportan el atributo tipo. Sin embargo, no todos los navegadores soportan todos los diferentes tipos de entrada pueden trabajar en todos los navegadores.

Véase más abajo para cada tipo de entrada del soporte de los navegadores.


Definición y Uso

<Entrada> tipo de atributo especifica el tipo de elemento que desea visualizar.

El tipo predeterminado es: texto.

Nota: No se requiere este atributo, pero creemos que siempre hay que utilizarlo.


Diferencias entre HTML 4.01 y HTML5

Los siguientes tipos de entrada son nuevos en el tipo de HTML5: color, fecha, fecha y hora, fecha y hora local, mes, semana, hora, correo electrónico, número, gama, búsqueda, tel y url.


gramática

<input type="value">

propiedad Valor

描述
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 控件(不带时区)。


Ejemplos

Tipo de entrada: Botón

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definición de los botones puede hacer clic, cuando el usuario hace clic en un botón para iniciar un período de JavaScript:

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

Trate »


Tipo de entrada: casilla de verificación

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Box permite al usuario seleccionar una o más opciones en una serie de opciones:

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

Trate »


Tipo de entrada: Color

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Elija un color en el selector de color:

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

Trate »


Tipo de entrada: Fecha

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

controles de fecha definidas:

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

Trate »


Tipo de entrada: fecha y hora

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definir los controles de fecha y hora (zona horaria) con:

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

Trate »


Tipo de entrada: fecha y hora local

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definir los controles de fecha y hora (sin zona horaria):

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

Trate »


Tipo de entrada: correo electrónico

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definiciones de campo para la dirección de correo electrónico (cuando el formulario se envía automáticamente al valor del campo de correo electrónico para verificar):

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

Trate »

Consejo: el navegador Safari del iPhonereconocerá el tipo de entrada de correo electrónico, a continuación, cambiar el teclado de pantalla táctil para adaptarse a él (añada @ .com y opciones).


Tipo de entrada: archivo

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Para definir el campo de selección de archivos y un botón "Examinar ...", para la carga de archivos:

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

Trate »


Tipo de entrada: oculto

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definición de los campos ocultos, campos ocultos no son visibles para el usuario. Los campos ocultos suelen almacenar un valor por defecto, o cambian sus valores por el JavaScript:

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

Trate »


Tipo de entrada: Imagen

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

imagen personalizada como el botón de envío:

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

Trate »


Tipo de entrada: el mes

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definir el control de mes y el año (sin zona horaria):

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

Trate »


Tipo de entrada: Número

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Introduzca un número para definir los campos para (se pueden establecer los números de límites aceptables):

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

Trate »

Por favor utilice los siguientes atributos para especificar las restricciones:

  • MAX - el máximo permitido por la normativa.
  • min - el mínimo permitido por las regulaciones.
  • PASO - requisitos para el intervalo digital legal.
  • El valor - por defecto especificado.

Tipo de entrada: contraseña

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definir campos de contraseña (campos de contraseña son personajes enmascarados):

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

Trate »


Tipo de entrada: Radio

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Permite al usuario seleccionar una opción en una serie de opciones:

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

Trate »


Tipo de entrada: gama

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Se define el valor exacto no es importante el control de entrada digital (como controles deslizantes). También puede establecer límites aceptables números:

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

Trate »

Por favor utilice los siguientes atributos para especificar las restricciones:

  • MAX - el máximo permitido por la normativa.
  • min - el mínimo permitido por las regulaciones.
  • PASO - requisitos para el intervalo digital legal.
  • El valor - por defecto especificado.

Tipo de entrada: restablecer

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definir el botón de reinicio (reset todo el formulario es el valor por defecto):

<input type="reset">

Trate »

Consejo: Tenga cuidado al usar el botón de reinicio!Para los usuarios, accidentalmente hizo clic en el botón Reset es una cosa muy molesto.


Tipo de entrada: buscar

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

campo de búsqueda definido (por ejemplo, la búsqueda del sitio o de búsqueda de Google, etc.):

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

Trate »


Tipo de entrada: enviar

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definir el botón de envío:

<input type="submit">

Trate »


Tipo de entrada: tel

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

campos definidos para introducir números de teléfono:

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

Trate »


Tipo de entrada: texto

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

El usuario puede definir dos a entrar en una sola línea de texto en un campo de texto:

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

Trate »


Tipo de entrada: el tiempo

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Introduzca la hora de la definición de control se utiliza (sin zona horaria):

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

Trate »


Tipo de entrada: url

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Define los campos de entrada de la URL:

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

Trate »

Consejo: el navegador Safari del iPhonereconocerá el tipo de entrada de URL, a continuación, cambiar el teclado de pantalla táctil para adaptarse a él (.com opción de añadir).


Tipo de entrada: la semana

OperaSafariChromeFirefoxInternet Explorer

Ejemplos

Definición de la semana y el control de año (sin zona horaria):

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

Trate »


Etiquetas HTML de entrada de referencia etiqueta <input> HTML