Formularios Básicos

Jorge Calquín Otárola

Programación HTML II
Instituto IACC
12 de junio de 2019
 Desarrollo

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.

En esta parte el objeto se define de la siguiente manera:

Input type =”text”, validando formato.
<input type=”text” name=”rut” id=”idrut” title=”11.111.111-1” placeholder=”11.111.111-1”
pattern=”[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9kK]"/>

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

En esta parte el objeto se define de la siguiente manera:

Debemos definir input type=”number” , validando solo números entre el 10 y 120, tomaremos
en cuenta atributos como Min y Max, sea cualquier numero: step=1
<input type="number" min="10" max="120" step="1" id="n1" name="age" pattern="\d+">
 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.

En esta parte el objeto se define de la siguiente manera:

input type="radio", cada uno de los cuales debe poseer el atributo value asociado a la única
selección que representa.

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

En esta parte el objeto se define de la siguiente manera:

input type="radio", cada uno de los cuales debe poseer el atributo value asociado a la única
selección que representa.

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

En esta parte el objeto se define de la siguiente manera:

input type="radio", cada uno de los cuales debe poseer el atributo value asociado a la única
selección que representa.

 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.

En esta parte el objeto se define de la siguiente manera:

input type="checkbox", cada uno de los cuales debe de poseer el atributo value asociado al o
los valores de selección que representa.
 Calidad general del servicio: este campo debe permitir al usuario seleccionar entre malo,
deficiente, regular, bueno y excelente.

En esta parte el objeto se define de la siguiente manera:

input type="radio", cada uno de los cuales debe poseer el atributo value asociado a la única
selección que representa.

 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.

En esta parte el objeto se define de la siguiente manera:

Como las observaciones personales no tienen un valor fijo, Para estos casos, los elementos
textarea ofrecen mayor flexibilidad. Estos elementos aceptan múltiples líneas de texto, y por
defecto permiten que el usuario redimensione el tamaño del elemento.
Para limitar la cantidad de caracteres se utiliza maxlength=200.

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.

Para el caso de los formularios existen algunos atributos, el destino del formulario puede ser
enviado a una página (“formulario.html”), el método seria post debido al tipo, va a depender de
la sensibilidad de la información, en este caso al ser un formulario de alto volumen de
información y contraseñas.
<form action=" formulario.html " method="post">
 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.).

Los elementos a utilizar van a depender del tipo de información que se solicite.

Para el ingreso de la edad: cuadro numérico <input type=”number”>.

Para el ingreso de Rut: cuadro de texto <input type=”text”>, no se utilizara numérico debido al

digito verificador correspondiente a “K”.

Para el ingreso de los datos correspondientes al sexo, horario de viaje, frecuencia de uso, calida

del servicio: botones de radio <input type=”radio”>.

Para el ingreso de las observaciones: área de texto <textarea>.

Para el ingreso de las líneas de metro más utilizadas casillas de verificación ya que nos

permitirá el ingreso de más de un valor <input type=”checkbox”>.

Para el envio de la encuesta e informacion: botón <input value=”Enviar”type=”sumit”>

 Detallar el mecanismo que deberá ser utilizado para realizar la validación de cada uno de
los datos requeridos.

En la creación de un formulario html debemos tener conciencia de que los usuario se

equivocaran en rellenarlo en algún momento, para evitar esto podemos recurrir a una
validación, una expresión regular es una cadena de texto o posible patrón de coincidencias,
para ello el más adecuado sería pattern, existen muchas posibilidades o características de este
atributo, para el caso del Rut es por un rango de caracteres y su carácter especial son corchetes,
quedaría así:
<input type="text" name="rut" id="idrut" title="11.111.111-1" placeholder="11.111.111-1"
pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9kK]"/>
Para el caso de la edad:
<input type="number" min="10" max="120" step="1" id="n1" name="age" pattern="\d+">
 Bibliografía

Material de estudio (iacc, Programación HTML II, semana 1)