Tipos de entradas (inputs) en html

En esta entrada tratare de explicar los tipos de entrada el elemento input

para el elemento input tenemos las seguientes entradas:

• button
• checkbox
• color
• date
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• yext
• time
• url
• week

Sintaxis

<input type="submit">

...

input type="text"

define un campo de entrada de texto de una sola linea

First name:

Last name:

---

input type="password"

define un campo de contraseña :

Username:

Password:

---

input type="submit"

define un botón para enviar datos de formulario a un controlador de formulario

Last name:

---

input type="reset"

define un botón de reinicio que restablecerá todos los valores del formulario a sus valores predeterminados:

Last name:

---

input type="radio"

define un botón de opción

HTML
CSS
JavaScript

---

input type="checkbox"

define una casilla de verificación

I have a bike
I have a car
I have a boat

---

input type="button"

define un botón :

---

input type="color"

se utiliza para campos de entrada que deben contener un color.

Select your favorite color:

---

input type="date"

se utiliza para campos de entrada que deben contener una fecha.

cumpleanos:

tambien se puede usar los atributos min y max para agregar restriciones a las fechas

cumpleanos:

---

input type="datetime-local"

especifica un campo de entrada de fecha y hora, sin zona horaria.

Cumpleanos (date and time):

---

input type="email"

se utiliza para campos de entrada que deben contener una dirección de correo electrónico.

Enter your email:

---

input type="image"

define una imagen como un botón de envío.

---

input type="file"

define un campo de selección de archivos y un botón "Examinar" para cargar archivos.

Select a file:

---

input type="hidden"

define un campo de entrada oculto (no visible para un usuario). especifica un campo de entrada de fecha y hora, sin zona horaria.

First name:

---

input type="month"

permite al usuario seleccionar un mes y un año.

Birthday (month and year):

---

input type="number"

define un campo numerico

Quantity (between 1 and 5):

---

input type="range"

define un control para ingresar un número cuyo valor exacto no es importante (0-100)

Volume (between 0 and 50):

---

input type="search"

se utiliza para los campos de búsqueda

Search Google:

---

input type="tel"

se utiliza para campos de entrada que deben contener un número de teléfono.

Enter your phone number:

---

input type="time"

permite al usuario seleccionar una hora (sin zona horaria).

Select a time:

---

input type="url"

se utiliza para campos de entrada que deben contener una dirección URL.

Add your homepage:

---

input type="week"

permite al usuario seleccionar una semana y un año.

Select a week:

---

Ir al indice