Tutoriales de informática - Abrirllave.com

Abrirllave.com

Ejercicio de HTML - Notificar una incidencia

Supóngase que Ana Sanz Tin es una empleada del departamento de marketing de una empresa y, a través de un formulario web de la intranet de dicha empresa, quiere informar de que la impresora de su departamento ha dejado de funcionar y muestra el siguiente mensaje:

En un navegador web, el formulario tendrá un aspecto similar a:

Visualización del archivo notificar-incidencia.html en Google Chrome, donde se muestra un formulario para comunicar una incidencia.

Escribir el código del archivo "notificar-incidencia.html" teniendo en cuenta que:

Cuando Ana Sanz Tin rellene el formulario, en pantalla se podría ver:

Visualización del archivo notificar-incidencia.html en Google Chrome, donde a través de un formulario se comunica una incidencia en una impersora.

Solución:

"notificar-incidencia.html"

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Notificar incidencia</title>
  </head>
  <body>
    <form action="procesar-incidencia.php" method="post">
      <fieldset>
        <legend>Datos de la incidencia:</legend>
        <label for="nombre_usuario">Usuario: </label>
        <br>
        <input type="text" name="usuario" id="nombre_usuario">
        <br><br>
        <label for="nombre_departamento">Departamento: </label>
        <br>
        <select name="departamento" id="nombre_departamento">
          <option value="informatica">Informática</option>
          <option value="marketing">Marketing</option>
          <option value="ventas">Ventas</option>
        </select>
        <br><br>
        <label for="descripcion_incidencia">Descripción: </label>
        <br>
        <textarea name="incidencia" rows="3" cols="40" id="descripcion_incidencia">Describa la incidencia...</textarea>
        <br><br>
        <label for="clave_usuario">Contraseña: </label>
        <br>
        <input type="password" name="clave" id="clave_usuario">
      </fieldset>
      <fieldset>
        <legend>Botones de reset y envío:</legend>
        <button type="reset">Resetear</button>
        <button type="submit">Enviar</button>
      </fieldset>
    </form>
  </body>
</html>