Programación HTML II

 Formularios Básicos.

Joel Colina Vargas

Programación HTML II

Instituto IACC

21/06/2020

Desarrollo

 RECURSOS NECESARIOS: Para responder a los requerimientos de este control será necesario que el alumno conozca y maneje los elementos básicos presentes en los formularios HTML, los cuales se encuentran consignados en el contenido de la semana. Se recomienda además haber visualizado los recursos adicionales de la semana.

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.

• Lo primero que se debe realizar es utilizar el form el cual va agrupar a todos los elementos y controles que se utilizaran para recibir la información del usuario, con esto debemos agregar algunos atributos que son muy importantes para el la de función del formulario y estos atributos son:

• Action: Este atributo nos indicara la acción que deberá tomar el formulario cuando se requiera enviar la información al servidor (submit).
• Method: Este otro atributo nos indica el método que se debe utilizar para realizar el envió de la información del usuario. Si este atributo no se especifica, el formulario tomará por defecto será GET.

• Para el ingreso del RUT se utilizará el componente texbox donde el usuario será capas de ingresar el dato solicitado. Además, deberemos colocar la etiqueta label para que el usuario sea capaz de saber que dato se debe ingresar, se deberá utilizar el atributó for para indicarle al label a que elemento hace referencia, para esto se le debe dar un id.

Para este campo se deberá utilizar el elemento o etiqueta input, los cuales ofrecen el mecanicismo básico para la construcción de nuestro formulario.

También utilizaremos el atributo pattern, que nos permitirá realizar validaciones en base a expresiones regulares sin necesidad de incorporar scripts, también utilizaremos el atributo maxlength para limitar la cantidad máxima (12) caracteres, también se agregará el atributo title el cual nos permite agregar una descripcion del valor esperado.

• Para el ingreso de la edad este campo será necesario utilizar la etiqueta label para indicarle al usuario que información debe ir, este campo también será un texbox, pero de “type=number” se restringirá con el atributo “maxlength =3”, también le agregaremos el atributo title para mostrar una breve descripción del valor que se debe poner en el campo.
• Para el Genero se deberá utilizaremos los botone de radio, el cual nos ofrece el mecanismo de seleccionar una opción dentro de un grupo de posibles valores preestablecidos. Para la creación de estos botones incorporaremos un grupo de elementos input type = “radio”, cada uno de los cuales debe poseer el atributo value asociado a la selección que representa. Para que este elemento funcione de forma correcta todos los elementos pertenecientes al mismo grupo debe tener asignado el mismo atributo name. 
• Para Frecuencia con la que usa el servicio: Para este campo se utilizara una casilla de verificación para crear este componente debemos crear este campo como input type= “checkbox”, cada uno debe poseer el atributo value asociado a la selección que represente.
• Para Horario en el que usa el servicio regularmente: Para este campo se utilizara una casilla de verificación para crear este componente debemos crear este campo como input type= “checkbox”, cada uno debe poseer el atributo value asociado a la selección que represente.
• Para Líneas de Metro que normalmente utiliza: Para este campo utilizaremos campo menú con el atributo multiple el cual nos permite seleccionar más de una opción.
• Para Calidad general del servicio: Para este campo se utilizará una casilla de verificación para crear este componente debemos crear este campo como input type= “radio”, cada uno debe poseer el atributo value asociado a la selección que represente.
• Para la Observaciones personales: Para este campo utilizaremos el textarea el cual ofrece una mayor flexibilidad, pero en este caso se le dará un máximo de 200 caracteres con el atributo maxlength= 200.

Diseño según lo explicado anteriormente:

Rut:                                  Edad:[pic 1][pic 2]

Género: Masculino        Femenino[pic 3][pic 4]

Frecuencia con la que usa el servicio:

...