TODOS los tipos de INPUT para FORMULARIOS en HTML

Input type text

Define un campo de una sola línea de texto.

See the Pen HTML | 2.3 - Tipos de input - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type password

Define un campo para contraseñas.

See the Pen HTML | 2.3 - Tipos de input - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type submit

Define un botón para enviar los datos del formulario

See the Pen HTML | 2.3 - Tipos de input - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type reset

Define un botón para resetear todos los valores del formulario a los valores por defecto

See the Pen HTML | 2.3 - Tipos de input - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type radio

Define un radio button, que te permite seleccionar UNA opción entre varias.

See the Pen HTML | 2.3 - Tipos de input - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type checkbox

Define un checkbox. Nos permite seleccionar ninguna o varias opciones.

See the Pen HTML | 2.3 - Tipos de input - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type button

Define un botón.

See the Pen HTML | 2.3 - Tipos de input - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

HTML5 input types

En HTML5 se añadieron varios tipos nuevos:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Input type color

See the Pen HTML | 2.3 - Tipos de input - 8 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type date

Se usa para seleccionar fechas

See the Pen HTML | 2.3 - Tipos de input - 9 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 Se puede añadir los atributos min y max para restringir la selección.

See the Pen HTML | 2.3 - Tipos de input - 10 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type datetime-local

Se usa para una fecha y hora sin tener en cuenta la zona horaria.

See the Pen HTML | 2.3 - Tipos de input - 11 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type email

Para contener direcciones de correo electrónico.

See the Pen HTML | 2.3 - Tipos de input - 12 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type file

Define un campo para subir ficheros

See the Pen HTML | 2.3 - Tipos de input - 13 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type month

Permite seleccionar mes y año.

See the Pen HTML | 2.3 - Tipos de input - 14 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type number

Sirve para valores numéricos. Se puede restringir los números aceptados usando algunos atributos.

See the Pen HTML | 2.3 - Tipos de input - 15 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Restricciones de los inputs

  • checked: Especifica si un input de tipo checkbox o radio tiene que estar seleccionado por defecto
  • disabled: Especifica si un input debería estar deshabilitado
  • max: Especifica el máximo del valor de un input
  • maxlength: Especifica el número máximo de caracteres
  • min: Especifica el valor mínimo del input
  • pattern: Especifica una expresión regular para chequear el valor del input
  • readonly: Especifica si el input no se puede cambiar
  • required: Especifica si el input es obligatorio de rellenar
  • size: Especifica el ancho (en caracteres) para el input
  • step: Especifica el intervalo para pasar de un valor numérico a otro
  • value: Especifica el valor por defecto del input

See the Pen HTML | 2.3 - Tipos de input - 16 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type range

Proporciona un slider para seleccionar un valor numérico entre dos valores (por defecto de 0 a 100)

See the Pen HTML | 2.3 - Tipos de input - 17 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type search

Se usa para buscadores (se comporta como un input text)

See the Pen HTML | 2.3 - Tipos de input - 18 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type tel

Se usa para números de teléfono

See the Pen HTML | 2.3 - Tipos de input - 19 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type time

Permite seleccionar una hora (sin tener en cuenta la zona horaria)

See the Pen HTML | 2.3 - Tipos de input - 20 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type url

Se usa para rellenar el input con una URL

See the Pen HTML | 2.3 - Tipos de input - 21 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Input type week

Se usa para seleccionar la semana y el año

See the Pen HTML | 2.3 - Tipos de input - 22 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.