1

Formularios Básicos

Milisen olivares Varas

Programación HTML II

Instituto IACC

21-06-2020
 2

Desarrollo

Debido a la solicitud recibida por parte de del departamento de informática perteneciente a la compañía
de análisis de mercado llamada MERANA. Me fue asignado un nuevo proyecto creado con el fin de
conocer el grado de calidad de servicio recibido por los usuarios del Metro. Dicho proyecto consiste en
una encuesta online que los usuarios deben rellenar y enviar, para conseguir la información requerida para
la empresa.
En esta oportunidad he diseñado el formulario en base a todos los campos solicitados por la compañía,
permitiendo que cada usuario sea verificado a través de su RUT. Puesto que privacidad de los clientes es
importante para la compañía el campo correspondiente al RUT no será almacenado junto con el resto de
la encuesta, solo será utilizado para la validación y lo anteriormente mencionado.
Cada campo a rellenar ha sido distribuido de manera amigable y eficiente para que los clientes los
completen y envíen, a continuación adjunto el prototipo del formulario:
 3

Como podemos observar en la fotografía cada campo ha sido creado y posicionado en base a lo
requerido, tomando en cuenta la comodidad del usuario y la claridad de las preguntas que este debe
contestar.
Toda la información personal del usuario se encuentra en la parte superior, con el fin de verificar la
identidad del cliente su género, RUT y edad.
Luego se encuentran las preguntas pertinentes al servicio. Cada pregunta cuenta con una opción a
seleccionar para conocer en detalle la frecuencia y horario en que el cliente utiliza el Metro; cuenta con un
menú desplegable para seleccionar las diversas líneas que el usuario utiliza y la calificación que otorgará
el cliente al servicio entregado, además de un cuadro al final del formulario, donde el cliente podrá emitir
un comentario de 200 caracteres acerca de su experiencia o recomendaciones sobre el servicio.
Debido a la gran cantidad de información que será enviada al servidor y la naturaleza del formulario, lo
datos serán enviados a través del método POST, el cual resguardará la información y la enviará al
servidor correspondiente.
A continuación detallaré el tipo de elementos que utilizaré para solicitar cada uno de los datos requeridos:
En primer lugar y como es lógico, utilizaré el elemento form para incorporar dentro del mismo el resto de
los elementos.
Para el campo de RUT, utilizaré un cuadro de tipo texto junto al atributo placeholder para indicar al
usuario el formato en que debe digitar su RUT. Además incorporaré el atributo “required” para indicar
que dicho campo es obligatorio y que debe ser rellenado para continuar con la encuesta.
Para el campo de edad, incorporaré el elemento input type number, para permitir al usuario ingresar su
edad en base a las limitaciones indicadas en las instrucciones.
Para el campo de género utilizaré un elemento radio, para que el usuario seleccioné solo una de las dos
opciones disponibles. Al tratarse del género hombre y mujer, este elemento es el más adecuado.

Para el campo de frecuencia de uso del servicio, considero que el mejor elemento es el radio, puesto que
muestra al usuario todas las opciones disponibles y permite seleccionar solo una opción.
Para el campo de horario frecuente de uso, decidí utilizar nuevamente el elemento radio, por la misma
razón que antes, es eficiente y comprensible, permite seleccionar solo una opción.
Para las líneas de metro que el usuario utiliza, decidí utilizar el elemento select multiple, puesto que
permite la visualización y selección de múltiples opciones.
Para la calificación del servicio, nuevamente hice uso del elemento radio por el mismo motivo anterior
mencionado, es eficiente y sencillo de utilizar.
Finalmente para el comentario del usuario he utilizado el elemento textarea, que me permite establecer la
cantidad de caracteres que se pueden ingresar.
 4

En cuanto al mecanismo utilizado para la validación de los elementos anteriormente mencionado, he

utilizado el atributo pattern para establecer la restricción de caracteres y números permitidos.
Para el campo edad, he utilizado el elemento min y max, para limitar la edad mínima y máxima permitida
para este formulario. Finalmente en el campo comentario, he utilizado el atributo maxlenght para
determinar la cantidad de caracteres permitidos.
 5

Bibliografía

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