Ejemplo
Un formulario HTML con dos tipos diferentes de entrada; texto y presentar:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo " Más "hacerlo por uno mismo" ejemplos a continuación.
Definición y Uso
El type atributo especifica el tipo de <input> elemento para mostrar.
El tipo predeterminado es: text .
Consejo: Esto no es un atributo necesario, pero creemos que siempre hay que incluirlo.
Soporte para el navegador
| Atributo | |||||
|---|---|---|---|---|---|
| type | Sí | Sí | Sí | Sí | Sí |
Nota: El type atributo funciona en todos los navegadores. Sin embargo, no todos los diferentes tipos de entrada funciona en todos los navegadores.
Vea a continuación para ver el apoyo del navegador para cada tipo de entrada.
Diferencias entre HTML 4.01 y HTML5
HTML5 tiene los siguientes nuevos tipos de entrada: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel , y url .
Sintaxis
<input type="value">
Los valores de atributo
| Valor | Descripción |
|---|---|
| button | Define un botón que se pulse (utilizado sobre todo con un JavaScript para activar una secuencia de comandos) |
| checkbox | Define una casilla de verificación |
| color | Define un selector de color |
| date | Define un control de fecha (año, mes y día (sin tiempo)) |
| datetime | El tipo de entrada de fecha y hora se ha eliminado de la norma HTML. Utilice datetime-local. |
| datetime-local | Define un control de fecha y hora (año, mes, día, hora, minuto, segundo y fracción de segundo (sin zona horaria) |
| Define un campo de una dirección de correo electrónico | |
| file | Define un campo de selección de archivo y un botón "Examinar ..." (para la carga de archivos) |
| hidden | Define un campo de entrada oculto |
| image | Define una imagen como el botón de envío |
| month | Define un control de mes y el año (sin zona horaria) |
| number | Define un campo para introducir un número |
| password | Define un campo de contraseña (caracteres son enmascarados) |
| radio | Define un botón de opción |
| range | Define un control para introducir un número cuyo valor exacto no es importante (como un control deslizante) |
| reset | Define un botón de reinicio (restablece todos los valores del formulario con los valores por defecto) |
| search | Define un campo de texto para introducir una cadena de búsqueda |
| submit | Define un botón de envío |
| tel | Define un campo para introducir un número de teléfono |
| text | Defecto. Define un campo de texto de una sola línea (ancho por defecto es de 20 caracteres) |
| time | Define un control para introducir una hora (sin zona horaria) |
| url | Define un campo para introducir una URL |
| week | Define un control de semana y el año (sin zona horaria) |
Ejemplos
Tipo de entrada: button
Ejemplo
Un botón que se pulse, que activa un JavaScript cuando se hace clic en:
<input type="button" value="Click me" onclick="msg()">
Inténtalo tú mismo " Tipo de entrada: checkbox
Ejemplo
Las casillas de verificación permite que un usuario seleccione una o más opciones de un número limitado de opciones:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Inténtalo tú mismo " Tipo de entrada: color
Ejemplo
Seleccionar un color de un selector de color:
Select your favorite color: <input type="color" name="favcolor"> Inténtalo tú mismo " Tipo de entrada: date
Tipo de entrada: datetime
Ejemplo
Definir un control de fecha y hora (con la zona horaria):
Birthday (date and time): <input type="datetime" name="bdaytime"> Inténtalo tú mismo " El tipo de entrada de fecha y hora se ha eliminado de la norma HTML. Utilice datetime-local.
Tipo de entrada: datetime-local
Ejemplo
Definir una fecha y control de tiempo (sin zona horaria):
Birthday (date and time): <input type="datetime-local" name="bdaytime"> Inténtalo tú mismo " Tipo de entrada: email
Ejemplo
Definir un campo de una dirección de correo electrónico (será validado automáticamente cuando se presente):
E-mail: <input type="email" name="usremail"> Inténtalo tú mismo " Consejo: Safari en el iPhone reconoce el tipo de correo electrónico, y cambia el teclado en pantalla para que coincidan (añade opciones @ y .com).
Tipo de entrada: file
Ejemplo
Definir un campo de selección de archivo y un botón "Examinar ..." (para la carga de archivos):
Select a file: <input type="file" name="img">
Inténtalo tú mismo " Tipo de entrada: hidden
Ejemplo
Definir un campo oculto (no visible para un usuario).
Un campo oculto menudo almacena un valor predeterminado, o puede haber cambiado su valor por un JavaScript:
<input type="hidden" name="country" value="Norway">
Inténtalo tú mismo " Tipo de entrada: image
Ejemplo
Definir una imagen como un botón de envío:
<input type="image" src="img_submit.gif" alt="Submit">
Inténtalo tú mismo " Tipo de entrada: month
Ejemplo
Definir un control de mes y el año (sin zona horaria):
Birthday (month and year): <input type="month" name="bdaymonth"> Inténtalo tú mismo " Tipo de entrada: number
Ejemplo
Definir un campo para introducir un número (También puede establecer restricciones en lo que los números son aceptados):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5"> Inténtalo tú mismo " Utilice los following atributos para especificar las restricciones:
- max - especifica el valor máximo permitido
- min - especifica el valor mínimo permitido
- step - especifica los intervalos de números legales
- value - Especifica el valor por defecto
Tipo de entrada: password
Ejemplo
Definir un campo de contraseña (caracteres se enmascaran)
<input type="password" name="pwd">
Inténtalo tú mismo " Tipo de entrada: radio
Ejemplo
Los botones de radio permiten al usuario seleccionar sólo una de un número limitado de opciones:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
Inténtalo tú mismo " Tipo de entrada: range
Ejemplo
Definir un control para introducir un número cuyo valor exacto no es importante (como un control deslizante). También puede establecer restricciones en lo que se aceptan los números:
<input type="range" name="points" min="0" max="10"> Inténtalo tú mismo " Utilice los following atributos para especificar las restricciones:
- max - especifica el valor máximo permitido
- min - especifica el valor mínimo permitido
- step - especifica los intervalos de números legales
- value - Especifica el valor por defecto
Tipo de entrada: reset
Ejemplo
Definir un botón de reinicio (restablece todos los valores del formulario a sus valores predeterminados):
<input type="reset"> Inténtalo tú mismo " Consejo: Utilice el botón de reinicio con cuidado!Puede ser molesto para los usuarios que activan accidentalmente el botón de reinicio.
Tipo de entrada: search
Ejemplo
Definir un campo de búsqueda (como una búsqueda del sitio, o de búsqueda de Google):
Search Google: <input type="search" name="googlesearch"> Inténtalo tú mismo " Tipo de entrada: submit
Tipo de entrada: tel
Ejemplo
Definir un campo para introducir un número de teléfono:
Telephone: <input type="tel" name="usrtel"> Inténtalo tú mismo " Tipo de entrada: text
Ejemplo
Definir dos campos de texto de una sola línea que un usuario puede introducir texto en:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Inténtalo tú mismo " Tipo de entrada: time
Ejemplo
Definir un control para introducir una hora (sin zona horaria):
Select a time: <input type="time" name="usr_time"> Inténtalo tú mismo " Tipo de entrada: url
Ejemplo
Definir un campo para introducir una URL:
Add your homepage: <input type="url" name="homepage"> Inténtalo tú mismo " Consejo: Safari en el iPhone reconoce el tipo de entrada de URL, y cambia el teclado en pantalla para que coincidan (opción añade .com).
Tipo de entrada: week
Ejemplo
Definir un control de semana y el año (sin zona horaria):
Select a week: <input type="week" name="week_year"> Inténtalo tú mismo "