ElTicus.com

Programación, lenguajes y recursos para programadores

manual
Curso Bsico de HTML
Introduccin a la programacin de pginas Web
Publicado por JL Fecha: 2006-12-02 01:20:00 Idioma: Espaol Tipo de documento: manual
Descargar como PDF

Curso de HTML Bsico

Curso bsico de HTML

Gua para principiantes

(Curso para introducir a alguien a la programacin de pginas web)



Formularios

Los formularios nos permiten dentro de una pgina Web solicitar informacin al visitante y procesarla. En un formulario podremos solicitar diferentes datos (campos) 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 direccin (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este ltimo paso de procesar las variables necesitaremos realizar un programa externo en algun lenguaje de programacin como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creacin de este tipo de programas sera tema de otro curso diferente, por lo que aqu veremos como se pueden enviar las variables a nuestra direccin de correo electrnico.

La declaracin del formulario se pone entre las directivas <FORM></FORM>. En el interior de la declaracin se indican los elementos (variables) de entrada. La directiva <FORM> tiene los parmetros action y method.

action = "programa"

Indica el programa que va a "tratar" a las variables que se envien con el formulario. En nuestro caso enviaremos las variables por correo electrnico, con lo que el "programa" ser "mailto: direccion_de_correo".

method = POST / GET

Indica el mtodo segn el que se transferiran las variables. POST produce la modificacin 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 pgina de bsqueda en Internet).

Campos de Entrada

Para la introduccin de las variables se utiliza la directiva <INPUT>. Esta directiva tiene el parmetro 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 parmetros.

type= text name = campo

Indica que el campo a introducir ser un texto. Sus parmetros son :

maxlenght = numero

Numero mximo de caracteres a introducir en el campo.

size = numero

Tamao 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 sera una palabra de paso. Mostrar asteriscos (*) en lugar de las letras escritas.
Sus parmetros opcionales son los mismos que para text.

type = checkbox name = campo

El campo se elegir marcando una casilla. Se permite marcar varias casillas. Los valores de las casillas sern indicados por :

value = "valor"

checked

La casilla aparecera marcada por defecto.

type = radio name = campo

El campo se elegira marcando una casilla. Solo permite marcar una sola de las casillas. Los valores de las casillas seran indicados por :

value = "valor"

type = image name = campo

El campo contendra el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parmetro :

src = "archivo de imagen".

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 parmetro :

value = "valor"

type = submit

Representa un botn. Al pulsar este botn la informacin de todos los campos se enva al programa indicado en <FORM>. Tiene el parmetro value = "texto" que indica el texto que aparecer en el boton.

type = reset

Representa un botn. Al pulsar este botn se borra el contenido de todos los campos. El parmetro value = "texto" indica el texto que aparecer en el botn.

Campos de Seleccion

Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus parmetros son :

name = campo

Nombre del campo

size = num

Numero de opciones visibles. Si se indica 1 se presenta como un men desplegable, se se indica mas de uno se presenta como una lista con barra de desplazamiento.

multiple

Permite selecionar mas de un valor para el campo.

Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede incluir el parametro selected para indicar cual es la opcion por defecto. En caso de que no se especifique, se tomara por defecto la primera opcin de la lista.

Areas de texto.

Representa un campo de texto de mltiples lineas. Normalmente se utiliza para que se incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parmetros :

name = campo

Nombre del campo.

cols = num.

Numero de columnas de texto visibles.

rows = num.

Numero de filas de texto visibles.

wrap = VIRTUAL / PHYSICAL

Justifica el texto automticamente en el interior de la caja. La opcin PHYSICAL envia las lineas de texto separadas en lineas fsicas. La opcin VIRTUAL envia todo el texto seguido.

Veamos a continuacin un ejemplo de formulario utilizando todas las formas de introduccion de datos.

<FORM action = "mailto: cenedic@ucol.mx" 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 ="Mapthis" > Programa Mapthis
<INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 aos
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 aos
<INPUT type = radio name = edad value = "+40" > Mas de 40 aos
<P>
<INPUT type = hidden name = lugar value = "pagina personal" >
Como encontraste mi pgina :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Ole
<OPTION>Por el buscador Yahoo
<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 pgina Web :

Tu Nombre: Tu Clave:

Archivos a Enviar:
Manual de Html Programa Mapthis Archivo de Ayuda

Tu Edad :
Menos de 20 aos
Entre 20 y 40 aos
Mas de 40 aos

Como encontraste mi pgina :

Tus Comentarios:

Si rellenas este FORM y pulsas sobre el botn Enviar, (estando conectado a Internet), se generar un mensaje de correo a mi direccion de correo luisfd@jet.es. Si pulsas el boton Borrar se borraran los datos que hayas introducido en el Formulario.
El texto que se recibira por correo electrnico sera parecido a este:

nombre=Pedro+Perez &clave=12345678 &archivo=Manual &archivo=Mapthis &edad=20-40 &lugar=pagina+personal &donde=Por+el+buscador+Ole &comentario%94= Espero+que+me+mandes+los%0D%0Aarchivos+antes+del+martes%0D%0A%0D%0AS aludos.%0D%0A

Podemos observar que en el correo se separan las variables con el smbolo &, los espacios se sustituyen por el signo + y se representan los cdigos de retorno de carro y avance de lnea del campo de texto con los caracteres %0D y %0A respectivamente.

Si en vez de enviar estas variables por correo electrnico, fuesen enviadas a un programa (CGI), este programa podra tratarlas y dar como respuesta una nueva pgina Web.


IMPORTANTE: La opcin mailto: en el parmetro action de la directiva FORM solo funciona correctamente con aquellos navegadores que tengan incorporado un programa de correo.


 

Se puede, adems, 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 parmetro "OnClick". Ejemplo :

 

<FORM>
<SELECT name = "list" >
<OPTION SELECTED value="http://web.ucol.mx/usuario2">Mi Pagina Web
<OPTION value="http://www.microsoft.com">Microsoft
<OPTION value="http://www.ibm.com">Ibm
<OPTION value="http://www.novell.com">Novell
<OPTION value="http://www.hp.com">Hewlett Packard
<OPTION value="http://www.fujitsu.com">Fujitsu
<OPTION value="http://www.3com.com">3Com
</SELECT>
<INPUT TYPE=BUTTON value="Ir a..."
onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</FORM>

Este seria el efecto producido:


<< Tema anterior Tema siguiente >>



Hay 220 comentarios sobre este tema por parte de los lectores


Haz un comentario sobre este tema
Nombre email (no se muestra)
comentario:
Escribe las 2 letras que ves aqu: Imagen anti-spam =

Los ltimos 5 comentarios colocados son:

1. Comentario de SandorinaBaw el 2017-12-11 22:10:43
Всем привет, хочу проинтересоваться и обсудить такой вопрос как \"куда можно продать или же где можно купить наших домашних питомцев\"?

Почему подняла такой вопрос, просто хотелось бы попробовать себя в качестве заводчика, но вот только где продавать непонятно, не на базар же с ними выходить....

Давайте обсуждать, кто где покупает и кто куда продаёт.

2. Comentario de Traceem el 2017-11-20 06:52:55
СЕРВИС ДЛЯ ПРИВЛЕЧЕНИЯ КЛИЕНТОВ ИЗ ИНТЕРНЕТА.
Комплексное интернет-продвижение сайтов без посредников и переплат в одном месте!
Сбор различных баз для продвижения в интернете
Эффективно и недорого. Писать в ICQ 656310373

3. Comentario de Content Spinning el 2017-11-17 13:56:44
Le content spinning permet dautomatiser la génération textuels unique de manière aisée. cette manière de faire consiste à paraphraser des textes déjà existant, ce qui permet davoir un gain de temps efficacement. Il existe plusieurs logiciels et outils de spinning de contenu mais aucun ne permet de réaliser du contenu de bonne qualité sans perdre trop de temps. Avec Content-spinning. fr, vous pouvez enfin automatiser la réalisation de vos master-spins !

4. Comentario de AnthonyMaf el 2017-11-15 16:15:08

You actually mentioned it exceptionally well!
canadianpharmaciesbnt.com
canadapharmacy

5. Comentario de AlexDum el 2017-11-01 09:24:16
Компания выполняет ремонты жилых и нежилых помещений. от фундамента, проекта, дизайна, до реализации конечного результата.


VER TODOS LOS MENSAJES (220)...