Manual HTML de cx1ddr

Un formulario es un método bueno para que las personas que entren en nuestras páginas nos envíen un reporte mediante un libro de firmas, este es uno de los usos.
Consta principalmente por medio del código de programación CGI.
Al final de esta página, tienen un formulario completo que pueden utilizar si lo desean o les resulta muy complicado, copie todos los código al block de notas.
El fin de este manual no es enseñar programación, pero si podemos dar unas nociones básicas para que ustedes puedan diseñar su propio libro de firmas.
La etiqueta utilizada es <form> </form>, seguida por medio de la acción (action), que es de que manera queremos que ese formulario nos llegue, él más común es por correo electrónico; método (method), que puede indicar si el formulario es enviado al pulsar un botón o de otra manera y por ultimo, enctype, que le va a indicar a la persona si va encriptada o no, ese formulario.
Si ustedes se fijan en mi página principal, hay un libro de firmas un poco más complicado de lo normal, pero para que tengan una noción mas concreta, un formulario básico es:

Form = Es la etiqueta
action="aaa" = Es el método de envío del formulario, en nuestro caso se usara mailto:"correo electrónico".
method="bbb" = Esto será como se transfieren los datos, para un libro de firmas se utiliza post, pero puede ser cualquiera de los métodos utilizados por el http.
enctype="ccc" = Esto es la codificación del formulario, nosotros utilizaremos text/plain, nos indica que se recibe el texto sin codificar.

Para introducción de datos, se utiliza la etiqueta INPUT, seguido de los parámetros.
Esta deberá ser integrado para cada uno de los datos que coloquemos.
Para poner un simple ejemplo:

type= es el tipo de datos a introducir
name= es la variable, donde se almacena la entrada, esto se refiere al nombre
value= se le puede dar un valor, no es lo mas común
size= es el tamaño de la ventana, esta dada en caracteres

<form enctype="multipart/form-data" action="http://www.qsl.ne/cx1ddr" method="post">
Enviar la ficha:
<input name:"fichero" type="file">
<input type="SUBMIT" value="Enviar ahora" name="SUBMIT">
</form>

TYPE=FILE Este es un nuevo tipo que sólo funciona con Netscape 3.0 o superior, y sirve para enviar un fichero a una máquina remota (hacer FTP), pero no funciona solo, necesita de ciertos acompañantes que hacen su uso un poco más complicado: Aquí hay que echar mano de un atributo parametrizado de <form>:
ENCTYPE="multipart/form-data" para generar un botón que permitirá buscar un fichero en nuestra máquina, ponerlo en una ventanita de entrada como las ya conocidas (por tanto también se puede escribir directamente el nombre del fichero en lugar de buscarlo) y junto con un botón tipo submit enviar el fichero.

Los parámetro TYPE, van todos precedidos de la variable <INPUT>, TYPE por su parte, indica que tipo de variable es y NAME, indica el nombre que se le dará al campo.
Recuerde que cada variable, tendrá un campo.

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 será " ", o sea, vacío

TYPE = RESET Es un botón que al ser presionado se borra el contenido del campo.
El parámetro value, indica el texto que aparecerá en el botón.

TYPE=SUBMIT Al presionar este botón, los datos son enviados al programa que se indique.
El parámetro value, indica el texto que aparecerá en el botón.

TYPE = HIDDEN NAME = CAMPO El usuario no podrá modificar su valor, este es enviado por el parámetro value="valor"

TYPE=checkbox Tiene el mismo efecto que el de radio, la diferencia es que, en vez de redondos los botones, son cuadrados los botones. Para marcar varias casillas, se deberá de poner VALUE = "VALOR"
Para marcar una casilla por defecto, deberemos introducir el parámetro CHECKED

TYPE = PASSWORD NAME = CAMPO Este indicara que el campo será una palabra de paso. Estas palabras las mostrara con el signo: *****, en el lugar de las letras escritas.
Los parámetros opcionales, son idénticos que para los de TYPE = TEXTO
Pongamos un ejemplo de palabra clave.
Supongamos que tengo una página que se llama SOFTWARE.HTM o SOFTWARE.HTML, y que solo las personas que conocen el nombre puedan entrar.
Para ello pondremos entre las etiquetas <HEAD></HEAD>, debajo de <TITLE></TITLE>, los siguientes parámetros de JAVA.

<HEAD>
<TITLE>Página Protegida</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Saltar(pal) {
window.location=pal+".html"
}
</SCRIPT>
</HEAD>

Debajo de BODY, pondremos:

<BODY>
<FORM>
Introduce la palabra clave para acceder a la página
<P>
<INPUT TYPE="password" NAME="palclave" SIZE=25 VALUE="">
< INPUT TYPE="button" VALUE="Acceder"
onClick="Saltar(this.form.palclave.value)"">
</FORM>
</BODY>
</HTML>

Esto funciona de la siguiente manera ,una vez escogida la clave (en nuestro caso SOFTWARE), debemos dar a la página de acceso restringido precisamente este nombre: software.html, es decir, se debe dar a la página restringida el nombre compuesto por la clave, más la extensión .html (o .htm)
No hay que cambiar ni añadir nada en el script.
Si se utiliza las extensiones .htm en vez de .html la página se llamaría software.htm pero entonces hay que sustituir la línea del script window.location=pal+".html" por window.location=pal+".htm"

El usuario lo único que tendrá que hacer es poner el nombre de la página, sin la extensión y apretar ACCEDER.
Si el usuario aprieta ENTER o INTRO, después de colocar el nombre de la página, la página no entrara y que dará en el mismo lugar que estaba.

TYPE=IMAGE Con este comando podremos agregar una imagen a nuestros formularios. Tienen la particularidad que es sensible al mouse y muy efectivo para adornar la página.
Para una imagen, deberemos delimitar los campos de la misma, para ello, se utilizan las coordenadas X,Y seguidos de un valor numérico. Veamos un ejemplo:

<FORM METHOD="POST" ACTION="mailto:cx1ddr@hotmail.com">
<INPUT TYPE=IMAGE NAME="imagen" SRC="email.gif">
</ FORM>

TYPE=RADIO Si lo que usted desea son botones circulares con selección predeterminada, este es el comando. Vean los comandos y como queda:

<FORM METHOD="POST" ACTION="mailto:cx1ddr@hotmail.com">
Boton A<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Boton B<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
< INPUT TYPE="RESET" VALUE="Mandar">
</form>

SELECT Este comando nos sirve para colocar una lista predeterminada y SELECTED, para seleccionar que opción queremos que se vea primero. Como por ejemplo:

<FORM METHOD="POST" ACTION="mailto:cx1ddr@hotmail.com">
<SELECT NAME="lista1">
<OPTION>Esto es dificil
<OPTION>No entiendo
<OPTION selected value="">Se me rompe el coco
<OPTION>Voy a desertar
</select>
</form>

Estas son las cuatro opciones, usted no haga ninguna de ellas que yo al final le pongo un formulario para que lo pueda cambiar a su página. Esto quedara así.

Una cosa a tener en cuenta es que si ponemos una etiqueta <option> sin nada al lado, este mostrara un casillero en blanco.
SELECTED Con este podemos decirle a option, que este es el valor predeterminado, es decir el que aparecerá en la ventanacuando el usuario entre, si no ponemos nada, por defecto coloca el primero en la lista.
VALUE Nos permite poner enlaces o links a otras páginas. Como por ejemplo:
< OPTION VALUE="http://www.qsl.net/cx1ddr/index.htm"> Página Principal
TEXTAREA Con este podemos poner un área de texto, es decir un área donde el usuario podrá escribir un comentario antes de enviar el formulario. Se define con rows, para las lineas y cols, para las columnas.
En nuestro ejemplo, tendremos un área de texto que abarque, 10 lineas por 45 columnas.

Podremos poner un texto por defecto, para que aparezca en pantalla, este tiene que ir <textarea> texto por defecto</textarea>
Si lo preferimos, podemos poner un texto que se lea dentro del area, por ejemplo:

<form>
<div align="center"><center><p><textarea cols="60" wrap="VIRTUAL">
Esto es un formulario con un texto dentro que podremos
agregarle lo que nosotros deseamos.
Si el texto resultara muy largo, aparecerán barras de
desplazamiento vertical para que el usuario pueda leerlas.
Usted puede poner todo lo que desee inclusive puede
poner textos tan largo como lo desee e inclusive podrá
cambiar el tamaño de la ventana.
Vea la ventana de abajo, y podrá observar como queda
Gracias por leer este reporte.
Gabriel Bermúdez
< /textarea></p></center></div>
</form>

EL FORMULARIO
Como ya les prometí acá les pongo un formulario, si les resulta muy difícil hacerlo, lo único que tienen que hacer es copiarlo al block de notas y guardarlo como un archivo HTM. Puede poner las preguntas que desee, así como cambiar los tamaños de los formularios.
Las etiquetas que aparecen VCARD_NAME, son de autocompletado de formularios, funcionan en Internet Explorer 5.0 o superior, en otros deberán completar todos los datos (vea el capitulo NUEVOS COMANDOS para mas detalles).

<HTML>
<HEAD><TITLE>Formulario de mi página</TITLE>
</HEAD>
<BODY BGCOLOR="#FFEBD0">
<CENTER><FONT COLOR="#FF0000" SIZE="4">Por Favor, Complete el Formulario<br>Gracias</font></CENTER><BR><P>
<FORM ACTION="mailto:cx1ddr@hotmail.com" METHOD="POST" ENCTYPE="TEXT/PLAIN">
<INPUT TYPE="hidden" NAME="tipodeformulario" VALUE="Libro de Registro">
<p>Me puede decir,¿Cual es su nombre y apellido?
<INPUT TYPE="text" NAME="Nombre" SIZE="30" MAXLENGHT="30" VCARD_NAME="vCard.FirstName">
<p>¿¿Cual es su correo electrónico??
<INPUT TYPE="text" NAME="Direccion " VALUE=" " SIZE="30" MAXLENGHT="40" VCARD_NAME="vCard.Email">
<p>En que país está:
<INPUT TYPE="text" NAME="Pais " VALUE=" " SIZE="30" MAXLENGHT="40" VCARD_NAME="vCard.Homepage">
<p>¿¿Tiene alguna página en Internet ??
<INPUT TYPE="text" NAME="URL" VALUE="http://" SIZE="40" MAXLENGHT="50" VCARD_NAME="vCard.Business.URL">
<p>¿¿Qué nombre tiene su pagina ??
<INPUT TYPE="text" NAME="Nombre Pagina" SIZE="40" MAXLENGHT="50" VCARD_NAME="vCard.LastName">
<p>Puede darme comentario de tu pagina:
<br><TEXTAREA NAME="Comentario Web" ROWS="5" COLS="35">
</TEXTAREA>
<p>¿Que tema le gusta más?:
<br><SELECT NAME="Interes por: ">
<option>Manual HTML
<option>Los Trucos
<option>Software
<option>Hardware
<option>Radio Aficionados
<option>Antenas
<p>Me puede dar su sincera opinion de estas páginas ??
<br>
<INPUT TYPE="radio" NAME="Opinion" VALUE="Mala">Mala
<INPUT TYPE="radio" NAME="Opinion" VALUE="Regular">Regular
<INPUT TYPE="radio" NAME="Opinion" VALUE="Buena" CHECKED>Buena
<INPUT TYPE="radio" NAME="Opinion" VALUE="MUY Buena">Muy Buena
<INPUT TYPE="radio" NAME="Opinion" VALUE="Exelente">Exelente
<br><p>
<INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar">
</form><center>
<a href="Pagina principal.htm">Volver Atras</a>
</center><br><br><br>
</body>
</html>