Frames-Formularios

Frames
Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir
la
pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de
otras,
como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener
sus
propias barras deslizadoras. Los navegadores que lo implementan son el Netscape 2.0, y
el
Explorer 2.0 en adelante. Aunque no está incluido en el actual estándar HTML 3.2, está
previsto
que lo esté en el próximo (Cougar).
Una de sus características más importantes es que pulsando un enlace situado en un
frame, se
puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para
tener un
frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de
diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas
páginas. De
esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de
unas a
otras, siempre estará a la vista el índice del conjunto.
Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una
página
con dos frames. El de la izquierda va a servir de índice de lo que veamos en el de la
derecha, y
en éste veremos inicialmente una página de presentación. Se podrá acceder también aquí
a la
página personal creada en los capítulos anteriores (mipag13.html), si se pulsa un enlace
en el
frame de la izquierda.
Documento de definición de los frames
Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos
cuántas
zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de
cada una
de ellas.
En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en
columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una
distribución en filas).
Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del
ancho de
la pantalla, y el otro, el 80% restante.

Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML
que
va a servir de índice de lo que veamos en el otro (y que vamos a llamar mipagind.html), y
el
de la derecha otro documento HTML que va a servir de página de presentación (al que
llamaremos mipagpre.html).
Todo lo anterior se refleja en el siguiente documento HTML:
<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipind15.html">
<FRAME SRC="mippre15.html" NAME="principal">
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> página</A>.
</NOFRAMES>
</HTML>
Resultado:
Obsérvese lo siguiente:
Es un documento parecido a los que conocíamos hasta ahora. La diferencia está en
que en
vez de utilizar la etiqueta BODY, que sirve normalmente para delimitar lo que se va a
ver en
la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames).

En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a
haber dos
frames y que van a ir en columnas. Si hubiéramos querido que fueran en filas,
habríamos
puesto ROWS (filas, en inglés). También se define el espacio en anchura que van a
ocupar
cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se
podría
también haber puesto una cifra absoluta, que representaría el número de pixels a
ocupar.
Formularios
Formularios
Los formularios nos permiten dentro de una página Web solicitar información al visitante y
procesarla. En un formulario podremos solicitar diferentes datos cada uno de los cuales
quedará asociado a una variable. Una vez se hayan introducido los valores en los
campos, el contenido de estos será enviado a la dirección donde tengamos el programa
que pueda procesar las variables. A este programa externo se le suele
llamar CGI (Common Gateway Interface). La creación de este tipo de programas sería
tema de otro manual diferente, por lo que aquí veremos como se pueden enviar las
variables a nuestra dirección de correo electrónico.
La declaración del formulario se pone entre las instrucciones <FORM></FORM>. En el
interior de la declaración se indican los elementos de entrada. La
instrucción <FORM> tiene los parámetros action y method.
action = "programa"
Indica el programa que va a "tratar" a las variables que se envíen con el formulario. En
nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa"
será "mailto: direccion_de_correo".
method = POST / GET
Indica el método según el que se transferirán las variables. POST produce la modificación
del documento de destino (como en el caso de enviar por correo las variables). GET no
produce cambios en el documento destino (como en el caso de una consulta a una base
de datos, p.ej. una página de búsqueda en Internet).
Sentencias de Entrada
Para la introducción de las variables se utiliza la instrucción <INPUT>. Esta instrucción
tiene el parámetro type que indica el tipo de variable a introducir y name que indica el
nombre que se le dará al campo. Cada tipo de variable tiene sus propios parámetros.
type= text name = campo
Indica que el campo a introducir será un texto. Sus parámetros son :
 maxlenght = numero
Numero máximo de caracteres a introducir en el campo.

 size = numero
Tamaño en caracteres que se mostrará en pantalla.
 value = "texto"
Valor inicial del campo. Normalmente sera " ", o sea, vacio.
type = password name = campo
Indica que el campo será una palabra clave. Mostrará asteriscos (*) en lugar de las letras
escritas. Sus parámetros opcionales son los mismos que para text.
type = checkbox / radio name = campo
El campo se elegirá marcando una casilla. Se permite marcar varias casillas. Los valores
de las casillas serán indicados por :
 value = "valor"
 checked
La casilla aparecerá marcada por defecto.
type = radio name = campo
El campo se elegirá marcando una casilla. Solo permite marcar una sola de las casillas.
Los valores de las casillas serán indicados por :
 value = "valor"
type = image src = "fichero de imagen"
Este funcionará exactamente que el botón de aceptar.
type = hidden name = campo
El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre
con el valor indicado por el parámetro :
 value = "valor"
type = submit
Representa un botón. Al pulsar este botón la información de todos los campos se envía al
programa indicado en <FORM>. Tiene el parámetro value = "texto" que indica el texto que
aparecerá en el botón.
type = reset
Representa un botón. Al pulsar este botón se borra el contenido de todos los campos. El
parámetro value = "texto" indica el texto que aparecerá en el botón.
Selecciones
Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger
una o varias. Se utiliza para ello la instrucción <SELECT> </SELECT> . Sus parámetros
son :
name = campo
Nombre del campo
size = num
Número de opciones visibles. Si se indica 1 se presenta como un menú desplegable, se
indica mas de uno se presenta como una lista con barra de desplazamiento.

multiple
Permite seleccionar mas de un valor para el campo.
Las diferentes opciones de la lista se indican con la instrucción <OPTION>. Esta
instrucción puede incluir el párametro selected para indicar cual es la opcion por defecto.
En caso de que no se especifique, se tomara por defecto la primera opción de la lista.
Areas de texto
Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se
incluyan en el comentarios. La instrucción usada es <TEXTAREA> </TEXTAREA>, y sus
parámetros :
name = campo
Nombre del campo.
cols = num.
Numero de columnas de texto visibles.
rows = num.
Numero de filas de texto visibles.
Ejemplo:
Veamos a continuación un ejemplo de formulario utilizando todas las formas de
introducción de datos.
<FORM action = "mailto:lokeitor@hotmail.com" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value = "Gif_Cons" > Gif Construction SET
<INPUT type = checkbox name = archivo value = "Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "Manual De HTML UDA" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Google
<OPTION>Por el buscador Lycos
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>

<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>
Ahora veamos el efecto producido en la página Web:
Tu Nombre: Tu Clave: Archivos a Enviar:
Manual de Html GifConstruction SET Archivo de Ayuda
Tu Edad :
Menos de 20 años
Entre 20 y 40 años
Mas de 40 años
Como encontraste mi página :
Por el buscador Google
Tus Comentarios:
Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se
generará un mensaje de correo a mi dirección de correo lokeitor@hotmail.com. Si pulsas
el botón Borrar se borraran los datos que hayas introducido en el Formulario.
Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un programa
(CGI), este programa podría tratarlas y dar como respuesta una nueva página Web.
Se puede utilizar un Formulario como "lanzador" de links, es decir, por medio de una lista
desplegable permitir al usuario escoger un Link y acceder a el. Para ello se utiliza el
párametro "OnClick". Ejemplo :
<FORM>
<SELECT name = "list" >
<OPTION value="http://www.geocities.com/xavi_loco">Mi Página Web
<OPTION value="http://www.microsoft.com">Microsoft
<OPTION value="http://www.ibm.com">Ibm
<OPTION SELECTED value="http://www.dell.com">Dell
<OPTION value="http://www.hp.com">Hewlett Packard
<OPTION value="http://www.w3c.org">w3c
</SELECT>
<INPUT TYPE=BUTTON value="Ir a..."
onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</FORM>

Frames-Formularios

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Frames-Formularios

Frames-Formularios