Ejemplos de Formularios HTML

Esta página muestra diferentes tipos de formularios y sus elementos.

Formulario con Campo Oculto (Hidden)

Este formulario utiliza un campo oculto para enviar información que no es visible para el usuario pero se envía al servidor.

Explicación:

Los campos ocultos (hidden) son muy utilizados para enviar variables, como nombres de usuario, claves, o información de estado que no necesita ser mostrada al usuario pero es necesaria para el procesamiento del formulario.

En este ejemplo, el campo "oculto" con valor "valor_oculto" se enviará junto con el campo visible cuando se pulse el botón de enviar.

Formulario con Imagen como Botón

Este formulario utiliza una imagen en lugar de un botón tradicional para enviar los datos.

Nota: En un caso real, necesitarías tener una imagen llamada "actividades1.png" en la misma carpeta.

Explicación:

El elemento <input type="image"> permite usar una imagen como botón de envío. Cuando se hace clic en la imagen, se envían las coordenadas X e Y del clic junto con los demás datos del formulario.

En este ejemplo, hemos simulado el comportamiento ya que no tenemos la imagen original.

Formulario de Subida de Archivos

Este formulario permite seleccionar y subir archivos al servidor.

Explicación:

Para subir archivos, es esencial usar enctype="multipart/form-data" en el formulario. Este atributo especifica cómo se codificarán los datos del formulario para su envío.

El código que recibe estos datos (generalmente en PHP, ya que HTML5 no funciona en todos los sistemas) toma los nombres de los campos (file1, file2) para procesar y guardar los archivos en el servidor.

Formulario Complejo con Varios Elementos

Este formulario incluye diferentes tipos de campos: texto, email, selección, radio buttons y área de texto.

¿Explicaciones claras?

Explicación:

Este formulario demuestra el uso de varios elementos de formulario:

  • Campos ocultos para valores predefinidos
  • Campos de texto para información del usuario
  • Campo de email con validación integrada
  • Lista desplegable (select) para opciones múltiples
  • Botones de radio para selección única
  • Área de texto para comentarios extensos

Bajar el archivo de texto con el código completo

Volver