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

9/Sep/2018 Curso-html

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í, asi 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 pagina 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

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 codigo de javascript, en este caso no vamos a considerar esa buena práctica, para simplificar este ejemplo.

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 pagina web que va a procesarlos.

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:

Como pueden notar en la primera opción puse la palabra checked, esto hace que esta opción este 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.

Type: file

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

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.

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

Type: number

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

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 aqui hara que solo puedas seleccionar valores de 10 en 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.

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.

Type color – Seleccionar un color 

Videos relacionados

Aquí hay algunos videos que explican algunos de estos tipos



Ir a la barra de herramientas