Eduardo Flores Programacion HTML II

Diseño de Formularios
Eduardo Andrés Flores Sepúlveda
Programación HTML II
Instituto IACC
11 de Noviembre de 2019
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.
Codigo creado en Notepad++
<!DOCTYPE html>
<html>
<body>
<U><h2>Encuesta Online</h2></u>
<form action="http://www.abc.com/next.php" method="get">
<label for="_rut">Rut</label>
<input type="text" name="rut" id="_rut" maxlength="12"
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]"/>
<br><br>
<label for="_edad">Edad</label>
<input type="number" min="10" max="120" id="_edad" name="age">
<br><br>
<label>Genero:</label>
<input type="radio" id="g_m" value="male" name="gender" checked> <label
for="g_m">Hombre</label>
<input type="radio" id="g_f"value="female"name="gender"> <label for="g_f">Mujer</label>
<br><br>
<label for="_frec">Frecuencia del servicio </label> <select id="_frec" name="code">
<option value="nn">Nunca</option>
<option value="cpf">Con poca frecuencia</option>
<option value="rgl">Regularmente</option>
<option value="tlt">Todo el tiempo</option>
</select>
<br><br>
<label for="_Hor">Horario del servicio </label> <select id="_Hor" name="code">
<option value="nn">Horario Punta</option>
<option value="cpf">Horario Medio</option>
<option value="rgl">Horario Valle</option>
</select>
<br><br>
<label>Lineas del Metro a Utilizar</label> <br><br>
<input type="checkbox" id="Linea1" value="Linea1" name="hobby"> <label
for="Linea1">Linea1</label>
<br><br>
<label for="_Cds">Calidad del servicio </label> <select id="_Cds" name="code">
<option value="malo">Malo</option>
<option value="defi">Deficiente</option>
<option value="regu">Regular</option>
<option value="buen">Bueno</option>
<option value="exce">Excelente</option>
</select>
<br><br>
<label for="_desc">Observaciones Personales</label><br>
<textarea name="desc" id="_desc" maxlength="200" rows="5">
Comentarios sobre el servicio </textarea> </form>
</body>
</html>
Print de Pantalla
Bibliografía
- IACC 2019. Programación HTML II. Diseño de formularios. Contenido de la semana 1

Eduardo Flores Programacion HTML II

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Eduardo Flores Programacion HTML II

Încărcat de

Drepturi de autor:

Formate disponibile

Diseño de Formularios

Eduardo Andrés Flores Sepúlveda

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

recibido por los usuarios del Metro.

cada uno de los encuestados:

confirmar que tiene el formato correcto. Para asegurar la confidencialidad de la

solo será utilizado para su validación.

hacer las validaciones y limitaciones correspondientes.

entre nunca, con poca frecuencia, regularmente y todo el tiempo.

seleccionar entre horario punta, horario medio y horario valle.

líneas simultáneamente en caso de que acostumbre utilizar más de una.

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.

Codigo creado en Notepad++

<form action="http://www.abc.com/next.php" method="get">

<input type="text" name="rut" id="_rut" maxlength="12"

title="Favor type the RUT like 11.111.111-1"

<input type="radio" id="g_m" value="male" name="gender" checked> <label

<input type="radio" id="g_f"value="female"name="gender"> <label for="g_f">Mujer</label>

<label for="_frec">Frecuencia del servicio </label> <select id="_frec" name="code">

<option value="cpf">Con poca frecuencia</option>

<option value="tlt">Todo el tiempo</option>

<label for="_Hor">Horario del servicio </label> <select id="_Hor" name="code">

<option value="nn">Horario Punta</option>

<option value="cpf">Horario Medio</option>

<option value="rgl">Horario Valle</option>

<label>Lineas del Metro a Utilizar</label> <br><br>

<input type="checkbox" id="Linea1" value="Linea1" name="hobby"> <label

<input type="checkbox" id="Linea3" value="Linea3" name="hobby"> <label

<input type="checkbox" id="Linea4" value="Linea4" name="hobby"> <label

<input type="checkbox" id="Linea5" value="Linea5" name="hobby"> <label

<input type="checkbox" id="Linea6" value="Linea6" name="hobby"> <label

<label for="_Cds">Calidad del servicio </label> <select id="_Cds" name="code">

<label for="_desc">Observaciones Personales</label><br>

<textarea name="desc" id="_desc" maxlength="200" rows="5">

Comentarios sobre el servicio </textarea> </form>

- IACC 2019. Programación HTML II. Diseño de formularios. Contenido de la semana 1

S-ar putea să vă placă și