El tipo number es un tipo de input que permite al usuario introducir un número.
Además provee flechas para incrementar o reducir el valor.
<input type="number" />
miarchivo.html
Como ves, no podrás introducir letras en este input, solo números.
El tipo range es un tipo de input que permite al usuario seleccionar un valor de un rango.
<input type="range" />
miarchivo.html
El tipo color es un tipo de input que permite al usuario seleccionar un color.
<input type="color" />
miarchivo.html
Prueba a hacer click en el input y seleccionar un color.
El tipo date es un tipo de input que permite al usuario seleccionar una fecha.
<input type="date" />
miarchivo.html
Prueba a hacer click en el input y seleccionar una fecha.
El tipo time es un tipo de input que permite al usuario seleccionar una hora.
<input type="time" />
miarchivo.html
Prueba a hacer click en el input y seleccionar una hora.
El tipo email es un tipo de input que permite al usuario introducir un email.
<input type="email" />
miarchivo.html
¿Qué tiene de diferente con respecto al de texto?
Que el navegador te pedirá que introduzcas un email válido, y además verás sugerencias de otros emails que hayas introducido anteriormente en otras webs.
El tipo password es un tipo de input que permite al usuario introducir una contraseña.
<input type="password" />
miarchivo.html
¿Qué tiene de diferente con respecto al de texto?
Que los caracteres que introduzcas se mostrarán como *. Haz la prueba tu mismo
El tipo select es un tipo de input que permite al usuario seleccionar una opción de un conjunto de opciones.
<select>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
miarchivo.html
El atributo value de cada opción es el valor que se enviará al servidor cuando se envíe el formulario.
El tipo radio es un tipo de input que permite al usuario seleccionar una opción de un conjunto de opciones.
<input type="radio" value="1" /> Opción 1
<input type="radio" value="2" /> Opción 2
<input type="radio" value="3" /> Opción 3
El atributo value de cada radio es el valor que se enviará al servidor cuando se envíe el formulario.
miarchivo.html
Opción 1 Opción 2 Opción 3
Si te fijas, podrás ver como te deja seleccionar todas las opciones al mismo
tiempo, para evitar esto, debemos agrupar los radios con un mismo nombre
mediante el atributo name.
<input type="radio" name="opcion" value="1" /> Opción 1
<input type="radio" name="opcion" value="2" /> Opción 2
<input type="radio" name="opcion" value="3" /> Opción 3
miarchivo.html
Opción 1
Opción 2
Opción 3
Ahora puedes comprobar como solo podrás seleccionar una única opción a la vez.
El tipo checkbox es un tipo de input que permite al usuario marcar o desmarcar una casilla.
<input type="checkbox" /> Acepto los términos y condiciones
miarchivo.html
Acepto los términos y condiciones
El tipo file es un tipo de input que permite al usuario seleccionar un archivo.
<input type="file" />
miarchivo.html
En el siguiente capítulo verás como mandar los datos de un formulario a un servidor.