UNIVERSIDAD NACIONAL AUTONOMA DE MEXICO FACULTAD DE INGENIERIA

Tarea 8

Aguayo Moya Adolfo Esa

Los formularios Los formularios son usados para que el usuario ingrese datos. Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a un servidor web, a un servidor de email, etc.). La etiqueta form La etiqueta <form> se utiliza para definir un formulario. El atributo action es obligatorio y nos indica el documento que procesar los datos del formulario enviado. Tambin contamos con el atributo method que nos define el mtodo por el cual se enviarn los datos del usuario al servidor. Sintaxis <form action="URL" method="valor">...</form> La etiqueta input Nos define el registro donde el usuario puede ingresar los datos. Los usuarios interaccionan con los formularios a travs de las llamados controles. Tipos de controles: Botones (buttons) Casillas de verificacin (checkboxes) Radiobotones (radio buttons) Menes (menus) Entrada de texto (text input) Seleccin de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls) El atributo type especifica el tipo de control a crear. Sintaxis </form> <input type="control" atributo="valor"></form>

El control "text" Crea un control que nos permite ingresar un texto en una lnea. Ejemplo Cdigo <form action="datos.php" method="get"> Nombre: <input type="text" name="nombre"> Apellido: <input type="text" name="apellido"> </form> Nombre: Apellido: Resultado

Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo El control "radio" Se usa cuando queremos que el usuario elija una sola opcin de entre una serie de posibilidades. Ejemplo Cdigo <form action="edades.asp" method="post"> Edad? <input type="radio" name="edad" value="menor">menor de 17 <input type="radio" name="edad" value="adulto">entre 18 y 60 <input type="radio" name="edad" value="mayor">mayor de 61 </form> Edad? menor de 17 entre 18 y 60 mayor de 61 Resultado

Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio. La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese el formulario. El control "checkbox" Permite al usuario elegir varias opciones entre todas las posibilidades. Ejemplo Cdigo <form action="hobbie.php" method="get"> Pasatiempos? <input type="checkbox" name="pasa" value="tv">TV <input type="checkbox" name="pasa" value="libros">Libros <input type="checkbox" name="pasa" value="musica">Msica TV Libros Resultado Pasatiempos?

<input type="checkbox" name="pasa" value="otros">Otros </form>

Msica Otros

Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox. La propiedad value asigna un valor al elemento que ser utilizado por el documento que procese el formulario. El control "password" Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseas. Ejemplo Cdigo <form action="verificacion.php" method="post"> Nombre: Nombre: <input type="text" name="nombre"> Password: <input type="password" name="pass"> Password: </form> El control "submit" y el control "reset" El control submit es el botn de envio de datos del formulario y el control reset es el botn de reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores iniciales. Ejemplo Cdigo <form action="datos_personales.php" method="post"> Nombre: <input type="text" name="nombre"> Contrasea: <input type="password" name="secreto"> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form> Nombre: Contrasea:
Enviar Borrar

Resultado

Resultado

Nota: el valor de la propiedad value define el texto dentro del botn. El control "file" El control file nos permite enviar archivos por medio de un formulario.

Ejemplo Cdigo <form action="archivo.php" method="post"> Ingrese la foto: <input type="file" name="foto"> </form> El control "hidden" El control hidden nos permite enviar informacin oculta a los ojos del usuario. Ejemplo Cdigo <form action="oculto.php" method="post"> Nombre: <input type="text" name="nombre"> Contrasea: <input type="password" name="contra"> <input type="hidden" value="cookie"> </form> El control "image" El control image nos permite utilizar una imagen personalizada como botn de un formulario. Ejemplo Cdigo <form action="archivo.php" method="post"> Nombre: <input type="text" name="nombre"> Contrasea: <input type="password" name="contra"> <input type="image" src="/enviar.jpg"> </form> Nombre: Contrasea: Resultado Nombre: Contrasea: Resultado Ingrese la foto: Resultado

Las etiquetas select y option La etiqueta <select> es usada para crear un men desplegable. Cada opcin ofrecida por el men se representa con la etiqueta <option> Ejemplo Cdigo <form action="continentes.php" method="get"> <select name="continente"> <option value="america">Amrica</option> <option value="asia">Asia</option> <option value="europa">Europa</option> <option value="oceania">Oceana</option> <option value="africa">Africa</option> </select> </form> Resultado

La etiqueta textarea Se usa para crear un control de entrada de texto multilnea. Los atributo rows y cols nos indican la cantidad de filas y columnas que tendr el recuadro del rea de texto. Ejemplo Cdigo <form action="texto.php" method="post"> <textarea name="eltexto" rows="5" cols="30"> Aqu podemos ingresar un texto introductorio si lo deseamos. </textarea> </form> Resultado

Etiquetas y atributos de los formularios Etiquetas <form> Atributos Valor Descripcin Define un formulario para el ingreso de datos. Especifica un archivo procesador del formularios. Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejar correctamente. Especifica la lista de codificacin de caracteres para los datos introducidos que son aceptados por el servidor que procesa este formulario. Especifica el tipo de contenido usado para enviar el formulario al servidor. Especifica que mtodo HTTP se usar para enviar el conjunto de datos del formulario. Debera usarse cuando los datos del formulario no tienen efectos secundarios. Debera usarse cuando el formulario causa efectos secundarios(p.ej., subscripcin a un servicio o modificar una base de datos. Da nombre al elemento de modo que se pueda hacer referencia a l desde hojas de estilos o scripts. El URL se abrir es una nueva ventana. El URL se abrir en el mismo frame donde fue apretado. El URL se abrir en el frameset padre. El URL se abrir en una ventana de tamao completo. Define el tipo de control de entrada. Ej

action Obligatorio accept

URL Lista de tipos de contenido

accept-charset

Lista de codificacin de caracteres tipo de contenido

enctype method

get

post

name

cdata

target

_blank _self _parent _top

<input>

accept

Lista de tipos de contenido

align

alt

left right top texttop middle absmiddle baseline bottom absbottom texto

Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejar correctamente. Nota: Usar solo con type="file". Define el alineamiento del texto siguiente a la imagen. Nota: Usar solo con type="image".

checked

disabled

maxlength

nmero

name

nombre de control

readonly

size

nmero de caracteres URL

src

Define un texto alternativo para la imagen. Nota: Usar solo con type="imagen". Especifica que el botn esta marcado("on"). Nota: Usar solo con type="radio" o type="checkbox". Deshabilita el control para la entrada de datos por parte del usuario. Nota: No debe usarse con type="hidden". Nmero mximo de caracteres que puede introducir el usuario. Nota: Usar solo con type="text" o type="password". Asigna el nombre de control. Nota: Este atributo es requerido para type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", type="radio". Indica que el valor no puede ser modificado por el usuario . Nota: Usar solo con type="text". Define el tamao del elemento input. Nota: No debe usarse con type="hidden". Define el URL de la imagen a mostrar. Nota: Usar solo con type="image".

type

value

checkbox file hidden image password radio reset submit text valor

Especifica el tipo de control a crear.

<textarea> col Obligatorio rows Obligatorio disabled name readonly <label> for <fieldset> <legend> align Desaprobado top bottom left right idref nmero nmero

nombre del rea de texto

<select> disabled multiple

Para los botones: reset y submit: define el texto en el botn. checkbox y radio: (requerido) define el resultado del elemento input cuando es pulsado. hidden, password y text: define el valor por defecto del elemento. Define un rea de texto(multi-lnea). Nmero de columnas visibles en el rea de texto. Nmero de filas visibles en el rea de texto. Deshabilita los controles de entrada. Especifica un nombre para el rea de texto. El usuario no puede modificar el contenido en el rea de texto. Adjunta informacin a los controles. Referencia a una palabra ID definida por otro atributo. Dibuja un recuadro alrededor de los elementos. Permite a los autores asignar un ttulo a un fieldset. Especifica la posicin de la leyenda con respecto al fieldset.Use las propiedades de ubicacin de CSS en su lugar. Crea un men desplegable. Deshabilita el men. Si est activado permite selecciones mltiples.

name size <optgroup> label Obligatorio disabled <option> label

nombre nmero

texto

texto

disabled selected value <button> disabled name type nombre button reset submit valor texto

Define un nico nombre para un men desplegable. Define el nmero visible de Items en el men desplegable. Permite a los autores agrupar opciones logicamente. Especifica el rtulo del grupo de opcin. Deshabilita los controles de entrada.No funciona en IE Define una opcin en los mens desplegables. Permite escribir de forma sintetizada el conternido del atributo <option>. El navegador debera mostrar este valor en lugar del contenido de <option>. Deshabilita los controles de opcin. No funciona en IE Especifica que opcin aparecer como seleccionada. Especifica el valor inicial del control. Define un botn. Deshabilita el botn. Especifica un nombre para el botn. Define el tipo de botn.

value <isindex> Desaprobado

Asigna un valor inicial al botn. Use <input> en su lugar.

Atributos estndard id, class, title, style, dir, lang, acceskey, tabindex

Marcos Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendr sus bordes y sus propias barras de desplazamiento. As cada pgina se dividir en la prctica en varias pginas independientes. Para crearlos necesitaremos un documento HTML especfico, que llamaremos documento de definicin de marcos. En l especificaremos el tamao y posicin de cada marco y el documento HTML que contendr. Vamos a ver un ejemplo de este tipo de documento: <HTML> <HEAD> <TITLE>Mi primera pgina con marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAME NAME="principal" SRC="introduccion.html"> <NOFRAMES> <P>Lo siento, pero slo podrs ver esta pgina si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </HTML> Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos ponindoles un nombre y especificando qu fichero HTML le corresponde mediante la etiqueta <FRAME>. Por ltimo, especificamos lo que ver el usuario en el supuesto (cada vez ms raro) de que su navegador no soporte frames dentro de la etiqueta<NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle. Etiqueta <FRAMESET> Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada marco, pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un par de parmetros ms.

En general, los navegadores dibujan un borde de separacin entre los marcos. Si deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parmetro FRAMEBORDER=0 en el <FRAMESET>. Cuando eliminas ese borde, podrs ver cmo el navegador deja an un hueco entre marcos. Este se elimina aadiendo los parmetros FRAMESPACING=0 BORDER=0. Vamos a examinar por ltimo los parmetros COLS y ROWS. Deberemos asignarles una lista de tamaos separada por comas. Se admiten los siguientes formatos de tamao:

Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un marco como un porcentaje del espacio total disponible. Absolutos: Si ponemos un nmero a secas, el marco correspondiente tendr el tamao especificado en pixels. Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este smbolo en varios marcos, que se repartirn el espacio equitativamente como buenos hermanos. Si queremos que uno tenga ms deberemos ponerle al asterisco un nmero delante. As, un marco con un espacio de 3* ser tres veces ms grande que su compaero, que tiene un asterisco slo, el pobre.

Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos: <FRAMESET COLS="10%,*,200,2*"> Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupar el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este ltimo y 316 para el cuarto marco. Hay que tener cuidado cuando usamos valores absolutos en la definicin de marcos; debemos asegurarnos de tener al menos un marco con un tamao relativo si queremos estar seguros del aspecto final de la pgina. Por ltimo, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que as: <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal" SRC="introduccion.html"> <FRAME NAME="ejemplos" SRC="ejemplo.html">

</FRAMESET> </FRAMESET> El resultado del anidamiento lo podris contemplar aqu.

Etiqueta <FRAME> Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un conjunto de ellos. Estos son los parmetros que admite: Parmetro NAME SRC SCROLLING NORESIZE Utilidad Asigna un nombre a un marco para que despus podamos referirnos a l. Indica la direccin del documento HTML que ocupar el marco. Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defectoAUTO, que deja al navegador la decisin. Las otras opciones que tenemos son YES y NO. Si lo especificamos el usuario no podr cambiar de tamao el marco.

Al igual que su homnimo en la etiqueta <FRAMESET>, si lo igualamos a FRAMEBORDER cero se eliminar el borde con todos los marcos contiguos que tengan tambin este valor a cero. MARGINWIDTH Permite cambiar los mrgenes horizontales dentro de un marco. Se representa en pixels.

MARGINHEIGHT Igual al anterior pero con mrgenes verticales.

Acceso a otros marcos Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva pgina a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de ndice y otro donde mostramos los contenidos sera deseable que los enlaces del marco ndice se abrieran en el otro marco. Esto es posible hacerlo gracias al parmetro TARGET. Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el ltimo modificaremos el marco en el que por defecto se nos muestran todos los enlaces. Pero para que un parmetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepcin. Para indicarle el marco que deseamos le asignaremos el nombre del

mismo. As, en los ejemplos anteriores, si en el marco llamado indicetenemos un enlace que queremos se abra en el marco principal pondremos: <A HREF="pagina.html" TARGET="principal"> Tambin existen cuatro nombres reservados que podremos utilizar en el parmetroTARGET: _top Elimina todos los marcos existente y muestra la nueva pgina en la ventana original sin marcos. _blank Muestra la nueva pgina en una ventana nueva y sin nombre del navegador. _self Muestra la nueva pgina en el marco donde est declarado el enlace. _parent Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la separacin entre los marcos ejemplo y principal y mostrara en ese nuevo marco la nueva pgina. Nota Marcos: Los marcos son las distintas ventanas en que se puede dividir la pantalla cuando estamos viendo una pgina de Internet. Cada una de esas ventanas es independiente, y una de ellas, generalmente la ms grande, suele ser la principal. Lo normal es que haya dos o tres ventanas cuando se utilizan marcos, pero puede haber ms. Un ejemplo de marcos, sin ir ms lejos, es esta pgina del curso de FrontPage Express. Tenemos una ventana a la izquierda, que es el sumario o ndice del curso, y otra ventana que ocupa el resto de la pantalla, que es la principal. Las dos ventanas son documentos distintos que se elaboran por separado, pero hay que conectarlos para que funcionen a la vez en la pantalla