HTML

Formularios - Frame

HTML
Formularios en HTML
 El trabajo con formularios es uno de los
principales puntos que debemos aprender en
HTML.
 Hacen posible muchas de las utilidades clave

de una web, como el contacto de los

creadores de las páginas con los visitantes,
así como ciertos niveles de interacción básica
y avanzada con el usuario.
Formularios HTML
 Empezamos la explicación de la creación de formularios
con el lenguaje HTML.

 Hasta ahora hemos visto la forma en la que el HTML

gestiona y muestra la información, esencialmente
mediante texto, imágenes y enlaces.
 Nos queda por ver de qué forma podemos
intercambiar información con nuestro visitante.
 Desde luego, este nuevo aspecto resulta primordial
para gran cantidad de acciones que se pueden levar a
cabo mediante el Web: Comprar un articulo, rellenar
una encuesta, enviar un comentario al autor...
Formularios HTML
 Los formularios son esas famosas cajas de texto y
botones que podemos encontrar en muchas páginas
web.

 Son muy utilizados para realizar búsquedas o bien

para introducir datos personales por ejemplo en
sitios de comercio electrónico.

 Los datos que el usuario introduce en estos campos

son enviados al correo electrónico del administrador
del formulario o bien a un programa que se encarga
de procesarlo automáticamente.
Qué se puede hacer con un
formulario
 Usando HTML podemos únicamente construir
un formulario con diversos campos y, a la
hora pulsar el botón de enviar, generar una
ventana de redacción de un email con los
datos que el usuario haya escrito en cada uno
de esos campos.
Resumen
 Con HTML podremos construir los formularios, con
diversos tipos de campos, como cajas de texto,
botones de radio, cajas de selección, menús
desplegables, etc. Sin embargo, debe quedar claro
que desde HTML no se puede enviar directamente
el correo, sino que se generará un email en el
ordenador del visitante, que éste tendrá que enviar
"manualmente" por medio de su programa de
correo. Si queremos que el formulario se envíe
automáticamente o se procese en el servidor para
generar otro tipo de respuesta, necesitaremos
lenguajes de programación.
Cómo hacer un formulario en HTML
 Los formularios son definidos por medio de
las etiquetas <form> y </form>.
 Dentro de esta etiqueta <form> debemos

especificar algunos atributos:

◦ Action
◦ Method
◦ enctype
Cómo hacer un formulario en HTML
Action :
 Define el tipo de acción a llevar a cabo con el formulario. Como ya

hemos dicho, existen dos posibilidades:

◦ El formulario es enviado a una dirección de correo electrónico
◦ El formulario es enviado a un programa o script que procesa su contenido
 En el primer caso, el contenido del formulario es enviado a la
dirección de correo electrónico especificada por medio de una
sintaxis de este tipo:
<form action="mailto:direccion@correo.com" ...>
 Si lo que queremos es que el formulario sea procesado por un
programa, hemos de especificar la dirección del archivo que
contiene dicho programa. La etiqueta quedaría en este caso de la
siguiente forma:
<form action="dirección del archivo" ...>
 La forma en la que se expresa la localización del archivo que
contiene el programa es la misma que la vista para los enlaces.
Cómo hacer un formulario en HTML
Method
 Este atributo se encarga de especificar la forma en la que el

formulario es enviado. Los dos valores posibles que puede tomar

esta atributo son post y get. A efectos prácticos y, salvo que se
os diga lo contrario, daremos siempre el valor post.
Enctype
 Se utiliza para indicar la forma en la que viajará la información

que se mande por el formulario. En el caso más corriente, enviar

el formulario por correo electrónico, el valor de este atributo
debe de ser "text/plain". Así conseguimos que se envíe el
contenido del formulario como texto plano dentro del email.
 Si queremos que el formulario se procese automáticamente por

un programa, generalmente no utilizaremos este atributo, de

modo que tome su valor por defecto, es decir, no incluiremos
enctype dentro de la etiqueta <form>
Ejemplo de etiqueta <form>
completa
 Así, para el caso más habitual -el envío del
formulario por correo- la etiqueta de creación
del formulario tendrá el siguiente aspecto:
<form action="mailto:direccion@correo.com (o nombre
del archivo de proceso)" method="post"
enctype="text/plain">
Elementos de Formularios. Campos
de texto
 Vemos detenidamente los distintos
elementos de formulario que sirven para
introducir texto. Estas van desde la clásica
caja de texto, hasta la lista de opciones en un
menú desplegable, pasando por las cajas de
validación, etc.
Etiqueta INPUT para texto corto
 La etiqueta tendrá la siguiente forma:
<input type="text" name="nombre">

Aspecto de INPUT

 El nombre del elemento del formulario es de gran

importancia para poder identificarlo en nuestro
programa de procesamiento o en el mail recibido.
 Por otra parte, es importante indicar el atributo type,
ya que, como veremos, existen otras modalidades de
elementos de formulario que usan esta misma
etiqueta INPUT.
Otros atributos para la etiqueta
INPUT
Size
 Define el tamaño de la caja de texto, en

número de caracteres visibles. Si al escribir

el usuario llega al final de la caja, el texto
que escriba a continuación también cabrá
dentro del campo pero irá desfilando, a
medida que se escribe, haciendo
desaparecer la parte de texto que queda a
la izquierda.
Otros atributos para la etiqueta
INPUT
Maxlength
 Indica el tamaño máximo del texto, en número de caracteres, que

puede ser escrito en el campo. En caso que el campo de texto tenga

definido el atributo maxlength, el navegador no permitirá escribir más
caracteres en ese campo que los que hayamos indicado.

 Nota: Es importante no confundir el atributo maxlength con el atributo

size. Mientras size define el tamaño visible de la caja de texto,
maxlength indica el tamaño máximo real del texto que se puede
escribir.

 Podemos tener una caja de texto con un tamaño aparente (size) que es
menor que el tamaño máximo (maxlength). Lo que ocurrirá en este
caso es que, al escribir, si sobrepasamos el espacio marcado por size,
el texto ira desfilando dentro de la caja hasta que lleguemos a su
tamaño máximo definido por maxlength, momento en el cual nos será
imposible continuar escribiendo.
Otros atributos para la etiqueta
INPUT
Value
En algunos casos puede resultarnos interesante asignar un valor definido al campo en
cuestión.
Esto puede ayudar al usuario a rellenar más rápidamente el formulario o darle alguna
idea sobre la naturaleza de datos que se requieren.
Este valor inicial del campo puede ser expresado mediante el atributo value.

Veamos su efecto con un ejemplo sencillo:

<input type="text" name="nombre" value="Perico Palotes">

Nota:
Cuando queremos utilizar, en cualquer situación elementos de formulario, debemos
escribirlos siempre entre las etiquetas <form> y </form>.
Es por ello que para mostrar un campo de texto no vale con poner la etiqueta <input>,
sino que habrá que
ponerla dentro de un formulario. Así:
<form>
<input type="text" name="nombre" value="Perico Palotes">
</form>
Etiqueta INPUT, modalidad de texto
oculto
 type="password":
 Ejemplo:

<input type="password" name="nombre">

 Hay determinados casos en los que podemos desear

esconder el texto escrito en el campo INPUT, por
medio asteriscos, de manera que aporte una cierta
confidencialidad. Este tipo de campos son análogos a
los de texto, con una sola diferencia: remplazamos el
atributo type="text" por type="password“.
Etiqueta TEXTAREA para texto largo
Si deseamos poner a la disposición de usuario un
campo de texto donde pueda escribir cómodamente
sobre un espacio compuesto de varias líneas, hemos
de invocar una nueva etiqueta: <textarea> y su cierre
correspondiente.
 Atributos:

◦ rows
Define el número de líneas del campo de texto.
◦ cols
Define el número de columnas del campo de texto.
 La etiqueta queda por tanto de esta forma:
<textarea name="comentario" rows="10"
cols="40"></textarea>
Otros elementos de formulario
 Explicamos la sintaxis y el funcionamiento de
las cajas y listas de selección, casillas de
verificación y botones de radio.
Listas de opciones
 Las listas de opciones son ese tipo de menús
desplegables que nos permiten elegir una (o
varias) de las múltiples opciones que nos
proponen.
 Podemos ver, a partir de estas directivas, la
forma más típica y sencilla de esta etiqueta:
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
Atributos de una lista
Size
 Indica el número de valores mostrados a la vez en la lista. Lo

típico es que no se incluya ningún valor en el atributo size, en

ese caso tendremos un campo de opciones desplegable, pero
si indicamos size aparecerá un campo donde veremos las
opciones definidas por size y el resto podrán ser vistos por
medio de la barra lateral de desplazamiento.
Multiple
 Permite la selección de más varios elementos de la lista. La

elección de más de un elemento se hace como con el

explorador de Windows, a partir de las teclas ctrl o mayúsculas
(la flecha hacia arriba, también llamada shift). Este atributo se
expresa sin valor alguno, es decir, no se utiliza con el igual:
simplemente se pone para conseguir el efecto, o no se pone si
queremos una lista desplegable común.
Atributos de una lista
Selected
 Del mismo modo que multiple, este atributo no toma ningún valor

sino que simplemente indica que la opción que lo presenta esta

elegida por defecto.
Value
 Define el valor de la opción que será enviado al programa o correo

electrónico si el usuario elige esa opción. Este atributo puede

resultar muy útil si el formulario es enviado a un programa para su
procesamiento, puesto que a cada opción se le puede asociar un
número o letra, lo cual es más fácilmente manipulable que una
palabra o texto. podríamos así escribir líneas del tipo:
<option value="1">Primavera</option>
 De este modo, si el usuario elige primavera, lo que le llegara al

programa (o correo) es una variable llamada estación que tendrá con

valor 1. En el correo electrónico recibiríamos:
estacion=1
Botones de radio
La etiqueta empleada en este caso es <input> en
la cual tendremos el atributo type ha de tomar el
valor radio.
 Ejemplo:
<input type="radio" name="estacion"
value="1">Primavera
<br>
<input type="radio" name="estacion" value="2">Verano
<br>
<input type="radio" name="estacion" value="3">Otoño
<br>
<input type="radio" name="estacion" value="4">Invierno
Botones de radio
 Hay que fijarse que la etiqueta <input type="radio"> sólo
coloca la casilla pinchable en la página. Los textos que
aparecen al lado, así como los saltos de línea los colocamos
con el correspondiente texto en el código de la página y las
etiquetas HTML que necesitemos.
 Como puede verse, a cada una de las opciones se le atribuye

una etiqueta input dentro de la cual asignamos el mismo

nombre (name) para todas las opciones y un valor (value)
distinto. Si el usuario elige supuestamente Otoño, recibiremos
en nuestro correo una línea tal que esta:
estacion=3
 Cabe señalar que es posible preseleccionar por defecto una de

las opciones. Esto puede ser conseguido por medio del atributo
checked:
<input type="radio" name="estacion" value="2" checked>Verano
Cajas de validación
Este tipo de elementos pueden ser activados o
desactivados por el visitante por un simple clic
sobre la caja en cuestión.
 La sintaxis utilizada es muy similar a las

vistas anteriormente:
<input type="checkbox" name="paella">Me gusta la
paella
 Del mismo modo que para los botones de
radio, podemos activar la caja por medio del
atributo checked.
Envío, borrado y demás en
formularios HTML
Enseñamos la manera de colocar botones de
envío y borrado en formularios HTML. También
conocemos los campos invisibles y los botones
normales. Además, hacemos un ejemplo
práctico.
Botón de envío de formulario (botón
de submit)
Para dar por finalizado el proceso de relleno del
formulario y hacerlo llegar a su gestor, el navegante ha
de enviarlo por medio de un botón previsto a tal efecto.
 Ejemplo

<input type="submit" value="Enviar">

 Como puede verse, tan solo hemos de especificar que

se trata de un botón de envío (type="submit") y
hemos de definir el mensaje que queremos que
aparezca escrito en el botón por medio del atributo
value. Este tipo de campos INPUT, para envío de
formularios, a menudo se conocen simplemente como
"botones de submit".
Botón de borrado (botón de reset)
Este botón nos permitirá borrar el formulario por
completo, en el caso de que el usuario desee rehacerlo
desde el principio.
 Su estructura sintáctica es análoga a la anterior:
<input type="reset" value="Borrar“>

 A diferencia del botón de envío, indispensable en

cualquier formulario, el botón de borrado resulta
meramente optativo y no es utilizado frecuentemente.
Hay que tener cuidado de no ponerlo muy cerca del
botón de envío y de distinguir claramente el uno del
otro, para que ningún usuario borre el contenido del
formulario que acaba de rellenar por error.
Datos ocultos (campos hidden)
Son tipo de datos, que no se muestran en la página pero si
pueden ser detectados solicitando el código fuente
 Ejemplo:

<input type=hidden name="sitio" value="www.google.com">

 En algunos casos, aparte de los propios datos rellenados

por el usuario, puede resultar práctico enviar datos
definidos por nosotros mismos que ayuden al programa
en su procesamiento del formulario. Este tipo de datos,
que no se muestran en la página pero si pueden ser
detectados solicitando el código fuente, no son
frecuentemente utilizados por páginas construidas en
HTML, son más bien usados por páginas que emplean
tecnologías de servidor.
Botones normales
Dentro de los formularios también podemos
colocar botones normales, pulsables como
cualquier otro botón.
 Ejemplo:

<input type=button value="Texto escrito en el botón">

 El uso más frecuente de un botón es en la

programación en el cliente. Utilizando
lenguajes como Javascript podemos definir
acciones a tomar cuando un visitante pulse el
botón de una página web.
Etiqueta LABEL
Ese texto, que pondremos con el tag LABEL, se
asocia a un elemento concreto con el atributo
FOR, colocando como valor del atributo el
identificador del campo que se está asociando.
 Ejemplo:

<label for="edad">Edad</label> <input type="text"

name="edad" id="edad“>
 Sirve para poner texto al lado de los
elementos de formulario y que tal texto esté
asociado al propio elemento.
Ejemplo de formulario
Construir un página web como la siguiente
Frames o marcos en HTML
Los frames en HTML, o marcos si preferimos el
término en español, son una manera de
mantener fijas algunas partes de la página,
mientras se navega por las otras. Fueron en el
pasado un componente habitual de las páginas
aunque hoy en día se han quedado en desuso.
Frames en HTML
Introducción a los frames.
 Los frames –que significan en castellano marcos- son

una manera de partir la página en distintos espacios

independientes los unos de los otros, de modo que en
cada espacio se coloca una página distinta que se
codifica en un fichero HTML distinto.
 Así mismo, y dado que cada marco es independiente,

tendrán sus propias barras de desplazamiento,

horizontales y verticales, por separado.
 Podemos navegar por los contenidos de nuestro web

con la barra de navegación siempre visible, y sin que se

tenga que recargar en cada una de las páginas que
vamos visitando.
Frames - Explicación básica
Está compuesta por etiquetas
◦ <FRAMESET>
◦ <FRAME>
 La etiqueta <FRAMESET> indica las
particiones de la ventana del navegador y la
etiqueta <FRAME> indica cada uno de los
cuadros donde colocaremos una página
independiente.
Frames - Explicación básica
 Las particiones que se pueden hacer con un
<FRAMESET> son en filas o columnas. Por ejemplo,
podríamos indicar que deseamos hacer una división de
la página en dos filas, o dos columnas, tres filas, etc.
Para indicar tanto la forma de partir la ventana -en filas
o columnas- como el número de particiones que
pretendemos hacer, se ha de utilizar el atributo COLS o
ROWS. El primero sirve para indicar una partición en
columnas y el segundo para una partición en filas.
 Nota: Es importante indicar que no se puede hacer una
partición en filas y columnas a la vez, sino que
debemos escoger en partir la ventana en una de las dos
disposiciones.
Atributo COLS o ROWS
 En el atributo COLS o ROWS -sólo podemos
elegir uno de los dos- colocamos entre comillas
el número de particiones que deseamos
realizar, indicando de paso el tamaño que va a
asignarse a cada una
 Ejemplos:
◦ cols="20%,80%"
◦ rows=«15%,60%,25%"
◦ cols="200,600"
◦ cols="200,*"
◦ rows="100,*,12%"
◦ cols="10%,50%,120,*"
Atributo COLS o ROWS
 cols="20%,80%"
 Indica que se deben colocar dos columnas, la
de la izquierda tendría un 20% del espacio
total de la ventana y la de la derecha un 80%.
 rows="15%,60%,25%"
 Así indicamos que deseamos tres filas, la de
arriba con un 15% del espacio total, la del
medio con un espacio correspondiente al 60%
del total y la de abajo con un 25%. En total
suman el 100% del espacio de la ventana.
Frames - Creación de una estructura
simple
 Ejemplo de la creación de un frame simple para ilustrar lo
aprendido hasta ahora.

 Código:
<html>
<head>
<title>Definición de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
Frames - Una página en cada marco
 Vemos cómo serían las distintas páginas
independientes que componen un sitio
creado con frames.
Frames - Una página en cada marco
Pagina1.html
 Es la página que contiene el titular de la web. Simplemente se

trata de una etiqueta <H1> detitular. La página tiene su propio

título, con la etiqueta <TITLE>, que no se podrá visualizar por
ningún sitio a no ser que se muestre esta página sin los frames,
ya que las páginas dentro de los marcos heredan el título de la
definición de los frames.
<html>
<head>
<title>Titulo Carnicería Pepe</title>
</head>
<body bgcolor="#DECC09">
<h1 align=center>Carnicería PEPE</h1>
</body>
</html>
Frames - Una página en cada marco
Pagina2.html
 Es la página que se presentará en el área principal de la definición de frames, es decir, la
página que tiene más espacio para visualizarse y donde pondremos los contenidos de la web.
En este caso muestra un mensaje de bienvenida a la web, que hará las veces de portada.
<html>
<head>
<title>Portada de Carnicería PEPE</title>
</head>
<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bienvenidos a nuestra web</h1>
<br>
<br>
La carnicería PEPE, con más de 100 años de experiencia, es la mejor fuente de carnes de vacuno
y
cerdo de la comunidad.
<br>
<br>
Tanto en invierno como en verano puede encontrar nuestras ofertas de temporada de primera
calidad.
</body>
</html>
Frames - Una página en cada marco
Pagina3.html
 En esta página se mostrará la barra de navegación por los contenidos del sitio.

Contiene enlaces que deberían actualizar el contenido del área principal de la

declaración de frames, para mostrar los distintos contenidos del sitio, por ejemplo, la
portada, los productos, la página de contacto, etc.
<html>
<head>
<title>Barra de navegación de carnicería PEPE</title>
</head>
<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html">Portada</a> |
<a href="productos.html">Productos</a> |
<a href="contacto.html">Contacto</a>
</b>
</div>
</body>
</html>
Ventajas e inconvenientes del uso de
frames
 Ventajas de usar frames
◦ La navegación de la página será más rápida.
◦ Crear páginas del sitio sería más rápido
◦ Partes de la página (como la barra de navegación) se mantienen fijas
◦ Estas mismas partes visibles constantemente
◦ Mantienen una identidad del sitio donde se navega
 Inconvenientes de usar frames
◦ Quitan espacio en la pantalla
◦ Fuerzan al visitante a entrar por la declaración de frames
◦ La promoción de la página sería, en principio, más limitada
◦ A mucha gente les disgustan pues no se sienten libres en la navegación
◦ Algunos navegadores no los soportan.
◦ Los bookmarks o favoritos no funcionan correctamente en muchos casos
◦ Puede que el botón de atrás del navegador no se comporte como
deseamos
◦ Si quieres actualizar más de un frame con la pulsación de un enlace
deberás utilizar Javascript.
¿Preguntas?
Emmanuel Ortiz
Consultor Sr.
emmanueltiz@gmail.com
email / gtalk
emmanueltiz
Skype