Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • JMarcelo Cornejo Tarea1

    Cargado por

    Alvaro Figueroa
    10 vistas7 páginas

    Título original

    JMarcelo_Cornejo_tarea1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    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 PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    10 vistas7 páginas

    JMarcelo Cornejo Tarea1

    Cargado por

    Alvaro Figueroa

    Copyright:

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

    Tarea 1

    J.Marcelo Cornejo Ardiles

    Programación HTML II

    Instituto IACC

    Junio 22 de 2020
    INSTRUCCIONES

    La compañía de análisis de mercado llamada MERANA fue asignada a un nuevo proyecto donde
    requieren realizar una encuesta online para indagar respecto de la calidad del servicio recibido
    por los usuarios del Metro.
    Para ello, se le solicita que diseñe la estructura general del formulario que será utilizado para tal
    efecto. Concretamente deberá generar un documento donde se indiquen qué tipos de elementos
    serían adecuados para cada información requerida como parte de la encuesta, incluyendo una
    fundamentación del por qué se realizó la elección propuesta en su informe de entrega.
    Los campos que se deberían contemplar en dicho formulario serían:
    RUT: para evitar que una misma persona llene la encuesta más de una vez se debe incluir un
    campo para colocar el RUT del usuario. Este campo debe 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 la 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 debe permitir al usuario seleccionar entre
    nunca, con poca frecuencia, regularmente y todo el tiempo.
    Horario en el que usa el servicio regularmente: este campo debe permitir al usuario
    seleccionar entre horario punta, horario medio y horario valle.
    Líneas de Metro que normalmente utiliza: este campo debe 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 debe 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.

    Directivas generales que deberán ser utilizadas para la creación del mismo en las cuales se debe
    detallar:
    Estructura general del formulario, incluyendo la distribución de los campos en el mismo y el
    método de envío de los datos al servidor más adecuado, considerando el tipo de datos que debe
    ser enviado.
    Detalle del tipo de elementos que deberán ser utilizados para solicitar cada uno de los datos
    requeridos (cuadros de texto, botones de radio, casillas de verificación, etc.).
    Detallar el mecanismo que deberá ser utilizado para realizar la validación de cada uno de los
    datos requeridos.
    DESARROLLO

    Código HTML

    <html>
    <head>
    <meta charset="UTF-8">
    </head>

    <h2>Encuesta Online Calidad de Servicio Metro de Santiago</h2>

    <p><b>POR FAVOR COMPLETE CON SUS DATOS Y RESPONDA LAS SIGUIENTES PREGUNTAS</b></p>

    <!-- Se define metodo para el formulario como POST -->


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

    <!-- Solicitud de RUT con validación de formato usando PATTERN -->


    <p><label for="_rut"><b>Rut&nbsp&nbsp&nbsp&nbsp:</b></label>
    <input type="text" name="rut" id="_rut" title="Ingrese RUT con formato 11.111.111-1" placeholder="11.111.111-
    1" pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9Kk]">
    </p>

    <!-- Solicitud de Edad con validación de valor mínimo y máximo -->


    <p><b>Edad&nbsp:</b>
    <input type="number" name="edad" min="10" max="120" title="Edad min.10 máx.120">
    </p>

    <!-- Solicitud de Genero mediante uso de botones Radio, selección única -->
    <p><b>Genero:</b><br>
    <input type="radio" id="g_m" value="Masculino" name="genero" checked> <label for="g_m">Hombre</label>
    <input type="radio" id="g_f" value="Femenino" name="genero"> <label for="g_f">Mujer</label>
    <input type="radio" id="g_f" value="Otro" name="genero"> <label for="g_o">No declara</label>

    <!-- Solicitud de Frecuencia de Uso mediante uso de botones Radio, selección única -->
    <p><b>Frecuencia de uso Servicio Metro</b><br>
    <input type="radio" id="f_1" value="Nunca" name="frecuendia" checked> <label for="f_1">Nunca</label>
    <input type="radio" id="f_2" value="Poco" name="frecuendia"> <label for="f_2">Poco Frecuente</label>
    <input type="radio" id="f_3" value="Regularmente" name="frecuendia"> <label
    for="f_3">Regularmente</label>
    <input type="radio" id="f_4" value="Siempre" name="frecuendia"> <label for="f_4">Todo el
    Tiempo</label>
    </p>

    <!-- Solicitud de Horario de Uso mediante uso de botones Radio, selección única -->
    <p><b>Horario de Uso</b><br>
    <input type="radio" id="h_1" value="Punta" name="hora" checked> <label for="h_1">Hora Punta</label>
    <input type="radio" id="h_2" value="Medio" name="hora"> <label for="h_2">Hora Medio</label>
    <input type="radio" id="h_3" value="Valle" name="hora"> <label for="h_3">Hora Valle</label>
    </p>

    <!-- Selección de Lineas de Metro usadas mediante uso Checkbox, permite más de una selección -->
    <label><b>Líneas de Metro que utiliza:</b></label>
    <br>
    <input type="checkbox" id="Línea 1" value="Línea 1" name="metro">
    <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 4A" value="Línea 4A" name="metro">


    <label for="Línea 4A">Línea 4A</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><br>
    <br>

    <!-- Selección de Calidad de Servicio mediante Select, formato de selección tipo menú dropdown -->
    <label><b>Calidad del Servicio:</b></label>
    <br>
    <select>
    <option selected="">--</option>
    <option>Malo</option>
    <option>Deficiente</option>
    <option>Regular</option>
    <option>Bueno</option>
    <option>Excelente</option>
    </select>

    <br><br>

    <!-- Ingreso de Comentarios Personales en Textarea, se valida máximo de caracteres en 200 -->
    <label><b>Observaciones personales:</b></label>
    <br>
    <textarea name="Observaciones" id="_obs" maxlength="200">Dejenos sus observaciones</textarea>
    <br><br>

    <!-- Botón para envío de formulario con información recopilada -->


    <input type="submit" value="Enviar">

    <p><b>Merana Ltda.</b></p>

    </form>
    </body>
    Capturas de Pantalla

    Vista General

    Campo RUT, con placeholder y pattern implementados.


    placeholder

    pattern
    Campo Edad con placeholder implementado.

    Vista con datos ingresados.

    Archivo HTML

    Tarea_1.html
    Bibliografía

    IACC (2015). Formularios I. Programación HTML II. Semana 1.

    ELEMENTO INPUT (TYPE=RADIO). Obtenido de,


    https://www.htmlquick.com/es/reference/tags/input-
    radio.html#:~:text=El%20elemento%20input%20%2C%20teniendo%20el,valor%20en%
    20el%20atributo%20name%20.

    También podría gustarte