Curso HTML: Subir imagenes, números, emails, etc



Ahora vamos a aprender cómo capturar imágenes, números, emails y otros tipos de datos en tus formularios web. Todo esto lo haremos con la etiqueta <input> que vimos al inicio de este curso.

Como mencione al inicio del curso, la etiqueta input tiene un atributo llamado type y según el tipo que indiquemos aquí, así será el tipo de dato que capture. Aquí hay una list de los tipos más comunes.

  • text: Para ingresar textos cortos
  • button: Muestra un botón, sobre el que se puede hacer clic y ejecutar una acción
  • submit: Botón para enviar los datos del formulario a la página web que va a procesarlos.
  • radio: Genera un botón de radio.
  • checkbox: Genera un checkbox o casilla de selección
  • file: Muestra un cuadro de texto para seleccionar un archivo dentro de tu computadora.
  • date: Muestra un cuadro de texto para ingresar fechas y un calendario desplegable.
  • email: Muestra un cuadro de texto que solo admite emails.
  • number: Muestra un cuadro de texto que solo admite números
  • range: Muestra un control que permite elegir un número en un rango definido
  • password: Muestra un cuadro de texto que oculta el texto (como esos en donde ingresas tus contraseñas)
  • color: Muestra un control que permite seleccionar un color.

Ahora voy a mostrarte un ejemplo de cada una de estas variantes.

Type: text

Muestra un cuadro de texto en el que el usuario puede ingresar un texto corto (una línea), usualmente le damos un valor al atributo name

<input type="text" name="nombre">

Type: button

Muestra un botón, usualmente se usa el atributo onclick para ejecutar un código de javascript, pero es recomendable mantener al mínimo la mezcla de código html junto a código de javascript, en este caso no vamos a considerar esa buena práctica, para simplificar este ejemplo.

<input type="button" value="Click me" onclick="alert('Hola')">

Type: submit

El tipo submit también genera un botón, la diferencia es que este botón siempre se usa para enviar los datos del formulario a la página web que va a procesarlos.

<input type="submit" value="Guardar">

Type: radio

Este genera una lista de botones de radio o radio buttons, en este tipo de control, el usuario solo puede elegir una opción de entre una lista de posibilidades. Debido a que un formulario puede tener varios grupos de opciones, cada grupo se define utilizando el mismo valor en el atributo name. Luego en el atributo value se coloca el código del valor correspondiente a la opción seleccionada, y luego de la etiqueta input se coloca el valor, veamos ahora un ejemplo:

<input type="radio" name="sexo" value="m" checked> Masculino<br>
<input type="radio" name="sexo" value="f"> Femenino<br>

Como pueden notar en la primera opción puse la palabra checked, esto hace que esta opción esté seleccionada de forma predeterminada, puedes usar o no esta opción, todo depende de si necesitamos proveer de una opción predeterminada.

Type: checkbox

Este tipo de control permite seleccionar cero o más opciones dentro de un pequeño grupo. Se usa de forma muy similar a los botones de radio, pero en este caso, cada uno de las opciones debe de tener su propio nombre en el atributo name, ya que cada opción se trata de forma individual.

<input type="checkbox" name="garantia" value="si"> Garantia extendida<br>
<input type="checkbox" name="envio_gratis" value="si"> Envio gratis

Type: file

Este tipo se usa para subir archivos desde tu computadora, al servidor, solo se necesita definir el atributo name.

Seleccionar archivo: <input type="file" name="miArchivo">

El código anterior genera un botón, al presionar sobre él, se muestra una ventana en la que puedes buscar y seleccionar el archivo que deseas subir. 

Input = file, ejemplo

Type: date

Con este control se puede capturar una fecha y en navegadores como chrome, se mostrará un calendario desplegable automáticamente, para que sea más fácil seleccionar e ingresar las fechas.

<label>Fecha de nacimiento</label>
<input type="date" name="fec_nac">
type=date, muestra también un calendario desplegable

Type: email

Con este tipo de entrada, se puede capturar emails, y en navegadores como chrome, se hará una validación automática que solo permite ingresar emails que sean válidos en su estructura. Adicionalmente si la pagina es vista en un celular, el teclado cambiará y mostrará un botón para agregar la terminación .com

<label>email</label>
<input type="email" name="email">

Type: number

Con este tipo, el cuadro de texto va a permitir el ingreso de únicamente números enteros (sin decimales) y adicionalmente el teclado cambiará a teclado numérico cuando es visto en celulares.

<label>Cantidad</label>
<input type="number" name="cantidad">

Type: range

Muestra un control tipo “slider”, para seleccionar un valor en un rango, el rango se define con los atributos min y max, también puedes definir un valor para incrementos con el atributo step, por ejemplo un valor de 10 aquí hará que solo puedas seleccionar valores de 10 en 10.

<label>% de avance</label>
<input type="range" name="points" min="0" max="100" value="0" step=10>
Ejemplo type=range

Type: password

Este tipo permite ingresar un texto, pero lo oculta mostrando esos puntos que miras en las pantallas en donde te piden ingresar tu clave.

<label>Clave</label>
<input type="password" name="clave">

Type: color

Este tipo no es muy común, pero se usa en esas pantallas que te permite personalizar tu sitio cambiando los colores de letra, fondo, etc.

<label>Seleccione un color</label>
<input type="color" name="color_perfil">
Type color – Seleccionar un color 

Videos relacionados

Aquí hay algunos videos que explican algunos de estos tipos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *