► TODOS los tipos de INPUT para FORMULARIOS en HTML

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

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.

SÍGUEME:

NEWSLETTER:

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares

View this post on Instagram

A post shared by Memes de Kiko Palomares (@memes_kikopalomares)