Control Semana 1 (Formularios Básicos)

Franco Sierra Espinoza

PROGRAMACIÓN HTML – II

Instituto IACC

03/06/2020
INSTRUCCIONES: Imagínese que usted pertenece al departamento de informática de una
compañía de análisis de mercado llamada MERANA, y que fue asignado 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. Control 1 PROGRAMACIÓN
HTML II
 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. Es importante destacar que el
documento resultante que deberá generar como entrega de esta primera actividad de la
semana 1 no es el código del formulario, sino las directivas generales que deberán ser
utilizadas para la creación del mismo y 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

La estructura del formulario realizado para dicho control empieza con sus etiquetas de apertura
y cierre <form> y </form>, los cuales encerraran el conjunto de atributos, métodos, controles y
elementos que son utilizados para recibir la información del usuario dentro del formulario.

Dentro de la etiqueta form, tenemos el atributo action, como agente procesador, el cual toma
el control del proceso cuando se envía el formulario. También contiene la dirección URL de la
página web ala que será enviada la información.
También dentro de la etiqueta form, tenemos el atributo method, el cual nos indica el método
que se utilizara para realizar el envío de la información del usuario, para este caso utilizaremos
el método pos, el cual nos permite enviar el volumen necesario de información al servidor,
también nos permite ocultar la información del usuario, ofreciendo un mayor nivel de seguridad
y confidencialidad de los datos.

Dentro de la misma etiqueta incluimos un método en lenguaje JAVASCRIP, function

verificar(), el cual nos permitirá verificar que se llenen los datos dentro del formulario.

La distribución del formulario se realizó según lo solicitado en el control 1, agrupando cada

elemento de ingreso de información, con el elemento <fieldset>, </fieldset>.

Como se indicó anteriormente se utilizó la etiqueta fieldset para agrupar la información del
encuestado, junto con el conjunto de atributos y elementos que permitirán ingresar la
información del usuario según nuestras especificaciones.

El primer elemento de ingreso de información es el RUT del usuario, se utiliza la etiqueta

<label> que es un elemento utilizado para proveer una etiqueta a los controles del formulario.
Utilizamos los atributos for, asignándole el valor del id, para indicarle al label a cual hace
referencia

Para la construcción del cuadro de texto se utilizó el elemento imput y dependiendo del valor
dado al atributo type se presenta de forma distinta, en este caso se presenta como valor del
atributo “text”, otros atributos utilizados son el name, utilizado por el formulario cuando la
información va a ser enviada al servidor y el atributo id, es utilizado para referenciar el
elemento en CSS o JAVASCRIPT.

Para verificar que los datos que se ingresan sean según nuestras especificaciones,
utilizaremos tres atributos más que son: title, el cual incorpora una descripción del valor
esperado; placeholder, incorpora un valor provisional que se borre cuando el usuario tome el
foco sobre el cuadro de texto; pattern, es el atributo de validación según los valores que le
indiquemos.
Para el segundo cuadro de texto el cual corresponde a la edad del usuario, utilizaremos
algunos elementos y atributos descritos con anterioridad que son: label, imput, for, name, id y
type. A este cuadro de texto se le incorporaron los atributos maxlength, el cual nos valida el
número de caracteres que el usuario puede ingresar; min, perite el ingreso de un valor mínimo;
max, permite el ingreso de un valor máximo; required, especifica que se debe completar un
campo de entrada antes de enviar el formulario; y para este caso el valor del atributo type será
“number”, el cual solo permitirá el ingreso de números en el cuadro de texto.

Para el tercer elemento de ingreso de información, se utilizaron botones de radio, los cuales
ofrecen un mecanismo para una opción entre un grupo de posibles valores preestablecidos.
Los botones de radio solo permiten elegir una única opción, lo cual los hace idóneos para
aquellos casos donde se requiera que el usuario haga una selección simple. Para esto en el
atributo type se le dio como valor radio. También se utilizó el atributo checked, el cual puede
ser utilizado para definir que botón de radio esta seleccionado.

Cerramos el primer grupo de ingreso de información con la etiqueta </fieldset>.

En esta parte del formulario pasamos a las preguntas que se realizaran al encuestado.

Para la primera pregunta, se utilizó para este caso una selección de opciones a través de un
menú, esto se logra con el elemento select, los cuales despliegan un menú que contiene
opciones seleccionables. Cada una de estas opciones es definida utilizando elementos option,
los cuales están anidados dentro del bloque select.

Para la segunda pregunta se utilizó el mismo método que en la primera pregunta.

Para la tercera pregunta se utilizó el método de casillas de verificación, lo que nos permite que
el usuario elija entre un grupo de opciones preestablecidas. Para crear las casillas de
verificación se debió incorporar un grupo de elementos input type=”checkbox”, los cuales
poseen el atributo value, asociado a la selección que representa y en el atributo name se les
coloco el valor “líneas” ya que pertenecen al mismo grupo.
Para la cuarta pregunta se utilizaron botones de radio, los cuales nos permiten que el usuario
elija solo una opción de entra varias opciones. Para esto en el atributo type se le dio como
valor radio. También se utilizó el atributo checked, el cual puede ser utilizado para definir que
botón de radio esta seleccionado.

Para la quinta y última pregunta en la cual el encuestado deberá ingresar en cuadro de texto
una opinión personal, esto significa que deberá utilizar un cuadro de texto que nos perita que el
encuestado ingresa una determinada cantidad de caracteres para expresar la opinión que tiene
del servicio. Para esto se utilizó el elemento textarea. Estos elementos aceptan múltiples líneas
de texto, y por defecto permiten que el usuario redimensione el tamaño del elemento. Se
utilizaron también los atributos maxlength, el cual nos valida el número de caracteres que el
usuario puede ingresar y placeholder, incorpora un valor provisional que se borre cuando el
usuario tome el foco sobre el cuadro de texto.

Para realizar el envío del formulario con la información completa de la encuesta se realizó la
incorporación de elementos tabla, la cual nos permite crear una tabla dentro del cuerpo del
formulario, se añadieron atributos de alineación, borde y tamaño de celda. Dentro de esta celda
se ingresó un texto que a través del elemento div y los atributos value y type, lo convierten en
un botón, para enviar el formulario el atributo type tiene que tener como valor “submit”. Se
creó un segundo botón con los mismos elementos, esta vez con la diferencia que en el valor
del atributo type colocamos “reset”, que nos permitirá borrar la información ingresada en el
formulario.

Y por último se incorporó un método en lenguaje JAVASCRIP, el cual nos permitirá verificar
que se llenen los datos dentro del formulario.
 Bibliografía

[Haga triple clic en cualquier parte de este párrafo para escribir la primera referencia

bibliográfica.]

Instrucciones para la sección de las citas bibliográficas:

Escriba la bibliografía aquí en orden alfabético (empezando por el apellido del primer autor o, de
no haber autor, por la primera palabra del título). Esta página ya está formateada con sangrías
francesas. Incluya sólo las citas bibliográficas a las que haya hecho referencia en su trabajo y
asegúrese de incluir todas las citas bibliográficas a las que se haya referido en el mismo.

Ejemplos de un artículo:

Apellido, A. A., Apellido, B. B., y Apellido, C. C. (año). Título del artículo específico. Título
de la Revista, número de la revista, número de página.
[Link]

Lee, H. W. (2005). Los factores que influyen en los expatriados. Journal of American Academy of
Business, 6(2), 273-279.

Osorio-Delgado, M. A., Henao-Tamayo, L. J., Velásquez-Cock, J. A., Cañas-Gutiérrez, A. I.,

Restrepo-Múnera, L. M., Gañán-Rojo, P. F., Zuluaga-Gallego, R. O., Ortiz-Trujillo, I C. y
Castro-Herazo, C. I. (2017). Aplicaciones biomédicas de biomateriales poliméricos.
DYNA, 84(201), 241-252. [Link]

Nota: Si el artículo de la revista no tiene un DOI y proviene de una base de datos de investigación académica,
finalice la referencia después del rango de páginas. No incluya información de la base de datos en la
referencia. La referencia en este caso es la misma que para un artículo de revista impresa. Si el artículo de la
revista no tiene un DOI, pero tiene una URL que resolverá para los lectores (por ejemplo, es de una revista en
línea que no forma parte de una base de datos), incluya la URL del artículo al final de la referencia, en vez del
DOI.

Ejemplos de un texto:

Apellido, N. N. (año). Título del texto. Editorial. [Link]

McShane, S. L., y Von Glinow, M. (2004). Organizational behavior: Emerging realities for the
workplace. The McGraw-Hill Companies.

Panza, M. (2019). Números: elementos de matemáticas para filósofos.  Universidad Del Valle.

[Link]