Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Leonardo Yáñez-Tarea1 PWII

    Cargado por

    LEO YAÑEZ MELO
    9 vistas7 páginas

    Título original

    Leonardo_Yáñez-Tarea1_PWII

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    9 vistas7 páginas

    Leonardo Yáñez-Tarea1 PWII

    Cargado por

    LEO YAÑEZ MELO

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 7

    Diseños de Formularios

    Leonardo Esteban Yáñez Melo

    Programación Web II (HTML)

    Instituto IACC

    20 de junio de 2020
    Desarrollo

    INSTRUCCIONES: Imagínese que usted pertenece al departamento de informática de una


    compañía de análisis de mercado denominada MERANA, y en la que fue asignado a un nuevo
    proyecto donde requieren realizar una encuesta online para valorar la calidad del servicio
    recibido por los usuarios del Metro.
    Para ello se le requirió que creara un formulario donde se le solicitarán los siguientes datos a
    cada uno de los encuestados:
     RUT: para evitar que una misma persona llene la encuesta varias veces, se deberá incluir
    un campo para colocar el RUT del usuario. Este campo deberá ser validado para
    confirmar que tiene el formato correcto. Para asegurar la confidencialidad de la
    información, dicho campo no será almacenado junto con el resto de la encuesta, sino que
    solo será utilizado para su validación.

     Edad: este campo deberá aceptar solo números entre 10 y 120, por lo que se deberán
    hacer las validaciones y limitaciones correspondientes.

     Género: servirá para identificar si la persona que realizó la encuesta es hombre o mujer,
    para que de esta forma se pueda hacer un mejor análisis de los datos recopilados.

     Frecuencia con la que usa el servicio: este campo deberá permitir al usuario seleccionar
    entre nunca, con poca frecuencia, regularmente y todo el tiempo.

     Horario en el que usa el servicio regularmente: este campo deberá permitir al usuario
    seleccionar entre horario punta, horario medio y horario valle.

     Líneas de Metro que normalmente utiliza: este campo deberá permitir al usuario
    seleccionar entre las diferentes líneas de Metro, posibilitando a su vez seleccionar varias
    líneas simultáneamente en caso de que acostumbre utilizar más de una.

     Calidad general del servicio: este campo deberá permitir al usuario seleccionar entre
    malo, deficiente, regular, bueno y excelente.

     Observaciones personales: este campo permitirá al usuario colocar un breve comentario


    de no más de 200 letras sobre su apreciación respecto del servicio.

    El formulario resultante, a pesar de no estar totalmente operativo, deberá contener todos los
    elementos requeridos. Se deberá entregar un documento HTML con el código asociado, el cual
    deberá estar bien documentado por medio de la utilización de comentarios.
    Se entrega el código del formulario y su respectiva vista final.

    <html>
    <head>
    <meta charset="UTF-8">
    <tittle></tittle>
    </head>
    <h2 style="text-align:center";> Formulario de Contacto</h2>

    <body style="background-color:#E1C699;"><!--las alineaciones se harán para todo el


    formulario de forma central -->

    <form action="contacto.php" method="post">


    <p style="text-align:center";><b>NOMBRE:</b><input type="text" name="nombre"
    max="50"></p>
    <p style="text-align:center";><label for="_rut"><b>RUT</b></label>
    <input type="text" name="rut" id="_rut"
    title="Favor type the RUT like 11.111.111-1"
    placeholder="11.111.111-1"
    pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9kK]"/></p>
    <p style="text-align:center";><b>EDAD:</b>
    <input type="number" name="edad" min="10" max="120"></p>

    <p style="text-align:center";><b>Género</b><br><!--se utiliza tipo radio para darle la fotma


    circular al botón a elegir -->

    <input type="radio" name="hombre" value="h"> Masculino


    <input type="radio" name="mujer" value="m"> Femenino
    </p>

    <p style="text-align:center";><b>Frecuencia uso del servicio de Metro</b><br><!--se utiliza


    tipo radio para darle la fotma circular al botón a elegir -->

    <input type="radio" name="1" value="h"> Todo el tiempo<br>


    <input type="radio" name="2" value="m"> Regularmentemente<br>
    <input type="radio" name="3" value="h"> Poca Frecuencia<br>
    <input type="radio" name="4" value="m"> Nunca
    </p>

    <p style="text-align:center";><b>Horario que utiliza el metro</b><br><!--se utiliza tipo radio


    para darle la fotma circular al botón a elegir -->

    <input type="radio" name="1" value="h"> Horario Punta<br>


    <input type="radio" name="2" value="m"> Horario Medio<br>
    <input type="radio" name="3" value="h"> Horario Valle<br>
    </p>
    <p style="text-align:center";><label><b>Líneas de Metro que utiliza:</b></label></p>
    <p style="text-align:center";><input type="checkbox" id="Línea 1" value="Línea 1"
    name="metro">
    <!--se utiliza checkbox como forma para la elección de más de una opción -->

    <label for="Línea 1">Línea 1</label><br>


    <input type="checkbox" id="Línea 2" value="Línea 2"
    name="metro">
    <label for="Línea 2">Línea 2</label><br>
    <input type="checkbox" id="Línea 3" value="Línea 3"
    name="metro">
    <label for="Línea 3">Línea 3</label><br>
    <input type="checkbox" id="Línea 4" value="Línea 4"
    name="metro">
    <label for="Línea 4">Línea 4</label><br>
    <input type="checkbox" id="Línea 5" value="Línea 5"
    name="metro">
    <label for="Línea 5">Línea 5</label><br>
    <input type="checkbox" id="Línea 6" value="Línea 6"
    name="metro">
    <label for="Línea 6">Línea 6</label></p>

    <p style="text-align:center";><label><b>Calidad de Servicio:</b></label></p><!--para este


    caso se utiliza la etiqueta SELECT, con el propósito de crear una caja de opciones diversas en las
    que elegir, estas opciones se entregan a través de la etiqueta OPTION -->

    <p style="text-align:center";><select>Evalúe la calidad del servicio de metro:


    <option selected="">--</option>
    <option>Malo</option>
    <option>Deficiente</option>
    <option>Regular</option>
    <option>Bueno</option>
    <option>Excelente</option>
    </p></select><br>

    </p>
    <p style="text-align:center";>
    <label for="_desc"><b>Observaciones</b></label><br><!--En el espacio de las observaciones
    se utiliza un textarea con un límite de 200 caracteres -->

    <textarea name="desc" id="_desc" maxlength="200"


    rows="6">
    Escriba aquí sus comentarios.
    </textarea>

    <p style="text-align:center";>
    <input type="submit" value="Enviar">
    <input type="reset" value="Borrar">
    </p>
    </p>

    </form>
    </body>
    Bibliografía

    Instituto Profesional IACC 2020. Programación Web II HTML. Diseños de Formularios.

    También podría gustarte