I.E.P.

“Virgen de Guadalupe” Letras – Quinto Grado -

NIVEL
SECUNDARIA DE MENORES

COMPUTACIÓN

5°
Grado
Secundaria

1
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

I N D I C E

9° UNIDAD Del: ____________ Al:________________

9 Introducción a los formularios

223

10° UNIDAD Del: ____________ Al:________________

10 Crear un formulario
226

11° UNIDAD Del: ____________ Al:________________

11 Los resultados del formulario

232

2
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

I. E. P.
GUIA DE APRENDIZAJE N° 09
C
G
Tema: Introducción a los formularios.
Contenidos:

PE
VIR

LU
EN
G

A
DE G UAD  Descripción y componentes de los formularios.
1975

Introducción a los formularios

Los formularios son uno de los elementos más utilizados para crear interactividad entre un
sitio web y el internauta. Entre los usos más comunes de los formularios se encuentran las
encuestas, los formularios de pedido y las interfaces de búsqueda.

Descripción
Los formularios necesitan dos componentes para que funcionen correctamente: el código HTML
(que describe el formulario) y una aplicación en la parte del servidor o una secuencia de comandos
en la parte del cliente (para procesar la información que el usuario introduce en los campos del
formulario). Con Frontpage es muy fácil insertar formularios en tus páginas web, como éste que ves
abajo:

Componentes de los formularios

Los formularios sirven para recabar información de los visitantes y se componen de cuadros de
texto de una línea, cuadros de texto con desplazamiento, casillas de verificación, botón de opciones,
menú desplegable o botón de comando. El uso de uno u otro de estos componentes dependerá de la
información que se solicite al visitante. Vamos a verlos uno por uno.

Cuadro de texto de una línea

Estos cuadros de texto se utilizan para que el visitante escriba un texto corto, como el nombre y
apellidos, el número de teléfono o el correo electrónico.

3
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

Cuadro de texto con desplazamiento

Estos cuadros de texto se utilizan en los casos en que el visitante debe introducir un texto más largo,
como un comentario o una observación. Se puede navegar a través del texto con una barra de
desplazamiento.

Casilla de verificación

Estas casillas pueden ser activadas o desactivadas por el visitante. Se utilizan para hacer una
pregunta al visitante cuya respuesta consiste en dos opciones: sí/no.

Botón de opción

Cuando existen más de dos posibles respuestas a una pregunta o una petición, se utilizan los
botones de opción. El visitante deberá marcar una de las opciones.

Menú desplegable

El menú desplegable cumple la misma función que los botones de opción: consiste en que el
visitante elija una de entre las opciones propuestas. Su ventaja radica en que ocupa menos espacio
en el formulario, pues las opciones se recogen en un menú desplegable. Otra de sus ventajas es que
permite varias selecciones.

Botón de comando

Los botones ejecutan acciones concretas. Se suelen utilizar para que los visitantes envíen el
formulario después de rellenarlo o borren los campos restableciendo el formulario en blanco.

__________________________________________

Además de estos componentes básicos de un formulario, puedes introducir en un formulario un

campo oculto, que contiene información que no quieres que vea el visitante, o un campo de imagen,
que es un botón que contiene una imagen en lugar de un texto.
__________________________________________

4
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

Comprobación

Completa.

1. Los formularios son uno de los elementos más utlizados para crear interactividad entre
un ………………………………………….. y el …………………………………….
2. Entre los usos más comunes de los formularios se encuentran, las …………………………….,
los…………………………………………………………….. y las ………………………..……
3. Los formularios necesitan dos componentes para que funcionen correctamente:
a) ……………………………………………………………………………………………
b) …………………………………………………………………………………………….
4. Los componentes de los formularios son:
a) ……………………………………………………………………………………..
b) ……………………………………………………………………………………..
c) ……………………………………………………………………………………..
d) ……………………………………………………………………………………..
e) ……………………………………………………………………………………..

Autoevaluación

Relaciona.

1. Cuadro de texto de una línea ( ) Ejecutan acciones concretas.

2. Cuadro de texto con desplazamiento ( ) Para escribir texto corto.

3. Casilla de verificación ( ) Para escribir texto largo.

4. Botón de opción ( ) Cuando existen más de dos posibles

respuestas.

5. Menú desplegable ( ) Pueden ser activadas o desactivadas

por el visitante.

6. Botón de comando ( ) Consiste en elegir una de entre las

opciones propuestas

Dibuja

Un Formulario con cualquiera de sus componentes.

5
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

I. E. P.
GUIA DE APRENDIZAJE N° 10
C
G
Tema: Crear un formulário.
Contenidos:

PE
VIR

LU
EN
G
A
DE G UAD  Procedimiento, Propiedades.
1975

Crear un formulario
El primer paso para crear un formulario es definir para qué se va a utilizar, ya que en
función de su utilidad se utilizarán unos campos y no otros. Normalmente los formularios se
usan para recibir peticiones, organizar consultas, pedir a los visitantes que se identifiquen en
un sitio web con nombre de usuario y contraseña, etc.

Procedimiento
Puedes crear un formulario nuevo o crearlo a partir de las plantillas que ofrece Frontpage. En el
primer caso, la forma de crearlo es a través de Menú Insertar > Formulario > Formulario, aunque
también puedes hacerlo a partir de las plantillas de Frontpage. Para crearlo desde una plantilla, elige
Menú Archivo > Nuevo > Página. En la pestaña General encontrarás algunas plantillas, como
Formulario de comentarios, Libro de invitados, Registro de usuarios, etc.

Al crear un nuevo formulario sin utilizar las plantillas, Frontpage crea un cuadro de líneas
discontinuas, que será la zona activa del formulario. Ningún elemento del formulario puede crearse
fuera de esta zona rectangular. Al mismo tiempo, Frontpage también ha insertado los botones
‘Enviar’ y ‘Restablecer’, ya que todo formulario debe tener estos botones.

6
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -
El siguiente paso es introducir los campos que conformarán el formulario. Para ello, utiliza las
distintas opciones de Menú Insertar > Formulario. Cada uno de los campos puede colocarse en la
página de la misma forma que el texto: puedes utilizar saltos de línea, tablas, alineaciones, líneas
horizontales, etc. Cada uno de los campos, sean del tipo que sean, se componen de dos elementos:
la etiqueta y el contenido. La primera especifica qué se le está pidiendo al visitante y el segundo es
el espacio que se reserva para que el visitante introduzca los datos. Para escribir una etiqueta,
simplemente sitúa el cursor al lado del campo y escribe. Por ejemplo:

Propiedades de los elementos de formulario

Una vez has establecido dentro del formulario todos los elementos que lo conforman, puedes
modificar las propiedades de cada uno. Para ello, haz doble clic sobre cada elemento. Para cada tipo
de elemento aparece un cuadro de diálogo distinto. Vamos a verlos:

Propiedades de un cuadro de texto

1. Nombre

Es una referencia interna, no debes confundirlo con el texto que se muestra junto al campo en el
formulario, que es la etiqueta. T1, T2, T3, ... son los nombres predeterminados para los cuadros de
texto de una línea, aunque puedes cambiarlos por otros nombres que sean más significativos para ti.
Debes tener en cuenta que los resultados del formulario incluirán estos nombres de campos.

2. Valor inicial

En este campo puedes escribir el texto que aparecerá en el cuadro de texto cuando el formulario se
abra por primera vez.

3. Ancho en caracteres

Introduce el número de caracteres que va a determinar el ancho del cuadro de texto. No significa
que el visitante solamente podrá introducir este número de caracteres, sino que es una medida de
longitud de la anchura del campo.

7
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

4. Orden de tabulación

Determinará la posición del campo en el orden de tabulación del formulario. Crea un orden lógico,
de arriba a abajo y de izquierda a derecha. Haciendo clic en la tecla Tabulador, el visitante podrá
saltar de forma sencilla de un campo a otro.

5. Campo de contraseña

Marca la opción ‘Sí’ si se trata de un campo que va a contener una contraseña. De esta forma, cada
carácter introducido se convierte en un asterisco.

Propiedades de una casilla de verificación

1. Nombre y Orden de tabulación

Para rellenar estos campos sirven las indicaciones vistas arriba.

2. Valor

En este campo está el valor que se devuelve con los resultados del formulario si se selecciona la
casilla. Puedes cambiar el valor predeterminado ‘ON’ por ‘Sí’.

3. Estado inicial

En este campo elige una de las dos opciones, que aparezca activada al cargar la página o que
aparezca desactivada.

Propiedades de un botón de opción

Para los cuatro campos que te aparecen en este cuadro de diálogo sirven las indicaciones vistas para
la casilla de verificación.

8
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

Propiedades de un menú desplegable

1. Nombre y Orden de tabulación

Estos campos los rellenarás siguiendo las indicaciones vistas arriba.

2. Opciones

En la parte central del cuadro de diálogo se disponen las diversas opciones que tendrá el menú
desplegable. Puedes hacer clic en el botón ‘Agregar’ para introducirlas. Después, utiliza los botones
‘Subir’ y ‘Bajar’ para determinar qué opciones se mostrarán más arriba del menú y cuáles más
abajo.

3. Alto

En este campo especifica la cantidad de líneas de texto que deseas que aparezcan en el cuadro
desplegable. Por ejemplo, si el menú desplegable tiene tres opciones, puedes establecer la altura en
3 para que todas las opciones estén visibles.

4. Permitir selecciones múltiples

Si seleccionas la opción ‘No’, el visitante solamente podrá seleccionar una opción.

Propiedades de un botón de comando

9
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

1. Nombre y Orden de tabulación

Para rellenar estos campos sigue las indicaciones vistas arriba.

2. Tipo de botón

Normalmente utilizarás dos tipos de botones en tus formularios: ‘Enviar’ y ‘Restablecer’. El tipo
‘Normal’ crea un botón de comando personalizado para el que deberás definir una secuencia de
comandos que ejecute la acción concreta que deseas.

3. Valor/Etiqueta

Dependiendo del tipo de botón elegido, el valor de la etiqueta será, de forma predeterminada,
‘Enviar’ o ‘Restablecer’. Puedes cambiar estos valores por otros, como ‘Envíalo’, ‘Borrar’, ‘Ya
está’, etc.

__________________________________________

La mejor manera de alinear las etiquetas con sus contenidos es mediante una tabla. Para ello crea
una tabla de dos columnas, en la de la izquierda puedes poner las etiquetas, y en la de la derecha los
campos. De esta forma tu formulario quedará más organizado y profesional.
__________________________________________

Comprobación

Completa.

1. El primer paso para crear un formulario es definir para que se va a ………………………….

2. Normalmente los formularios se usan para recibir ……………….……………………….... ,
………………………………… , …………………………………………………………
3. Puedes crear un formulario …………………… o a partir de las ……………………………..
4. Los campos se componentes de dos elementos:
a) ………………………………….
b) ………………………………….
5. Todos los elementos del formulario se pueden ……..………………………

Autoevaluación

Dibuja.

Dibuja un cuadro de texto con sus propiedades.

10
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

PRÁCTICA
Crear un formulario de sugerencia tienes más información sobre el grupo de
música Juliet y quieres compartirlo con nosotros, o simplemente quieres
decirnos lo que piensas de este sitio, puedes hacerlo aquí. Agradeceremos todos
sus comentarios y sugerencias’.

2. Sitúa el punto de inserción bajo este texto y elige Menú Insertar > Formulario > Formulario.
Frontpage crea un cuadro de líneas discontinuas que marcan los límites del formulario. Además,
agrega de forma predeterminada los botones Enviar y Restablecer.

3. Sitúa el punto de inserción sobre los botones y escribe ‘Clase de comentario’. Salta una línea y
elige Menú Insertar > Formulario > Botón de opción. Crea de esta forma 4 botones de opción en la
misma línea. Cada uno de ellos tendrá una etiqueta, que serán: Queja, Problema, Sugerencia,
Elogio.

4. Bajo la línea de botones de opción inserta un campo de texto con desplazamiento. Su etiqueta
debe ser: ‘Escribe tus comentarios en ese espacio’

5. Deja los botones de Enviar y Restablecer como están y guarda la página dentro de tu sitio con el
nombre ‘comentario.htm’

Resultado
Previsualiza el resultado de tu trabajo en la pestaña Vista Previa. Al final tu nueva página debe
quedar más o menos así:

11
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

I. E. P.
GUIA DE APRENDIZAJE N° 11
C
G
Tema: Los resultados del formulario.
Contenidos:

PE
VIR

LU
EN
G

A
DE G UAD  Destino de los resultados.
1975

Los resultados del formulario

El fin de todo formulario es recopilar los datos que ha enviado el visitante para guardarlos y
utilizarlos. A esto se llama resultados del formulario y Frontpage proporciona distintos
sistemas para gestionarlos.

Destino de los resultados

Una vez que el visitante envía el formulario, deben reunirse los datos que se han introducido,
llamados resultados del formulario, para poder verlos, mostrarlos al visitante o trabajar con ellos si
es necesario. FrontPage proporciona varios controladores de formulario, que toman los resultados y
llevan a cabo distintas acciones. Por ejemplo, puedes guardar los resultados en un archivo de texto o
de HTML, puedes enviar los resultados por correo electrónico, puedes guardar los resultados en una
base de datos, o bien utilizar secuencias de comandos personalizadas para controlar los resultados
del formulario.

Para definir el destino que van a tener los resultados de un formulario, sitúate sobre él y elige
Propiedades de formulario del menú contextual. Te aparecerá una ventana como ésta:

Puedes elegir entre:

1. Guardar los resultados en un archivo

Cada vez que un visitante envía un formulario, Frontpage anexará los resultados en un archivo del
que debes definir su nombre y su ubicación. Después, puedes abrir el archivo y ver los resultados.
Haz clic en el botón Opciones para ver las posibilidades de formato de archivo que te permite el
programa. Si tienes un libro de visitas para tu web, puede resultar interesante guardar los resultados
en un archivo HTML. Así, podrás crear un vínculo a ese archivo para que los visitantes puedan ver
lo que otros han escrito.

12
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

2. Enviar los resultados por correo electrónico

Cada vez que un visitante envía un formulario, Frontpage enviará un mensaje de correo electrónico
a la dirección que establezcas que contiene los resultados de dicho formulario. Haz clic en el botón
Opciones para ver las distintas posibilidades de esta opción, como por ejemplo elegir el formato del
correo, el asunto que llevará, etc.

3. Guardar los resultados en una base de datos

Cada vez que un visitante envía un formulario, Frontpage guardará la información en una base de
datos. Por ejemplo, si utilizas un formulario para reunir información de contacto, puedes guardar los
resultados directamente en una base de datos. Si haces clic en el botón Opciones podrás elegir la
base de datos en la que se guardará la información del formulario, crear una nueva base de datos,
elegir los campos que se guardarán y la tabla de la base de datos en la que lo harán, etc.

4. Usar una secuencia de comandos personalizada

Puedes utilizar tu propia secuencia de comandos personalizada (ISAPI, NSAPI o CGI) como
controlador de formulario. Utiliza el botón Opciones para ver más opciones.

La página de confirmación
El último paso en la creación de un formulario consiste en definir una página de confirmación, que
es la que verán los visitantes una vez que hayan enviado un formulario. La página de confirmación
suele mostrar un mensaje de agradecimiento y el contenido de uno o más campos del formulario. El
visitante puede confirmar que la información se introdujo correctamente y, si es necesario, puede
volver al formulario y rellenarlo nuevamente.

Puedes crear tu propia página de confirmación o dejar que sea Frontpage quien la cree. La página de
confirmación predeterminada de Frontpage muestra una lista de nombres de campos del formulario
y sus valores.

Para crear una página de confirmación personalizada, sigue estos pasos:

1. Abre una página en blanco y escribe el texto que quieres mostrar después de que el visitante haya
enviado el formulario. Por ejemplo: “Muchas gracias por su comentario. Con él nos ayuda a
mejorar constantemente”.

13
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -
2. Si quieres mostrar la información que el visitante ha introducido en el formulario para que
verifique si los datos son correctos, elige Menú Insertar > Componente > Campo de confirmación.

3. En el cuadro Nombre del campo de formulario que se va a confirmar, escribe el nombre del
campo a partir del cual se muestra la información y después haz clic en Aceptar. El nombre del
campo aparecerá entre paréntesis en la página. Cuando se muestre la página de confirmación al
visitante, este campo mostrará en su lugar el dato que ha introducido del visitante. Repite este paso
en cada campo que desees mostrar.

4. Guarda la página.

5. Para asignar la página de confirmación que has creado al formulario, abre la página que lo
contiene y Propiedades de formulario en el menú contextual. Después, haz clic en el botón
Opciones y en la ficha Página de confirmación.

6. En el cuadro Dirección URL escribe el nombre y la ubicación de la página de confirmación que

acabas de crear o haz clic en Examinar para localizarla.

__________________________________________

Si vas a utilizar alguno de los controladores de formulario en lugar de una secuencia de comandos
personalizada, debes asegurarte antes de que las Extensiones de servidor de Frontpage están
instaladas en el servidor en el que está ubicado el sitio web.
__________________________________________

14
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

Comprobación

Dibujar 2 formularios distintos.

15
 I.E.P. “Virgen de Guadalupe” Letras – Quinto Grado -

PRÁCTICA
Crear una página de confirmación

La página de confirmación se suele utilizar para agradecer al visitante el haber rellenado el

formulario y también para confirmar que los datos introducidos en él son correctos.

Desarrollo
1. Crea una página en blanco y escribe: ‘Muchas gracias por su comentario, con él nos ayuda a
mejorar constantemente’.

2. Guarda la página en tu sitio con el nombre ‘confirmacion.htm’.

3. Cierra la página ‘confirmacion.htm’ y abre la página que contiene el formulario:

‘comentario.htm’. Haz clic con el botón derecho dentro del formulario y elige Propiedades de
formulario. Después haz clic en el botón Opciones y en la ficha Página de confirmación.

4. Haz clic en el botón Examinar para seleccionar la página ‘confirmacion.htm’.

Resultado
Esto es todo. Con estos sencillos pasos habrás creado una página para agradecer a los visitantes el
haber rellenado el formulario.

16