Lección 12. Inputs y tipos de inputs. 
Los inputs son los campos donde el usuario puede interactuar para poder ingresar los datos.
La sintaxis de una etiqueta input es la siguiente:
<input type="">
Atributo type._
Siempre la etiqueta input va acompañada de su atributo type, el cual define el tipo de dato valido a ingresar por el usuario en el campo.
Existen diferentes tipos de valores para este atributo:
text -> Campo de texto común para escribir cualquier cadena.
number -> Permite escribir únicamente números; incluye controles de aumentar/disminuir.
tel -> Campo para números telefónicos (no valida, solo adapta el teclado en móviles).
password -> Oculta el texto con puntos o asteriscos.
email -> Requiere un formato de correo electrónico válido.
color -> Despliega un selector de colores.
range -> Crea un control tipo deslizador con valores mínimo y máximo.
date -> Selector de fecha (día, mes y año).
time -> Selector de horas y minutos.
datetime-local -> Selector de fecha y hora local combinados.
file -> Permite seleccionar archivos desde el dispositivo.
radio -> Opción única dentro de un grupo (solo uno puede estar activo).
checkbox -> Permite seleccionar varias opciones independientes.
reset -> Reinicia todos los campos del formulario a su estado inicial.
submit -> Envía el formulario.
button -> Botón genérico que no realiza acción por defecto.
Estas etiquetas son de tipo En linea (inline).
Input text._
La etiqueta de tipo text permite el ingreso de texto, incluyendo letras, números y caracteres especiales.
La sintaxis es:
<input type="text">Input number._
Dentro de este tipo de campo number. solo se permite el ingreso de números.
La sintaxis es:
<input type="number">Input tel._
Este tipo de etiqueta tel permite el ingreso de texto, incluyendo letras, números y caracteres especiales.
Es similar al text, pero tiene una semántica respecto a datos del usuario para telefono o celular.
Su sintaxis:
<input type="tel">Input password._
Con contexto a su nombre, se utiliza para contraseñas. ocultando el contenido de este campo.
Su sintaxis:
<input type="password">Nota: Dependiendo del browser en ocasiones este campo mostrara un botón extra para poder visualizar y ocultar el contenido de la contraseña.
Input email._
Este campo email permite el ingreso de cadenas de texto con expresión de correo electrónico.
Su sintaxis es la siguiente:
<input type="email">Nota: Si esta expresión regular no se cumple, el formulario NO se enviara hasta cumplirse en el campo.
Input color._
Esta etiqueta permite visualizar una paleta de colores, donde el usuario podra elegir un tono de color.
Su sintaxis:
<input type="color">Input range._
El tipo range permite elegir un numero con base a la visualización de una barra de rango.
Nota: La etiqueta rangetiene otros 2 atributos extra, para poder definir este rango.
Un ejemplo de su sintaxis, con un rango de 0-100:
<input type="range" min="0" max="100">Input date._
Esta etiqueta date permite el ingreso a su campo datos de tipo fecha.
Dentro de este campo se muestra un calendario para ayudar al cliente.
El formato del valor es:
mm/dd/yy (mes/dia/año)
Su sintaxis es la siguiente:
<input type="date">Input time._
muy similar al date, pero su diferencia es que time recibe dato de tipo tiempo o hora:
Con un formato:
hh:mm:PM (horas:minutos:rango)
Su sintaxis es:
<input type="time">Input datetime-local._
La etiqueta atetime-local es la unión de date y time en uno.
con un formato:
mm/dd/yy, hh:mm:PM
Su sintaxis es:
<input type="datetime-local">Input file._
Permite el ingreso de archivos, independientemente de su extensión.
Nota: Es IMPORTANTE para la seguridad controlar el tipo de archivos aceptados, para ello, la etiqueta tiene un atributo especial, accept. Aun así, es importante, validar esta seguridad de otras diferentes formas.
Su sintaxis es la siguiente, configurando que acepte únicamente, .pdf:
<input type="file" accept=".pdf">Nota: Para que estos tipos de inputs funcionen, es necesario colocar a nuestra etiqueta form el siguiente atributo:
enctype="multipart/form-data"Que permitirá leer y procesar archivos file.
Input radio._
Este input es diferente a los anteriores, ya que NO es un campo de texto donde el usuario coloca texto.
Un input radio es un botón boolean el cual puede activarse o desactivarse.
La sintaxis es la siguiente:
<input type="radio" value="1">Nota: Al no ser un campo de texto este tipo de input debe contener el atributo value con el valor que desea tener el input activado, a pesar de no estar visible, este valor se envía cuando se haga el envio (submit).
Este tipo de input suele ser usado cuando solo se puede elegir una opcion, por lo que para ello, debemos colocarles un atributo si tenemos varios radio.
El atributo clave es name:
Supongamos que tenemos 3 radio pero solo uno debe poder elegirse, para ello, damos el mismo valor en el atributo name a los 3.
<input type="radio" value="1" name="nombre">
<input type="radio" value="2" name="nombre">
<input type="radio" value="3" name="nombre">De este modo, al seleccionar uno, si ya esta seleccionado otro, se desactivará.
Input checkbox._
Es muy similar a un input radio, pero este se usa, cuando podemos elegir varias opciones de una lista de ellas.
Al igual, NO es un campo de texto, por lo que debe contener su atributo value, el cual se mandara, si se encuentra seleccionado.
Su sintaxis es:
<input type="checkbox">Input reset._
Este tipo de input, NO es un campo de texto, es un botón, pero tiene una configuración de funcionamiento redefinido.
Su función es resetear un formulario al hacer click en él.
Para ello, la sintaxis es la siguiente:
<input type="reset">Por defecto, este input/botón tiene un texto, pero, podemos cambiarlo con el atributo value.
<input type="reset" value="Limpiar">Nota: No olvidemos colocar este input dentro de la etiqueta form, al igual a los otros inputs que serán afectados.
Input submit._
Igual a resert, el input de tipo submit es un botón, pero con una configuración predeterminada.
Su función es enviar los datos del formulario.
Su sintaxis es:
<input type="submit">Al igual, que al input anterior, este necesita estar dentro de la etiqueta form para activarse, y todos los otros inputs que desean enviarse sus values.
Y al igual, podemos cambiar el texto por defecto.
Input button._
Un input button es un simple boton, a diferencia de reset y submit, este NO tiene una configuración predefinida, por lo que es util para configuraciones personalizadas.
Su sintaxis es:
<input type="button" value="Botón">Nota: Este input no tiene un texto definido, por lo que es necesario colocarle un valor al value: