Se escribe:

<UL>
<LI>Primera linea
<LI>Segunda linea
</UL>

En este caso los números han sido sustituidos por unos puntos gruesos.
Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores: TYPE=1 (por defecto) para números, TYPE=A para letras mayúsculas, TYPE=a para letras minúsculas, TYPE=I para numeración romana en mayúsculas y TYPE=i para numeración romana en minúsculas.
Esto es una lista ordenada con letras mayúsculas:

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

Se escribe:

<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con letras minúsculas:

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

Se escribe:

<OL TYPE=a>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con numeración romana en mayúsculas:

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

Se escribe:

<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

Esto es una lista ordenada con numeración romana en minúsculas:

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

Se escribe:

<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE.
Esto es una lista ordenada con letras mayúsculas y que comienza por la E:

5. Primera linea
6. Segunda linea
7. Tercera linea
8. Cuarta linea

Se escribe:

<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>

El número que pones en el atributo START indica en que número o letra comenzará la lista. La E es la quinta letra.
Esto es un menú:

Primera linea

Segunda linea

Se escribe:

<MENU>
<LI>Primera linea
<LI>Segunda linea
</MENU>

La diferencia entre un menú y una lista desordenada, es que las líneas en la lista desordenada comienzan en el margen izquierdo y las del menú unas posiciones más a la derecha (aunque eso depende del visualizador).
Esto es un directorio:

Primera linea

Segunda linea

Se escribe:

<DIR>
<LI>Primera linea
<LI>Segunda linea
</DIR>

Ocurre lo mismo que con el menú.
Esto es una lista de definicion:

Primera linea

Segunda linea

Se escribe:

<DL>
<DT>Primera linea
<DD>Segunda linea
</DL>

Fíjate que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como tipo <DL>. Estos tres nuevos elementos también se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia.
Un ejemplo:
Ordenada con 4 niveles, 2 desordenados sin marcas

1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
   1. Linea de texto 3.1
   2. Linea de texto 3.2

      Linea de texto 3.2.1

      Linea de texto 3.2.2

      Linea de texto 3.2.2.1

      Linea de texto 3.2.2.2

4. Linea de texto 4

Se escribe:

<OL>
   <LI>Linea de texto 1
   <LI>Linea de texto 2
   <LI>Linea de texto 3
      <OL>
         <LI>Linea de texto 3.1
         <LI>Linea de texto 3.2
            <DL>
               <DD>Linea de texto 3.2.1
               <DD>Linea de texto 3.2.2
                  <DL>
                     <DD>Linea de texto 3.2.2.1
                     <DD>Linea de texto 3.2.2.2
                  </DL>
            </DL>
      </OL>
   <LI>Linea de texto 4
</OL>

Tablas

Las tablas son sin duda uno de los elementos más potentes del HTML. Con pocos elementos se pueden conseguir efectos espectaculares. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links...
Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija.
El elemento básico es <TABLE> y en su interior los elementos <TD> <TR> <TH> y <CAPTION>.
He aquí un resumen de los elementos utilizados y los atributos que admite cada uno:

	TABLE	TR	TD	TH	CAPTION
BORDER	x	-	-	-	-
ROWSPAN	-	-	X	X	-
COLSPAN	-	-	X	X	-
ALIGN	-	X	X	X	X
VALIGN	-	-	X	-	-
WIDTH	X	-	X	-	-
HEIGTH	X	-	X	-	-
CELLPADDING	X	-	-	-	-
CELLSPACING	X	-	-	-	-

Ejemplos de tablas

Tabla básica de 3x2

A	B	C
D	E	F

<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Dos ejemplos de línea expandida <ROWSPAN>

Item 1	Item 2	Item 3
Item 4		Item 5

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

Item 1	Item 2	Item 3	Item 4
	Item 5	Item 6	Item 7

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>

Creación de enlaces (links)

El siguiente es sin duda el elemento más importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto, para la persona que está leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dónde está el documento que lee. Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee está repartido por medio mundo, o en un plano más modesto, el documento leído puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a otras sin notarlo.
Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en inglés link=eslabón o enlace).
Pero seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la estetica en algunos casos, se puede parametrizar con una instruccion de estilo.

Se escribirá:

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.

Y se vería así: Link de prueba

Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se puede recurrir a una instruccion de estilo. Así:

<A HREF="http://www.miservidor.es/mifichero.htm"
style="color:red; text-decoration:none";> Link de prueba </A>.

Y se vería así: Link de prueba.

El elemento <A> tiene dos atributos: HREF y NAME.

En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.
Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que saltar de una máquina a otra, si el enlace es para otra página de nuestro propio servidor es suficiente escribir la ruta virtual corta:
/mifichero.htm o bien: /otro_directorio/mifichero.htm según proceda.
Dentro de los parámetros pasados a HREF, podrás ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios:

Servicio	Descripción	Ejemplo
http://	Servicios WWW	<A HREF="http://www.uv.es/"> WWW</A>
ftp://	Servicios FTP	<A HREF="ftp://ftp.uv.es/">FTP</A>
gopher://	Servicios GOPHER	<A HREF="gopher://gopher.uv.es/">GOPHER </A>
news://	Servicios NEWS	<A HREF="news://news.uv.es/">NEWS</A>
mailto://	Servicios E-mail	<A HREF="mailto:jac@uv.es/">E-mail</A>
file:///C|	Fichero local	<A HREF="indice.htm/">Fichero</A>

Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se escribirá:

<A HREF="html.htm" TARGET="_blank"> </A>

Esta instrucción mostrará la página indice.htm pero con otra ventana del visualizador, es decir tendremos lanzado el visualizador 2 veces.
Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentará desde la primera línea del mismo.
El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos largos divididos en secciones.
Se escribirá así:

En el documento activo:
<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>

En el documento destino:
<A NAME="punto1"></A>

NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo documento. Se escribirá así:

Dentro del documento activo En la línea de partida:
<A HREF="#punto1">Ir al punto 1</A>

En la línea de destino
<A NAME="punto1"></A>
Por ejemplo, si haces "clik" aquí con el ratón, saltarás al principio de esta página.

Debes saber que...

.El texto que pongas después del símbolo # puede ser cualquiera, siempre que no tenga espacios en blanco, caracteres especiales ni caracteres codificados, y por supuesto, que no esté repetido en el mismo documento de destino.
.Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador nos presentará en pantalla la última línea del mismo.
.Cuando hagas un link, es preferible utilizar direcciones relativas. Si utilizas direcciones absolutas y después tienes que mover los ficheros por cualquier razón, tendrás que modificar todas las direcciones.
.Si al hacer un link, después del nombre de la máquina no pones el nombre de un fichero, por defecto el servidor entiende que se le pide la "home page" (página inicial).
.Si un servidor no tiene definida página inicial, simplemente nos mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
.Si después de la dirección de la máquina a la que le haces el link en lugar de un nombre de fichero pones el de un directorio, generalmente el servidor nos mostrará un simple listado de los ficheros y directorios que éste contenga si el servidor tiene activada la opción de listar directorios, en caso contrario, dará un error.
.No sólo puedes montar el link sobre un texto, también puedes hacerlo sobre una imagen cualquiera. Es decir, después del link y antes de </A> puedes poner lo que quieras.
.El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que puedas huye de crear páginas muy largas. Crea cuantas necesites, con buena estructura y enlázalas con cuantos links sean precisos.
.Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y has utilizado direcciones absolutas, al hacer un link, no empieces con aquello de: "http://....". No funcionará.
.Si continuas deseando poner direcciones absolutas con ficheros locales, tendrá que ser así file:///C|/MIDIRECTORIO/mifichero.htm
.Después de C (que puede ser A, B, D o la unidad de disco que quieras) fíjate que va una barra vertical (pipe), y que las barras que separan los directorios y ficheros son barras a la derecha.

Insertar imágenes

Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráficos utilizado se pueden conseguir efectos realmente sorprendentes.
Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>. Este elemento puede ir acompañado de los atributos SRC ALT ISMAP ALIGN WIDTH HEIGTH BORDER VSPACE HSPACE.
Las imágenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son interpretados directamente por el visualizador. Se puede usar cualquier otro formato como el MPG (vídeo), pero entonces el visualizador llamará a un programa auxiliar, que previamente le habrás definido, para que sea éste el que visualice el fichero.
Algunos visualizadores no son capaces de tratar imágenes, o aunque el visulizador sí pueda, tal vez tu máquina tenga muy poca memoria o una tarjeta de vídeo floja. Entonces podemos recurrir al atributo ALT (por alternativo) para definir un texto que aparecerá en lugar de la imagen. Esto es importante cuando una imagen, además de ser un elemento decorativo, soporta un link.
Veamos ejemplos del uso de <IMG>:

Imagen alineada a la izquierda (por defecto)
<IMG SRC="cursowy_clip_image007_0008.gif">texto texto texto texto
texto texto texto texto

texto texto texto texto texto texto texto texto

Imagen alineada a la izquierda.Texto envolviendo la imagen
<IMG SRC="cursowy_clip_image007_0008.gif" ALIGN=LEFT> texto texto texto texto texto <BR CLEAR> texto texto texto texto texto texto texto

texto texto texto texto texto
texto texto texto texto texto texto texto

Imágenes de fondo

El fondo (background) es un atributo del elemento <BODY>
Se escribe así:
<BODY BACKGROUND="yellow_r.gif">

Algunos ejemplos de imágenes en listas

Se escriben todas igual, sólo hay que cambiar el nombre de los gráficos:
<DL>
<DT><IMG SRC="cursowy_clip_image001.gif">Linea de texto
<DT><IMG SRC="cursowy_clip_image002.gif">Linea de texto
<DT><IMG SRC="cursowy_clip_image009_0001.gif">Linea de texto
</DL>

Linea de texto

Linea de texto

Linea de texto

Introducción a los formularios

Generalidades
Esta es la parte más técnica y compleja del HTML. Los formularios o forms en inglés, son unas páginas especiales que se utilizan para realizar transacciones. En una página que contenga un formulario pueden además existir todos los elementos hasta ahora conocidos, incluso el propio formulario puede estar integrado dentro de otros elementos, como por ejemplo una tabla. Un fallo que de momento tienen los formularios es que no se pueden imprimir. Sólo aparece el texto que los acompaña, pero no sus componentes, como ventanas de texto o botones.
¿Cómo funcionan los formularios?
El formulario no es más que una página escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde botones fijos o de todas ellas combinadas.
Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http que lo procesará y devolverá una respuesta. También pueden crearse formularios que simplemente abren un página en local.
Hasta aquí todo se reduce a escribir HTML, pero la parte complicada viene cuando los datos capturados por tu formulario llegan al servidor. Allí tiene que haber un programa especial, creado especialmente para ese formulario, que reciba esos datos y sepa qué hacer con ellos, procesarlos y confeccionar la respuesta que remitirá al visualizador. A esa respuesta se le denomina documento virtual ya que esa página no está escrita en ninguna parte; es generada, enviada y destruida.
A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI
(Common Gateway Interface).
Los programas CGI pueden estar escritos en cualquier lenguaje de programación que sea soportado por el sistema operativo del servidor, y pueden estar diseñados para cualquier función: desde una simple captura de datos que serán guardados en un fichero hasta la más sofisticada consulta a una base de datos.

¿Cómo se escriben los formularios?

La base del formulario es el elemento lleno <FORM>, es el que define una zona de la página como formulario.
En una página puede haber varias zonas definidas como formulario. Dentro de este elemento a su vez se utilizan otros elementos, que son los que realmente dibujan en pantalla los componentes del formulario, son:
   <INPUT>
       Campos de entrada por teclado.
       Botones de selección.
       Casillas de marca.
       Botones de proceso.
       Botones de inicialización (reset).
       Imágenes sensibles al ratón.

   <SELECT>
       Listas desplegables de valores.
       Listas fijas de valores.

   <TEXTAREA>
       Ventanas de escritura libre.

Este sería el más elemental de los formularios, con sólo un campo y un botón de envío:

Analicemos cómo se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar"></FORM>

En la primera línea vemos el elemento de definición de formulario: <FORM>. Va acompañado de dos atributos: METHOD y ACTION.
METHOD se refiere al método que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los ejemplos.
ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor http o en local. Con el valor del ejemplo ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" se le está indicando que ejecute un programa llamado test2-cgi que está en el directorio /cgi-bin del servidor http mecaniza.sestud.uv.es.
Además de enviar datos a un servidor, ACTION también puede realizar una acción en local, por ejemplo traer una página:
Se escribe:
<FORM METHOD="POST" ACTION="indice.htm">
......
</FORM>
En este caso funcionaría igual que un link.
Otra cosa que puede hacer ACTION, y que además tiene la ventaja de que no sería preciso diseñar un CGI, es enviar un e-mail (correo electrónico) a un usuario o a una lista de usuarios.
Se escribe:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail">
......
</FORM>
Si no quieres complicarte la vida con descodificaciones (depende de lo que se vaya a hacer con los datos recibidos), el navegador puede remitirlos con un formato más sencillo y ya descodificado. Para ello sólo hay que añadir el parámetro ENCTYPE con el valor TEXT/PLAIN. Se escribe así:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"
ENCTYPE="TEXT/PLAIN">
......
</FORM>
Resumiendo: sin poner ningun parámetro al elemento ACTION los datos te llegarán así:
CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios
y poniendo ENCTYPE=&quotTEXT/PLAIN" así:
CAMPO1=Esto es una
CAMPO2=demostracion de formularios

El elemento INPUT
INPUT sin ningún atributo define por defecto una ventana de escritura de 20 caracteres de longitud por una línea de ancho:

Se escribe:

<FORM> <INPUT> </FORM>
<INPUT> admite varios atributos:
SIZE define la longitud de la ventana de texto.
MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.
NAME define el nombre de la ventana (que en realidad es un campo dentro del registro, que en conjunto, es el formulario). Si escribes:
<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>

Como puedes comprobar, sólo se pueden escribir 10 caracteres dentro de la ventana, que también es de longitud 10. No es obligatorio que concidan ambos valores, puedes definir la ventana al valor que quieras y la longitud de la cadena puede ser mayor o menor.
VALUE sirve para que la ventana aparezca con un valor predeterminado, y no vacía como hace por defecto:
Se escribe:
<FORM> <INPUT VALUE="HOLA"> </FORM>

TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.
TYPE=PASSWORD para que el valor predeterminado de la ventana esté en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>

TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana misma estén en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>
Esta opción se utiliza cuando es necesario enviar un valor fijo al servidor, pero no se desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un formato encriptado, viendo el documento fuente se puede saber el valor de la ventana.
TYPE=SUBMIT para generar un botón que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos.
Se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>

VALUE puede acompañar a SUBMIT, y en este caso sirve para definir el texto que queremos que tenga el botón en su interior.
TYPE=RESET para generar un botón que al ser pulsado inicializa todos los componentes del formulario.
Se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="RESET" VALUE="Inicializar"></FORM>

VALUE puede acompañar a RESET, y en este caso sirve para definir el texto que queremos que tenga el botón en su interior. Si se omite, por defecto el visualizador le da el valor "Reset".
TYPE=RADIO genera botones circulares que permiten seleccionar un valor predeterminado o activar una opción

Clase A Clase B

Se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>
En este ejemplo, los botones permiten seleccionar la clase A, la clase B o ninguna de las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo clase B, hay que añadir el parámetro CHECKED después del valor:
... VALUE="B" CHECKED></form>
TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor predeterminado o activar una opción

Clase A Clase B

Se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>
En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase B, ninguna, o las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo clase B, hay que añadir el parámetro CHECKED después del valor:
... VALUE="B" CHECKED></form>

El elemento SELECT

SELECT sin ningún atributo define por defecto una lista desplegable de toda la pantalla de alto y una columna de ancho:
Se escribe:
<FORM> <SELECT> </SELECT> </FORM>

Como evidentemente esto no es muy práctico, hay que parametrizar el elemento. En primer lugar se le da nombre, ya que éste es un campo más del formulario, la diferencia es que no hay que escribir en él sino escoger un valor de los que nos muestre al desplegarlo, se usará el atributo NAME, y para entrar valores en la lista se usa el atributo OPTION.
Se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>

Valor 1 Valor 2 Valor 3

Se deben tener en cuenta varias cosas respecto a SELECT:

La longitud de la ventana de selección se autoajusta al valor más largo de la lista.
La ventana de selección, por defecto, muestra una línea, si se quieren mostrar más se utilizará el atributo SIZE.
Se debe procurar que los contenidos de los campos sean lo más cortos posibles; una excesiva longitud implica mayor tráfico por la red, pero se deben construir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para enviar un valor diferente del que aparece en la lista, se utiliza el parámetro VALUE asociado al atributo OPTION. Prueba con el valor 5 de la siguiente lista:

Valor 1 Valor 2 Valor 3 Valor 4 Este es el Valor 5 Valor 6 Valor 7

Se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se envía al servidor es "Valor 5".
Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no hay ninguno seleccionado, por defecto el visualizador enviará el primer valor de la lista.

El elemento TEXTAREA

Este elemento, como su nombre indica, permite definir un área de texto en la pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya parametrizada en cuanto a dimensiones, con los atributos ROWS (líneas) y COLS (COLUMNAS). No tiene otros atributos o posibles variantes. Por supuesto, para que sea operativo, deberá ir acompañado de los componentes necesarios para enviar e inicializar.

Se escribe:
<FORM METHOD="POST" ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>
Aunque no es habitual, dentro de un área de texto puede haber un contenido por defecto (que puede ser borrado o modificado por el usuario). Para ello simplemente se escribirá el texto entre <TEXTAREA> y </TEXTAREA>.
Así:
<TEXTAREA NAME="texto1" ROWS=5 COLS=40>
Contenido del area de texto
</TEXTAREA>

Contenido del area de texto

Un típico y complejo formulario

Nombre:	F.Nac.: DNI:
Apellidos:
Calle y número:
Código Postal:	Ciudad:
Provincia:	Teléfono:
Opción:	OPCION 1 OPCION 2 OPCION 3 OPCION 4 OPCION 5 Escoja una opción
Comentarios personales:
Pulse aquí:

<FORM ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" METHOD=POST>
<CENTER>
<TABLE BORDER>
<TR>
<TD>Nombre:</TD>
<TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.:
<INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI:
<INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>
<TR>
<TD>Apellidos:</TD>
<TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Calle y número:</TD>
<TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Código Postal:</TD>
<TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
<INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>
<TR>
<TD>Provincia: </TD>
<TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20>
Teléfono:
<INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>
<TR>
<TD>Opción:</TD>
<TD> <SELECT NAME="OPCION">
<OPTION>OPCION 1
<OPTION>OPCION 2
<OPTION>OPCION 3
<OPTION>OPCION 4
<OPTION>OPCION 5
</SELECT>Escoja una opción</TD>
<TR>
<TD>Comentarios<BR> personales:</TD>
<TD> <TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>
<TR>
<TD><B>Pulse aquí:</B></TD>
<TD ALIGN=CENTER>
<INPUT TYPE="submit" VALUE="Enviar datos ">
<INPUT TYPE="reset" VALUE="Borrar los datos"></TD>
</TABLE>
</CENTER>
</FORM>