¿Qué es un Input?
Cuando hablamos de la etiqueta Input, nos referimos a un campo de entrada de texto, en donde, podremos ingresar datos que no serán útiles para el caso de los formularios. Estos nos ayudan a capturar la información necesaria para luego ser enviada y visualizada en otras etiquetas. Esta etiqueta es de los elementos más importantes de html, debido a la gran variedad de combinaciones que nos puede ofrecer, lo que nos permitirá usarla un muchas ocasiones. Su estructura la definiremos de la siguiente manera:
<input type="text" name="ejemplo" placeholder="Este es un ejemplo">
Algunos de los atributos que comunmente veremos dentro de esta etiqueta son:
- type: nos permite saber el tipo de input que usaremos. Puede ser: text, password, email, tel, date, entre otros.
- id: Nos permite asignarle un identificador único a la etiqueta.
- name: Nos permite asignarle un nombre a la etiqueta. Usualmente se le asigna el mismo valor que id
- value: Nos permite asignarle un valor a la etiqueta, el cual podremos capturar para mostrarlo o guardarlo.
- min: Nos permite definir un valor numérico mínimo.
- max: Nos permite definir un valor numérico máximo.
- minlength: Nos permite definir un valor de texto mínimo.
- maxlength: Nos permite definir un valor texto máximo.
- readonly: Permite que el campo sea solamente de lectura, y no pueda ser modificado.
- required: Nos permite definir que es obligatorio llenar el campo.
Tipos de Inputs
Esta etiqueta nos ofrece un atributo, al cual le podremos dar distintos valores, lo que nos permitirá usar nuestra etiqueta de distintas formas según nuestra necesidad. Dentro de ello podemos encontrar:
- input text: Podemos utilizarlo para escribir cualquier texto en el campo, y se define asi:
<input type="text" value="Campo de texto">
- input number: Nos permite ingresar datos numéricos en el campo, y lo definimos asi:
<input type="number" value="123">
- input email: Permite ingresar datos de tipo correo en el campo, y se define asi:
<input type="email" value="correo@gmail.com">
- input checkbox: Muestra una casilla de verificación que permite seleccionar o deseleccionar valores individuales, y se define asi:
<input type="checkbox">
- input hidden: Nos permite ocultar un campo en el navegador, aunque estará disponible para obtener su dato, pero no se podrá visualizar a primera vista en el navegador. Se define asi:
<input type="hidden" value="Texto oculto">
- input password: Permite ingresar un valor de tipo contraseña, en donde se ocultará para su seguridad. Esta se define asi:
<input type="password" value="clave_oculta">
- input date: Nos permite ingresar valores de tipo fecha, además de mostrarnos un selector para cualquier fecha específica. Se define de la siguiente manera:
<input type="date" value="2024-05-27">
- input month: Al igual que el tipo "date", permite visualizar una fecha, pero en este caso, solamente asigna el valor de año y mes. Se define asi:
<input type="month" value="2024-05">
- input file: De los más importantes, ya que nos permite adjuntar archivos o imágenes, permitiendonos que podamos obtenerlos y subirlos a la web. Este se define asi:
<input type="file">
- input time: Muestra un valor de tiempo en horas y minutos, y se define asi:
<input type="time" value="12:25">
- input submit: Nos permite enviar datos de un formulario a otra página para luego obtenerlos. Esta etiqueta transforma el input a un butón y se define asi:
<input type="submit" value="Submit">
- input range: Habilita un control deslizante de rango entre 0 y 100 en donde se puede ingresar un valor cuyo valor exacto no es importante
<input type="submit" min="0" max="50">