Formularios Básicos.

PROGRAMACIÓN HTML II
Instituto IACC
18 de enero de 2019
Desarrollo

La estructura del formulario realizado para este 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

(2019). FORMULARIOS HTML I (ed., Vol. Semana 1, pp.). Santiago, IACC.

(Sin fecha). Formularios básicos en HTML. htmlquick. Obtenido 01, 2019, de

http://www.htmlquick.com/es/tutorials/forms.html

(Sin fecha). Formularios I: Formularios HTML. Haz una web. Obtenido 01, 2019, de
https://www.hazunaweb.com/curso-de-html/formularios-html/

(2012, 05). Validar que se seleccione minimo un checkbox. Foros del web . Obtenido 01, 2019, de
http://www.forosdelweb.com/f13/validar-que-seleccione-minimo-checkbox-997150/