Ejemplo: Instalar y configurar carpetas en Apache Tomcat 5.5

Se pueden codificar páginas XHTML simplemente con un editor de texto y comprobar el resultado en cualquier navegador que ejecute ese código. Sin embargo para ejecutar servlets es necesario usar una aplicación servidora de páginas web. Para probar estos ejemplos hemos instalado el servidor web Apache Tomcat dede tomcat.apache.org en nuestro ordenador. Para Windows hay que buscar el Windows Service Installer. En nuestro caso instalamos la versión 5.5.26

El servidor señalado configura una serie de carpetas para situar nuestra página con el formulario y el servlet que se ejecutará. La estructura de directorios en el servidor Apache Tomcat 5.5 de nuestro ejemplo es la siguiente:

...
[Tomcat 5.5]
    ...
    [webapps]
        ...
        [mi-sitio]
            index.html
            ...
            [xhtml-css]
                ...
                [formulario]
                    [ejemplos]
                        [form]
                            form-servlet.html
                ...
            [WEB-INF]
                web.xml
                [classes]
                    formaction.class
            

Entre corchetes se indican las carpetas. Los puntos suspensivos es otro contenido que ahora no interesa. Si instalamos el servidor señalado, estará ubicado en una carpeta llamada Tomcat 5.5. Nuestra aplicación web con todas las páginas, imágenes, servlets y otros recursos de nuestro sitio, debe ser ubicada en la carpeta webapps que por defecto se instala con el servidor. El nombre que hemos dado a nuestro sitio será la carpeta mi-sitio. Observamos la página de inicio del sitio index.html, que deberá ser situado en la carpeta raíz mi-sitio. Cuando nuestro sitio se sitúe en un servidor real, esta carpeta mi-sitio será sustituida por el nombre del dominio, por ejemplo www.mi-sitio.com. Así cuando pongamos la ruta http://www.mi-sitio.com en un navegador, el servidor buscará un archivo índice con el nombre index.html que será la página de inicio.

En un ejemplo de Servlets de Java que verá más abajo, desarrollamos una página con un formulario llamado form-servlet.html, que observará en el árbol de carpetas anterior en ...formulario/ejemplos/form/form-servlet.html. El servlet es en este caso un archivo compilado de Java que se llama formaction.class. No trataremos como debe codificarse un servlet en Java, aunque puede observar su código fuente.

El servlet formaction.class debe ubicarse en unas carpetas que crearemos llamadas WEB-INF/classes. Directamente colgando de WEB-INF ha de situarse el archivo web.xml. Se trata de un fichero descriptor, es decir, un índice para que el servidor pueda buscar la aplicación formaction.class. El contenido de web.xml deberá ser como el siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <servlet>
        <servlet-name>formaction</servlet-name>
        <servlet-class>formaction</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>formaction</servlet-name>
        <url-pattern>/formaction</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>30</session-timeout>
    </session-config>
    <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>               
            

Vemos que en este web.xml se incluyen las configuraciones necesarias para indicar al servidor donde encontrar el servlet formaction. También sirve para configurar index.html como página de inicio. El funcionamiento de nuestra página de ejemplo form-servlet.html se conseguirá entonces y resumiendo con los siguientes pasos:

1. Instalar Apache Tomcat.
2. Crear la carpeta webapps/nombre-del-sitio.
3. Ubicar en esta carpeta la página inicio index.html y el resto del contenido de nuestro sitio: resto de páginas, subcarpetas, imágenes, recursos, etc.
4. Según donde esté ubicada la página que contiene el formulario, su atributo action debe señalar a la carpeta raíz nombre-del-sitio. Así en nuestro ejemplo como la página que contiene el formulario está en xhtml-css/formulario/ejemplos/form/form.html, es decir, 4 carpetas más abajo que el raíz xhtml, entonces el atributo será action = "../../../../formaction". Cada "../" hace retroceder una carpeta hacia atrás, con lo que conseguimos situarnos en el raíz. Una vez ahí sólo hay que poner el nombre del servlet, sin extensiones ".class".

   Comencé el estudio del desarrollo web usando el servidor local Apache Tomcat, donde las rutas relativas que apuntaban hacia atrás se reflejaban con "../". Pero luego me decidí por Apache+PHP, donde resulta más sencillo indicar las rutas hacia atrás simplemente partiendo de la carpeta raíz. Por ejemplo, sea la ruta /abc/def/ghi/jkl.html donde /abc es una carpeta que está en la raíz del sitio. Si estamos en ese documento jkl.html, podemos referirnos a un documento icon.ico que esté en la carpeta abc haciendo ../../../icon.ico tanto en Apache Tomcat como en Apache+PHP. Pero en este es más fácil hacer /icon.ico. Así cualquier ruta que empiece con una barra se resuelve partiendo de la carpeta raíz. Esto sin embargo no funciona en Apache Tomcat, o al menos no he podido averiguar como se configura este servidor para que funcione como Apache en este sentido.

   Hasta ahora tenía todas las rutas hacia atrás declaradas así en todo el sitio, con los ../. En este mes de Abril 2011 las he modificado todas para adaptarlas a la forma de Apache pues resulta más cómodo que manejar el retroceso con puntos. Sin embargo estos ejemplos de Tomcat no los he modificado pues de todas formas no pueden ejecutarse en el servidor actual donde está viendo estos documentos, que es un servidor Apache+PHP.

5. Crear la carpeta nombre-del-sitio/WEB-INF. Situar en esta carpeta el archivo web.xml como el expuesto anteriormente.
6. Crear la carpeta nombre-del-sitio/WEB-INF/classes. Situar en ella el servlet como en nuestro caso formaction.class. Se supone que previamente se ha compilado el módulo formaction.java.
7. Arrancar el servidor Tomcat. Se deberán ver sus instrucciones de uso, aunque en Windows se sitúa un icono en la barra de herramientas que nos permite arrancar y parar el servidor.
8. Abrir un navegador y escribir la siguiente ruta para abrir la página de inicio http://localhost:8080/nombre-del-sitio. La instalación de Tomcat crea por defecto un dominio local con nombre "8080", que equivale a abrir una página ubicada en un servidor real. Esto hará que se abra la página de inicio de nuestro sitio (en nuestro caso se llama index.html). Desde esta página de inicio se podrá acceder a nuestro formulario incluido en la página form-servlet.html.
9. Introducimos datos en el formulario y pulsamos el botón de enviar.
10. El navegador remite las parejas nombre-valor al servidor que buscará la aplicación ../../../formaction partiendo del raíz en el archivo WEB-INF/web.xml. Éste archivo le indicará que el nombre formaction se corresponde con una clase del mismo nombre, cuyo archivo ".class" se encuentra en una carpeta llamada por defecto classes en su misma ruta. Esto queda especificado con los elementos <servlet> y <servlet-mapping> del archivo web.xml señalado tal como ahí se codificó.
11. El servidor ejecuta la aplicación formaction.class, la cual se encarga de tratar las parejas de nombre-valor de los datos recibidos y, en nuestro ejemplo, devolver una página confeccionada para que el usuario sepa que el servidor ha recibido los datos.

Ejemplo: Uso de formularios. Aplicaciones web del servidor. Servlets de Java.

En el siguiente ejemplo configuramos una página donde insertamos el siguiente formulario:

<form method="post" action="../../../../formaction">
    <label>Nombre:</label>
    <input type="text" name="nombre" size="60" /><br />
    <label>Dirección:</label>
    <input type="text" name="direccion" size="60"  /><br />
    <label>E-mail:</label>
    <input type="text" name="email" size="60"  /><br />
    <label>Cuestión:</label><br />
    <textarea name="cuestion" rows="5" cols="50"></textarea><br />
    <input type="submit" value="enviar" />
    <input type="reset" value="borrar" />
</form>                
            

Se observa que el elemento <form> contiene los típicos de un formulario: etiquetas <label>, campos para entrada de texto con <input type="text"> o incluso de texto en múltiples líneas con <textarea>. Por último se incluyen dos botones con <input>, uno del tipo submit para enviar los datos del formulario y otro reset para borrar los datos en pantalla.

Pero lo importante está en el atributo action del formulario. Cuando el usuario envía los datos con el botón con tipo submit, el navegador remite al servidor estos datos en un paquete formado por parejas de valores. El primer valor será el del atributo name de cada campo <input>. El segundo valor de esta pareja serán los datos que el usuario haya introducido en el campo. Luego el servidor buscará en la ruta action="../../../../formaction" la aplicación con ese nombre "formaction" que se encarga de tratar esos datos. El servlet es en este caso un archivo compilado de Java que se llama formaction.class. No trataremos como debe codificarse un servlet en Java, aunque puede observar su código fuente. Estas aplicaciones servlet son programas que se ejecutan en un servidor web, no en un navegador. Por lo tanto para que la acción encomendada al atributo action funcione, es necesario que la página donde se inserta el formulario sea servida por un servidor web Apache Tomcat.

El servlet que nos ha servido de ejemplo no ejecuta nada de interés. Sólo recibe los datos y los devuelve incluidos en un formato web. Con ello solo pretendemos observar que se ha producido la comunicación usuario-servidor y la respuesta servidor-usuario. Su verdadera utilidad sería por ejemplo que el servlet traspasara esos datos a una base de datos, tras lo cual alguna persona o proceso se encargaría de manejarlos de algún modo. Un proceso podría ser que el servlet remitiera los datos a un correo electrónico del propietario del sitio web. En definitiva ya puestos en el lenguaje de programación Java, existen multitud de cosas que pueden hacerse con los datos recibidos. Especialmente se ha de tener en cuenta algunos aspectos en relación con los servlets de Java:

• Concurrencia: En el ejemplo anterior los servlets no accedían a un recurso compartido. Pero si los datos recibidos en el servidor tuvieran que ser actualizados en un cierto archivo, habría que configurar este recurso para que el acceso por más de un usuario al mismo tiempo no produzca contratiempos. En Java existen procedimientos al respecto.
• Sesiones: El protocolo HTTP es un protocolo sin sesiones, pues el servidor no puede saber si dos accesos pertenecen al mismo usuario. Para reconocer quién está accediendo al servlet existen en Java las clases Cookie y Session.
• Java Server Pages (JSP): Como se contempla en este ejemplo, el servlet no es adecuado para ofrecer salidas con código XHTML. Java posee los JSP como una extensión de los servlets para crear y gestionar páginas web dinámicas, permitiendo combinar trozos de código Java dentro del documento XHTML con el que el servidor responderá al usuario.

Ejemplo: Uso de formularios. Aplicaciones web del servidor con JSP (Java Server Pages)

Como indicamos en el ejemplo anterior usando servlets de Java, la composición de la página de salida resulta muy trabajosa. Las páginas Java de servidor Java Server Pages o JSP sirven para este cometido: facilitar la composición de salida. Se trata de una página XHTML donde se pueden incrustar trozos de código que se encierra entre los signos <% ... %>.

En este ejemplo usamos un formulario como el caso anterior, cuyo código de la página para que el usuario escriba los datos que va a enviar al servidor es el siguiente:

<form method="post" action="script.jsp">
    <label>Nombre:</label>
    <input type="text" name="nombre" size="60" /><br />
    <label>Dirección:</label>
    <input type="text" name="direccion" size="60"  /><br />
    <label>E-mail:</label>
    <input type="text" name="email" size="60"  /><br />
    <label>Cuestión:</label><br />
    <textarea name="cuestion" rows="5" cols="50"></textarea><br />
    <input type="submit" value="enviar" />
    <input type="reset" value="borrar" />
</form>                 
            

Ahora la acción se encomienda a la página JSP llamada script.jsp, con un código fuente que está situada en la misma carpeta que la página que contiene el formulario. En este caso no hay que añadir nada más a ningún fichero web.xml como pasaba antes con el servlet. Simplemente cuando el servidor llegue al atributo action enviará la página script.jsp al usuario ejecutando los trozos de código Java que tenga insertados.

JSP es en definitiva una clase Servlet. El servidor se encarga de compilar la página JSP la primera vez y, mientras no haya cambios, las peticiones usarán la página compilada. Para ver este efecto mostramos el código fuente de la página JSP de este ejemplo ya compilada como Servlet, observando el ahorro de trabajo con la escritura de salida a HTML por ejemplo.

Además si después de estar en ejecución un Servlet se modifica algo, es necesario volverlo a compilar y reiniciar el servidor para que lo cargue en memoria. Sin embargo con un JSP no es necesario, pues se realiza una primera compilación cargándose en memoria y en cada ejecución se comprueba si el archivo ha sido modificado, procediéndose sólo a compilarlo de nuevo si hubo modificación y sin necesidad de reiniciar el servidor o cualquier otra operación similar.

Ejemplo: Revisión de datos recibidos con JSP.

A continuación proponemos un formulario de ejemplo para enviar datos al servidor. Suponga que unos valores deben ser obligatoriamente requeridos. Una primera revisión de datos previa podría realizarse en el navegador del usuario con scripts por ejemplo, de tal forma que se remitan todos los datos requeridos y/o no se envien datos no conformes. Pero supongamos que aún así el servidor debe revisar algún extremo de los datos recibidos. En caso de no ser conformes se devuelve el formulario con los datos actuales que el usuario puso para que complete los datos que le faltan. Inicialmente el usuario tiene acceso al formulario desde una página web con el siguiente código insertado:

<form method="post" action="revisado.jsp">
    <p>Los campos con (*) son requeridos.</p>
    <label>Nombre: (*)<br />
        <input type="text" name="NOMBRE" size="100" />
    </label><br />
    <label>Edad: <br />
        <input type="text" name="EDAD" size="10" />
    </label><br />
    <label>E-mail: (*)<br />
        <input type="text" name="E-MAIL" size="100" />
    </label><br />
    <label>Preferencias: <br />
        <select name="PREFERENCIA">
            <option>Divulgación científica</option>
            <option>Matemáticas</option>
            <option>Literatura</option>
            <option selected="selected">Otras</option>
        </select>
    </label><br />
    <input type="submit" value="enviar" />
    <input type="reset" value="borrar" />
</form>                
            

En este ejemplo si no se rellenan los campos requeridos, el servidor devolverá el formulario tal como se remitió mediante una página JSP para que el usuario complete los campos requeridos. En otro caso procesará los datos como en su caso fuera más conveniente, aunque aquí este proceso no se realiza por ser sólo un ejemplo.

Ejemplo: Enviando objetos al servidor con JSP

Aparte de los controles de formulario también pueden enviarse objetos al servidor. La especificación no dice como el navegador debe enviar los objetos ni como tratarlos el servidor. En este ejemplo insertamos dos objetos dentro de un formulario para ser enviados al servidor. Sólo Explorer parece que los envía, pues en la respuesta del servlet JSP nos ofrece la siguiente recopilación de campos recibidos por el servidor:

El código del formulario para enviar los datos es el siguiente. La respuesta se trata con JSP, cuyo código responde a una simple recapitulación de las parejas nombre-valor recibidas, pero sin que sepamos como tratar los objetos recibidos.

<form method="post" action="object.jsp">
    <input type="text" name="cadena" value="Enviando objetos" /><br />
    <label>Un objeto que contiene un archivo de texto <b>nota.txt</b><br />
        <object name="objeto-texto" data="nota.txt" type="text/plain" 
        width="350" height="100" style="border: green solid 1px;">
            <b>No se pudo presentar el objeto</b>
        </object>
    </label><br />
    <label>Un objeto que contiene una página <b>ejemplo.html</b><br />
        <object name="objeto-html" data="ejemplo.html" type="text/html"  
        width="350" height="100" style="border: green solid 1px;">
            <b>No se pudo presentar el objeto insertado en la página.</b> 
        </object> 
    </label><br />
    <input type="submit" value="enviar" />
    <input type="reset" value="borrar" />
</form>                
            

Ejemplo: Instalación de Apache 2.2.15 para Windows

Puede realizar los ejemplos de PHP expuestos aquí si tiene un alojamiento web que disponga de al menos Apache 2.2 con PHP 5.2. En otro caso también es posible instalar localmente en su ordenador dicho servidor para aprender y desarrollar estos conceptos. En este caso ponemos algunas anotaciones que puede ayudarle en esta materia.

Exponemos ejemplos donde hacemos uso del sevidor Apache, versión 2.2.15, para ejecutarlo en modo local y hacer el desarrollo de estas páginas. Así probamos el funcionamiento de los servlets de PHP. El sitio donde puede descargar una versión para usar en modo local y hacer pruebas es httpd.apache.org. En esta página hemos buscado el apartado de Apache HTTP Server 2.2.15 Released por ser una versión que consideramos estable. Ahí vamos al enlace download que nos lleva a la página httpd.apache.org/download.cgi, donde nos vamos al apartado Apache HTTP Server (httpd) 2.2.15 is the best available version. Elegimos la descarga Win32 Binary including OpenSSL 0.9.8m (MSI Installer) con el enlace de descarga httpd-2.2.15-win32-x86-openssl-0.9.8m-r2.msi. Una vez descargado se ejecutada la instalación siguiendo los típicos pasos de selección de carpeta. Al final aparecerá un icono en la barra para gestionar los servicios del servidor (arrancar, parar, etc.). Luego simplemente poniendo http://localhost/ en un navegador nos saldrá una frase como It works! que significa que el servidor funciona.

En la instalación del servidor Apache hay que elegir la ruta adecuada, donde nos interese tener luego las páginas del sitio, pues hay que ponerlas dentro en una carpeta htdocs que crea y necesita el servidor. Existe un fichero de texto httpd.conf que lo sitúa en la carpeta conf, datos que sirven para las configuraciones del servidor, pero que inicialmente no es necesario modificarlo.

Ejemplo: Instalación de PHP 5.2.13 para Windows

Por otro lado también hay que instalar PHP, aunque también hay otros recursos donde puede descargarse ambos de una vez (PHP con Apache) y ya integrados, pero que no provienen directamente de los autores de PHP. En nuestro caso hemos optado por instalar separadamente ambos sistemas, tal como se expone a continuación. Elegimos la versión de descarga que incluye el instalador de Windows y configurador de Apache 2 (que debe estar instalado previamente). Así en www.php.net/downloads.php tenemos que elegir PHP 5.2.13 installer, tal como muestra la imagen siguiente:

Esto instala y configura PHP y las extensiones PECL (para expresiones regulares), así como configura servidores web como IIS, Apache, Xitami y Sambar. Para otros servidores (o incluso para estos si se desea), puede hacerse una instalación manual, cuya descarga se hace desde http://windows.php.net/download, eligiendo VC6 para servidores Apache. Sin embargo esta forma requiere más esfuerzo, por lo que hemos elegido la opción primera, con el instalador y configurador de Apache. Una vez descargado se ejecutará el instalador. Es muy importante ubicar el PHP en la carpeta raíz del disco (C:), pues es posible que en otras carpetas surgan problemas. Luego se seguirán las instrucciones que va dando, tal como muestran estas capturas de pantalla:

Saldrá una lista para seleccionar el servidor web que se ha de configurar. En nuestro caso elegimos Apache 2.2.x Module. A continuación nos indica que hemos de poner la ruta donde está la carpeta del archivo de configuración de Apache, que estará en una carpeta llamada conf, que hemos de seleccionar. Luego aparecerá una serie de extensiones de PHP que se podrán activar o desactivar. Si no sabemos demasiado sobre ellas, no debemos seleccionarlas sin conocerlas, pues de todas formas siempre se puede volver a activar o desactivar usando el panel de control de Windows, en agregar y quitar programas. Ahí podremos ver la opción de cambiar, tal como muestra la imagen siguiente:

Nos da un menú de opciones (cambiar, reparar o eliminar), debiendo elegir cambiar y luego hace el mismo proceso descrito (se puede cambiar de servidor, de ruta del servidor y modificar las extensiones de PHP).

Si todo ha ido bien, el sistema quedará configurado. Podemos probar varias cosas para ver que efectivamente se ha instalado correctamente. En primer lugar buscaremos el archivo de texto httpd.conf de Apache, que está en la carpeta conf. Al final del mismo, ha de existir una referencia al módulo PHP tal como la siguiente:

#BEGIN PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL
PHPIniDir "C:/php/"
LoadModule php5_module "C:/php/php5apache2_2.dll"
#END PHP INSTALLER EDITS - REMOVE ONLY ON UNINSTALL
            

Luego podemos crear un simple archivo de texto, con el bloc de notas de Windows por ejemplo, con el siguiente contenido:

<?php
echo phpinfo();
?>
            

Guardamos el archivo con un nombre como "info.php", que almacenamos en la carpeta htdocs del servidor Apache. Si el servidor está en servicio, luego vamos a un navegador y ponemos la dirección http://localhost/info.php, tal que nos saldrá una página que contiene la información de PHP como la siguiente:

En esta hoja de características también podemos comprobar que se ha configurado PHP con el servidor Apache correspondiente:

Ejemplo: PHP (Hypertext Pre-processor), enviando formulario al servidor

Este ejemplo sencillo implanta un formulario para enviar los datos al servidor. Éste los recibe y devuelve la respuesta de los datos introducidos. Aunque es muy simple, nos sirve para entender el funcionamiento. La acción (atributo action = script.php) se encomienda a la página script.php, con este código, que está situada en la misma carpeta que la página que contiene el formulario form-php.html:

... 			
</head>
<body>
    <h1>ENVIANDO DATOS DESDE EL USUARIO AL SERVIDOR CON PHP</h1>
    <p>Se supone que el siguiente formulario forma parte del contenido de 
    una página. El usuario usará el formulario para enviar datos al servidor.
    </p>
    <form method="post" action="script.php">
        <label>Nombre:<input type="text" name="nombre" size="60" /></label><br />
        <label>Dirección:<input type="text" name="direccion" size="60"  /></label><br />
        <label>E-mail:<input type="text" name="email" size="60"  /></label><br />
        <label>Cuestión:<br />
        <textarea name="cuestion" rows="5" cols="50"></textarea></label><br />
        <input type="submit" value="enviar" />
        <input type="reset" value="borrar" />
    </form>
</body>
</html> 			
 			

Ejemplo: Revisión de datos recibidos con PHP, formularios reentrantes.

En el ejemplo anterior habíamos creado una página html para albergar el elemento formulario form y la respuesta la poníamos aparte, en un documento con extensión php. Se pueden unificar ambos en uno sólo y además controlar los datos recibidos. Por ejemplo, si el usuario no nos envía un dato o es erróneo, podemos reenviarle el formulario para que lo corrija.

Por lo tanto con un único documento, con un único código donde se mezcla PHP y XHTML, podemos servir el formulario y recibir los datos, controlando lo que envía el usuario.

Ejemplo <button>

<form>
    <button type="button">
        <h5>Encabezado en un botón</h5>
        <b>rótulo</b> del <i>botón</i>
        <img src="ejemplos/formulario/pyramid.jpg" width="48" height="48" alt="pyramid.jpg" />
    </button>
</form>
            

Resultado:

Encabezado en un botón

rótulo del botón

Ejemplo <textarea>

<form method="post" action="textarea.jsp"> (o "textarea.php" para PHP)
    <textarea name="multilinea" rows="5" cols="50">
Campo de texto multilínea.
Agregue más datos a este control y pulse enviar.
    </textarea><br />
    <input type="submit" value="enviar" />
    <input type="reset" value="borrar" />
</form>
            

El código puede verse en:

• código JSP
• código PHP

Ejemplo <select>

<form>
    <label>Eliga una opción entre las 4 de este menú:
        <select name="mi-menu">
            <optgroup label="Sub menú primero">
                <option value="1">Primera opción</option>
                <option value="2">Segunda opción</option>
            </optgroup>
            <optgroup label="Sub menú segundo">
                <option value="3">Tercera opción</option>
                <option value="4">Cuarta opción</option>
            </optgroup>                        
        </select>
    </label>
</form>        
            

Ejemplo <option>

<form>
    <select name="menu-1">
        <option value="1">opción primera</option>
        <option value="2">opción segunda</option>
        <option value="3" selected="selected">opción tercera</option>
    </select>
    <select name="menu-2" size="3">
        <option value="1" selected="selected">opción primera</option>
        <option value="2">opción segunda</option>
        <option value="3">opción tercera</option>
    </select>
</form>
            

Ejemplo: Rotular o etiquetar controles de formulario

<form>
    <label>Rótulo no asociado</label>
    <input type="text" name="texto1" /><br />
    <label>
        Rótulo asociado internamente 
        <input type="text" name="texto2" />
    </label><br />
    <label for="tx">Rótulo asociado con <code>for</code></label>
    <input id="tx" type="text" name="texto3" />
</form>
            

Ejemplo <fieldset>

<form>
    <fieldset>
        <legend>Datos personales:</legend>
        <label>Nombre:
            <input type="text" name="NOMBRE" size="50" maxlength="50" /><br />
        </label>
        <label>Dirección:
            <input type="text" name="DIRECCION" size="50" maxlength="50"  /><br />
        </label>   
        <label>E-Mail:
            <input type="text" name="E-MAIL" size="50" maxlength="100" /><br />
        </label>       
    </fieldset>
    <fieldset>
        <legend>Eliga el modo de envío que desea:</legend>
            <label>Correo ordinario:
                <input type="radio" name="ENVIO" value="correo" checked="checked" />                                
            </label>
            <label>Mensajería:
                <input type="radio" name="ENVIO" value="mensajería" />                                
            </label>
    </fieldset>
</form>