Title: Actividad 4: Formulario HTML5 + página receptora
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

Objetivo
Crear un formulario en HTML5 usando distintos tipos de input, además de etiquetas como textarea, select y button, y enviar la información a otra página HTML que la reciba y la muestre.

Instrucciones

1. Identificación (comentario en el código)
Al inicio de ambos archivos, agrega un comentario con tu nombre completo y el nombre del profesor.

<!-- Alumno: [Tu nombre] | Profesor: [Nombre del profesor] -->


2. Archivos necesarios (2 páginas)
  - actividad4_form.html → contiene el formulario.
  - actividad4_resultado.html → recibe los datos y los muestra.
3. Página 1 – Formulario (actividad4_form.html)
  - Todo debe estar dentro de <html>...</html>.
  - En <head> coloca el <title> con el nombre “Formulario de prueba”.
  - En <body> agrega al inicio un encabezado <h1> que diga Formulario de prueba.
  - Crea un <form> con method="GET" y action="actividad4_resultado.html".
Antes de definir los campos, observa estos ejemplos básicos de las etiquetas que usaremos:
  - Input de texto:

<input type="text" placeholder="Escribe algo aquí">


  - Radio (selección única):

<input type="radio" name="opcion" value="A"> Opción A
<input type="radio" name="opcion" value="B"> Opción B


  - Select (lista desplegable):

<select>
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>


  - Textarea (área de texto):

<textarea rows="3" cols="30"></textarea>


  - Botones:

<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>


Ahora sí, incluye estos campos (con su atributo name):
  - text → name="nombre" (Nombre completo)
  - email → name="correo"
  - password → name="password"
  - number → name="edad" (con min y max)
  - date → name="fecha"
  - color → name="colorFavorito"
  - range → name="satisfaccion" (0–10)
  - Radio → name="turno" (valores: matutino, vespertino)
  - Checkbox → name="intereses" (valores: web, datos, móvil)
  - Select → name="carrera" (opciones: Informática, Sistemas, Otro)
  - Textarea → name="comentarios"
  - Botones → type="submit" (Enviar) y type="reset" (Limpiar)
4. Página 2 – Receptora (actividad4_resultado.html)
  - En <head> usa <title>Resultados del formulario</title>.
  - En <body> coloca un <h1> con el título Resultados del formulario.
  - Debe mostrar los datos enviados en una tabla.
  - Usa este bloque de JavaScript para procesar los parámetros:

<script>
  const params = new URLSearchParams(window.location.search);
  function getAll(name) { return params.getAll(name); }
  const datos = {
    nombre: params.get('nombre'),
    correo: params.get('correo'),
    password: params.get('password'),
    edad: params.get('edad'),
    fecha: params.get('fecha'),
    colorFavorito: params.get('colorFavorito'),
    satisfaccion: params.get('satisfaccion'),
    turno: params.get('turno'),
    intereses: getAll('intereses').join(', '),
    carrera: params.get('carrera'),
    comentarios: params.get('comentarios')
  };
  const contenedor = document.getElementById('resultado');
  if (contenedor) {
    contenedor.innerHTML = `
      <h2>Datos recibidos</h2>
      <table border="1" cellpadding="6">
        ${Object.entries(datos).map(([k,v]) => `
          <tr>
            <th>${k}</th>
            <td>${v ?? ''}</td>
          </tr>`).join('')}
      </table>
    `;
  }
</script>


  - Dentro del <body> agrega un contenedor vacío donde se insertará la tabla:

<div id="resultado"></div>


5. Evidencia obligatoria
  - Captura del código en VS Code (ambos archivos).
  - Captura del formulario funcionando y del resultado mostrado en la segunda página.

Método de entrega
Convierte todo en un archivo PDF y súbelo a la plataforma.

Objetivo
Crear un formulario en HTML5 usando distintos tipos de input, además de etiquetas como textarea, select y button, y enviar la información a otra página HTML que la reciba y la muestre.

Instrucciones

1. Identificación (comentario en el código)
Al inicio de ambos archivos, agrega un comentario con tu nombre completo y el nombre del profesor.

<!-- Alumno: [Tu nombre] | Profesor: [Nombre del profesor] -->


2. Archivos necesarios (2 páginas)
  - actividad4_form.html → contiene el formulario.
  - actividad4_resultado.html → recibe los datos y los muestra.
3. Página 1 – Formulario (actividad4_form.html)
  - Todo debe estar dentro de <html>...</html>.
  - En <head> coloca el <title> con el nombre “Formulario de prueba”.
  - En <body> agrega al inicio un encabezado <h1> que diga Formulario de prueba.
  - Crea un <form> con method="GET" y action="actividad4_resultado.html".
Antes de definir los campos, observa estos ejemplos básicos de las etiquetas que usaremos:
  - Input de texto:

<input type="text" placeholder="Escribe algo aquí">


  - Radio (selección única):

<input type="radio" name="opcion" value="A"> Opción A
<input type="radio" name="opcion" value="B"> Opción B


  - Select (lista desplegable):

<select>
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>


  - Textarea (área de texto):

<textarea rows="3" cols="30"></textarea>


  - Botones:

<button type="submit">Enviar</button>
<button type="reset">Limpiar</button>


Ahora sí, incluye estos campos (con su atributo name):
  - text → name="nombre" (Nombre completo)
  - email → name="correo"
  - password → name="password"
  - number → name="edad" (con min y max)
  - date → name="fecha"
  - color → name="colorFavorito"
  - range → name="satisfaccion" (0–10)
  - Radio → name="turno" (valores: matutino, vespertino)
  - Checkbox → name="intereses" (valores: web, datos, móvil)
  - Select → name="carrera" (opciones: Informática, Sistemas, Otro)
  - Textarea → name="comentarios"
  - Botones → type="submit" (Enviar) y type="reset" (Limpiar)
4. Página 2 – Receptora (actividad4_resultado.html)
  - En <head> usa <title>Resultados del formulario</title>.
  - En <body> coloca un <h1> con el título Resultados del formulario.
  - Debe mostrar los datos enviados en una tabla.
  - Usa este bloque de JavaScript para procesar los parámetros:

<script>
  const params = new URLSearchParams(window.location.search);
  function getAll(name) { return params.getAll(name); }
  const datos = {
    nombre: params.get('nombre'),
    correo: params.get('correo'),
    password: params.get('password'),
    edad: params.get('edad'),
    fecha: params.get('fecha'),
    colorFavorito: params.get('colorFavorito'),
    satisfaccion: params.get('satisfaccion'),
    turno: params.get('turno'),
    intereses: getAll('intereses').join(', '),
    carrera: params.get('carrera'),
    comentarios: params.get('comentarios')
  };
  const contenedor = document.getElementById('resultado');
  if (contenedor) {
    contenedor.innerHTML = `
      <h2>Datos recibidos</h2>
      <table border="1" cellpadding="6">
        ${Object.entries(datos).map(([k,v]) => `
          <tr>
            <th>${k}</th>
            <td>${v ?? ''}</td>
          </tr>`).join('')}
      </table>
    `;
  }
</script>


  - Dentro del <body> agrega un contenedor vacío donde se insertará la tabla:

<div id="resultado"></div>


5. Evidencia obligatoria
  - Captura del código en VS Code (ambos archivos).
  - Captura del formulario funcionando y del resultado mostrado en la segunda página.

Método de entrega
Convierte todo en un archivo PDF y súbelo a la plataforma.