You are on page 1of 16

1 vemos un buen ejemplo de este tipo de uso. donde sea posible introducir la palabra o frase que deseamos buscar.1. Figura 12. En la figura 12.Anterior Curso completo de HTML Formularios. en general. Formularios en HTML. únicamente es necesario un elemento. Siguiente 1. tras lo cual se mandará la información al servidor Web que la procesará y responderá enviando la información encontrada. Más adelante en la sección 'Como usar los datos de un formulario' veremos como es posible recoger y procesar esta información. . Los formularios usados en estos sistemas son. No es necesario navegar mucho tiempo por Internet para encontrar páginas Web en las que se piden datos a los navegantes. En ella vemos la página principal de Tower Communications se ofrece una caja de texto donde el usuario debe introducir una cadena de texto que desea buscar. Quizá las primeras páginas que hicieron uso de esta posibilidad fueron las de los sistemas de búsqueda. Después debe pulsar sobre el botón ENVIAR. pero por ahora nos centraremos en la creación y en el diseño de los formularios. En la página principal de Tower Communications vemos un formulario que es usado para permitir a los visitantes introducir una cadena de texto que deseen buscar. conocido como caja de texto. bastantes sencillos.

2. En general estos formularios ocupan una página entera. En la página de Tower podemos encontrar una página de sugerencias que ilustra la utilidad de esta forma de usar los formularios. que como vemos permite introducir datos en varios campos. En otra sección de la página de Tower Communications vemos un formulario más complicado formado por numerosas cajas de texto y otros elementos. ofrecer comentarios o mandar cualquier otro tipo de información.2 podemos apreciar esta página. y están formados por diversos elementos.Un caso más complejo de formularios es usado en las páginas en las que se ofrece a los navegantes la posibilidad de realizar sugerencias. . Figura 12. En la figura 12. tras rellenarlos deberemos pulsar sobre el botón 'Enviar formulario' para mandar la información.

como enseguida veremos. El único límite será nuestra creatividad. En este capítulo aprenderemos todas las posibilidades que tenemos y como usarlas adecuadamente. . su dirección de correo electrónico. Estos datos son en general texto o una serie de opciones entre las que se debe elegir una o varias.Estos dos ejemplos son probablemente los más comunes entre las páginas del WWW. Si queremos preguntar a los visitantes de nuestras páginas su nombre. Los formularios son muy versátiles. hacer un libro de visitas o simplemente pedir sugerencias necesitaremos crear formularios. y la posibilidad de interactuar con los usuarios de las páginas será útil en multitud de ocasiones. Un formulario no es más que un conjunto de elementos que permiten introducir datos a los visitantes de nuestras páginas de una manera sencilla. crear un sistema de búsqueda. pero no los únicos.

si no igual. entre las cuales podremos insertar todos los controles que deseemos. En ella adelantaremos uno de los controles más usados y sobre el que ya hemos hablado antes: la caja de texto. por lo que la caja de texto tiene el aspecto habitual en este sistema operativo. por lo que puede ser usada con total libertad. puedan mostrarlos. pero también existen métodos para que los navegadores que sólo pueden mostrar texto. Figura 12. Si visualizamos este mismo código desde un navegador de UNIX o Macintosh la caja de texto sería mostrada con la apariencia habitual en estos entornos. serán gráficos en la mayoría de navegadores. Dicho esto podemos crear nuestra primera página con un formulario. En él debemos insertar el siguiente código: <HTML> <HEAD> <TITLE>Formulario de ejemplo</TITLE> </HEAD> <BODY> <H1>FORMULARIO DE EJEMPLO</H1> <FORM> Introduzca su nombre: <INPUT TYPE="Text"> </FORM> </BODY> </HTML> Guardamos el archivo con un nombre de nuestra elección y lo abrimos con el navegador. La caja de texto es el elemento que sigue al texto 'Introduzca su nombre:'. </FORM>. Nuestro primer formulario está compuesto por una caja de texto. Un formulario no es más que un conjunto de estos controles cuya información será enviada conjuntamente cuando el usuario pulse sobre el botón de envío. En este caso estamos usando para visualizarla el navegador Internet Explorer para Windows 95. Para empezar. Para introducirla hemos usado la etiqueta INPUT con TYPE="text". como Lynx.3. que reciben el nombre de controles. Estos elementos. Al contrario que la mayoría de etiquetas que hemos visto en los últimos capítulos ésta existe desde la especificación HTML 2. Esta etiqueta consta de una instrucción de inicio. pero la usaremos en este ejemplo para hacernos una idea de cómo se crea un formulario en una página Web. . como siempre que creamos una página nueva. Para crear un formulario el lenguaje HTML proporciona la etiqueta FORM.0 y por tanto es entendida prácticamente por cualquier navegador existente actualmente. <FORM>.3. y una instrucción de fin. Un poco más adelante la trataremos más en detalle. al que apreciamos en la figura 12. creamos un archivo nuevo en nuestro editor de texto o nuestro editor HTML. El resultado será muy similar.El lenguaje HTML consta de una serie de etiquetas que permitirán crear de forma rápida y sencilla numerosos elementos de entrada de datos.

Pulsando sobre la caja de texto nos aparecerá un cursor parpadeante que nos indica que podemos empezar a escribir texto. Figura 12.4) enviaremos los datos pulsando la tecla ENTER. que será visto un poco más adelante. aunque por ahora nos . Para ello no tenemos más que pulsar con el ratón sobre ella (o seleccionarla en el caso de navegadores de texto) y escribir como si estuviésemos en un editor de texto. En este ejemplo todavía no hemos indicado al navegador dónde debe enviar los datos.4. Al no indicar la dirección de destino el navegador no mandará los datos al pulsar la tecla ENTER (o pulsar el botón de envío). El texto aparecerá según lo vamos escribiendo. Una vez hemos escrito nuestro nombre (ver figura 12. Esto se hace con el atributo ACTION de la etiqueta FORM.La gran novedad de la caja de texto respecto a todos los elementos de las página Web que hemos visto hasta ahora es que permite a los usuarios introducir texto en ella.

pero por supuesto debe seguir usándose): <H1>FORMULARIO DE EJEMPLO</H1> <FORM> <P>Introduzca su nombre: <INPUT TYPE="Text"> <P><INPUT TYPE="Submit"> </FORM> Si visualizamos este código con un navegador. Para indicar el tipo de control que queremos insertar se usa el atributo TYPE.5 vemos que al visualizar este ejemplo con Internet Explorer 4.2 veíamos que ambos formularios constaban de un botón de envío sobre el que había que pulsar para mandar los datos. Si el navegador usado es una versión inglesa. por simplicidad. Esta situación es poco deseable en la mayoría de las ocasiones. Bien. INPUT. es decir. . pero si visualizamos este código con otro puede cambiar. Si el formulario simplemente tiene uno.1 y 12. y por tanto sería más correcto usar también el termino 'enlace para enviar el formulario' .olvidaremos de este detalle. el texto del botón estará en inglés. Usando el código <INPUT TYPE="submit"> podemos insertar un botón de envío de manera que al pulsar sobre él se envían los datos del formulario. Así en podemos reescribir el código para insertar el botón como: Figura 12. veremos que la caja de texto está acompañada ahora de un botón con un texto que invita a pulsarlo para mandar los datos. que nos permitirá especificar nosotros mismos el texto que queremos que sea mostrado en el botón. de más de un campo de entrada de datos.5. por los que se creó un atributo. En los casos en los que el formulario conste de más de un control. Para crear el botón de envío debemos usar TYPE="submit". que permite insertar varios tipos de controles. en los ejemplos de la figura 12. como ocurre en este primer ejemplo que hemos realizado nosotros. pero ¿cómo se crea un botón de envío? El lenguaje HTML consta de una etiqueta. debemos añadir esta etiqueta (de ahora en adelante omitiremos las etiquetas HTML. Pero ¿no existía un botón de envío? Si. este texto ha sido puesto por defecto por este navegador. seguiremos usando únicamente el término botón. HEAD y BODY. Sin embargo. VALUE. Los botones de envío son mostrados como enlaces normales en los navegadores de sólo texto. Por tanto si en el ejemplo anterior queremos insertar uno. entre los que se encuentra el botón de envío. será necesario incluir el botón. En la figura 12.0 aparece el texto 'Enviar consulta' en el botón. el navegador es capaz de entender que al pulsar la tecla ENTER el usuario quiere mandar los datos de ese formulario. y por tanto el uso de botón de envío es opcional.

Aunque lo habitual es incluir un único botón de envío el lenguaje HTML permite la posibilidad de incluir varios.6.<P><INPUT TYPE="Submit" VALUE="Envíeme"> Con lo que el resultado obtenido sería el que apreciamos en la figura 12. Con el atributo VALUE podemos cambiar el texto por defecto del botón de envío por uno de nuestra elección. para dar un nombre a cada uno que permita al servidor diferenciar cual se ha pulsado. En este caso en el botón el mensaje es 'Envíeme' y será éste siempre. NAME. En esta misma figura podemos apreciar que el tamaño del botón se adapta a la longitud del texto que pongamos en él.6. En este caso debemos usar un nuevo atributo. independientemente del navegador que usemos para visualizar la página. El ancho del botón se adaptará a la longitud del texto. Figura 12. Este nombre .

Cómo hacer un formulario sólo con CSS Copia el siguiente código HTML dentro del tag <body> de tu página web: <div id=‖stylized‖ class=‖myform‖> < form id=‖form‖ name=‖form‖ method=‖post‖ action=‖index. a estudiar cada uno de los controles existentes en el lenguaje HTML.será enviado junto con los datos cuando se pulse sobre el botón. De esta forma es posible realizar acciones diferentes dependiendo de sí se pulsa uno u otro. A continuación aprenderemos a insertar los distintos tipos de controles existentes y crearemos formularios más complejos que hasta ahora. Cuando se pulse el botón de envío se enviará los datos de cada control junto con el nombre especificado con este atributo. sin esperar más tiempo. De esta forma el servidor podrá saber el control en que se ha insertado cada dato. Por ejemplo podían incluirse botones que simulasen distintas direcciones a las que acceder tras introducir los datos: <INPUT <INPUT <INPUT <INPUT TYPE="Submit" TYPE="Submit" TYPE="Submit" TYPE="Submit" VALUE="Arriba" NAME="arriba"> VALUE="Izquierda" NAME="izquierda"> VALUE="Derecha" NAME="derecha"> VALUE="Abajo" NAME="abajo"> Es importante indicar que el atributo NAME no debe usarse únicamente para el botón de envío.html‖> < h1>Sign-up form</h1> < p>This is the basic look of my form without table</p> <label>Name < span class=‖small‖>Add your name</span> < /label> < input type=‖text‖ name=‖name‖ id=‖name‖ /> <label>Email . por esta razón deberemos usar NAME en cada uno de los controles. Recordemos brevemente todos los atributos de la etiqueta INPUT cuando la usamos para insertar el botón de envío: <INPUT TYPE="Submit" NAME="Nombre" VALUE="Texto del botón"> Pasemos.

Helvetica. dentro del <head> de la página: body{ font-family:‖Lucida Grande‖. size 6 chars</span> < /label> < input type=‖text‖ name=‖password‖ id=‖password‖ /> <button type=‖submit‖>Sign-up</button> < div class=‖spacer‖></div> </form> < /div> Para que se entienda a qué responde cada elemento. sans-serif. Arial. ―Lucida Sans Unicode‖.< span class=‖small‖>Add a valid address</span> < /label> < input type=‖text‖ name=‖email‖ id=‖email‖ /> <label>Password < span class=‖small‖>Min. } . veamos la siguiente imagen: Ahora copia el código CSS que ves a continuación. font-size:12px. Verdana.

font-weight:bold. color:#666666. font-weight:normal. margin-bottom:8px. } #stylized p{ font-size:11px.} /* ———– My Form ———– */ . padding:14px. background:#ebf4fb. font-weight:bold. button{border:0. padding:0. float:left. text-align:right. margin-bottom:20px. margin:0. border-bottom:solid 1px #b7ddf2.myform{ margin:0 auto.spacer{clear:both.small{ color:#666666. } #stylized . width:140px.p. . padding-bottom:10px. text-align:right. display:block. } /* ———– stylized ———– */ #stylized{ border:solid 2px #b7ddf2. } #stylized label{ display:block. font-size:11px. } #stylized h1 { font-size:14px. h1. form.} . height:1px. width:400px.

} En HTML. font-weight:bold. text-align:center. . font-size:12px.png) no-repeat. color:#FFFFFF. etc. Explicaremos el significado de estos elementos especiales y cómo generar formularios en HTML. elementos especiales llamados controles (checkboxs. border:solid 1px #aacfe4. width:125px. radiobuttons. En HTML un formulario puede contener cosas muy variadas: texto normal. } #stylized button{ clear:both. comboboxs. background:#666666 url(img/button.). un formulario es una sección del documento destinada a que el usuario introduzca datos que van a ser enviados a algún lado. width:200px. y otros elementos especiales denominados etiquetas (labels). height:31px. line-height:31px. margin:2px 0 20px 10px.width:140px. } #stylized input{ float:left. font-size:11px. margin-left:150px. padding:4px 2px.

01 Transitional//EN" "http://www. Escribe el siguiente código en un editor y guárdalo como ejemplo. seleccionando objetos de un menú.aprenderaprogramar. ya sea introduciendo texto.com</title> </head> <body> <form action="http://www.org/TR/html4/loose.com" method="get"> <p> <label for="nombre">Nombre: </label> <input type="text" name="nombre" id="nombre"> <br/> <br/> <label for="apellido">Apellido: </label> <input type="text" name="apellido" id="apellido"> <br/> <br/> <label for="email">Email: </label> <input type="text" name="email" id="email"> <br/> <br/> <input type="radio" name="sexo" id="varon" value="Varón"> .w3. antes de enviar el formulario y que éste sea procesado. No te preocupes ahora si no entiendes algunos de los elementos que aparecen.. etc.dtd"> <html> <head> <title>Ejemplo del uso de formularios . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. porque los iremos explicando poco a poco.Los usuarios normalmente "completan" un formulario modificando sus controles.html para que puedas visualizarlo en tu navegador.aprenderaprogramar.

<label for="varon">Varón: </label> <br/> <br/> <input type="radio" name="sexo" id="mujer" value="Mujer"> <label for="mujer">Mujer: </label> <br/> <br/> <input type="submit" value="Enviar"> <input type="reset"> </p> </form> </body> </html> La visualización que debes obtener es algo parecido a la siguiente imagen. .

jsp… que son tipos de páginas web que permiten realizar otro tipo de funciones más avanzadas relacionadas con la programación. como es la escritura en bases de datos para almacenar la información. la información se envía al servidor y se utiliza para algo. Cuando la nueva URL recibe la información pueden ocurrir varias cosas: que se muestre en pantalla. que se escriba en una base de datos. Cuando pulsamos en “Enviar”. . sí podemos recoger la información en un formulario o página web HTML y luego acceder a una dirección web de tipo php. asp. no podemos escribir en una base de datos usando HTML.Supón que hemos rellenado los datos de este formulario. Por ejemplo. ¿Qué utilidad se le puede dar a esta información? En general. que nos muestre una imagen distinta según la información que hayamos enviado… Algunas de las cosas que hemos citado no se pueden hacer usando HTML. Sin embargo. un formulario html nos sirve para acceder a otra URL (dirección web) que recibe la información.

.que sea un nuevo año de mucho mas aprendizaje y hartos desafios.. un abrazote gigante y un feliz cumpleaños!!! Que sea un nuevo año de mucho mas aprendizaje y hartos desafios.. espero que hayas pasado un gran día con toda la gente que te quiere.. !!! cuídate… .feliz cumple!!! Dios te Bendiga y cumpla todos los deseos de tu corazon..bendiciones!! Feliz muy Feliz Cumple!!! Los deseos de tu corazon los conoce perfectamente uno a uno y en gran manera te bendice.Dios guarde tu vida y todos tus Saly....