Los formularios se usan principalmente para obtener datos introducidos por el usuario (como por ejemplo para registrarse en nuestra web o enviarnos un mensaje) para después enviarlos al servidor web, en el que serán procesados por un lenguaje de servidor (como por ejemplo PHP).
Para crear un formulario se utilizan principalmente las etiquetas HTML <form>, <input>, <textarea> y <select>. A continuación describimos las dos primeras:
<form
action: nombre del archivo que deberá ejecutarse al ser enviado el formulario cuando se pulse un botón
de tipo submit, tratándose normalmente de un archivo con código fuente de un lenguaje del lado del
servidor, como por ejemplo PHP).
enctype: indica cómo será codificado el formulario para enviarlo al servidor web, tomando como valor por
defecto si no se especifica nada application/x-www-form-urlencoded.
Otro de los posibles valores es multipart/form-data (usado cuando se utiliza el formulario para subir
archivos al servidor).
id: identificador del formulario (se utiliza sobre todo para acceder al elemento desde JavaScript o CSS)
method: especifica de qué modo serán enviados los datos del formulario, pudiendo tomar como valor 'get'
(los datos se envían por la propia URL) o 'post' (más seguro y recomendable).
name: nombre del formulario.
>
</form>
<input
accept: usado al utilizar componentes de tipo file (para subir archivos al servidor), pero algunos
navegadores web como Internet Explorer y Safari no lo tienen en cuenta, por lo que dicha validación
deberá hacerse forzosamente en el servidor (lo cual es recomendable en todo caso).
Los diferentes tipos de archivo permitidos se indican separados por coma. Ejemplos:
<input type="file" accept="audio/*,video/*,image/*,MIME_type" />
<input type="file" accept="image/gif, image/jpeg" />
accesskey: para definir una letra que al ser presionada junto con una determinada combinación
de teclado (dependiendo del navegador web usado como explicamos un poco más adelante), hará que el
componente tome el foco.
align: en caso de componentes tipo image, indica cómo se alineará la imagen con respecto al texto
(bottom | left | middle | right | top). Sólo en modo transitional.
alt: en caso de componentes tipo image, muestra un texto descriptivo en lugar de la imagen si ésta no ha
sido encontrada, o bien en caso de navegadores web en modo de sólo texto.
checked: usado sólo en componentes de tipo radio o checkbox para indicar que se encuentra marcado o
activo (en HTML no hay que asignarle valor alguno, pero según las especificaciones de XHTML es
necesario asignarle como valor el mismo nombre de dicho atributo).
disabled: muestra el componente como desactivado (en HTML no hay que asignarle valor alguno, pero según
las especificaciones de XHTML es necesario asignarle como valor el mismo nombre de dicho atributo).
id: identificador del componente (se utiliza sobre todo para acceder al elemento desde JavaScript o
CSS).
maxlength: número máximo de caracteres que se pueden escribir en un componente de tipo text.
name: nombre del componente. Es necesario indicarlo para acceder a su valor al ser procesado por un
lenguaje del lado del servidor.
readonly: impide que se pueda escribir en un componente de tipo text (en HTML no hay que asignarle
valor alguno, pero según las especificaciones de XHTML es necesario asignarle como valor el mismo nombre
de dicho atributo).
size: ancho (en número de caracteres, no en píxels) con que se visualizará el componente.
src: nombre o ruta de la imagen, en caso de tratarse de un componente tipo image.
tabindex: definiendo esta propiedad a los componentes del formulario permite indicar un orden de
tabulación para cada uno de ellos (cada vez que se pulse la tecla Tabulador, el siguiente componente
obtendrá el foco).
type: por medio de este atributo indicaremos de qué tipo es el componente (button | checkbox | file |
hidden | image | password | radio | reset | submit | text).
value: valor del elemento.
/>
NOTA: para dar el foco a un componente que tiene asignado el atributo accesskey hay que utilizar una combinación de teclado diferente dependiendo del navegador web utilizado:
- Google Chrome / Internet Explorer / Safari: Alt+letra
- Mozilla Firefox: Alt+Mayús+letra
- Opera: Esc+letra
A continuacion puedes ver un ejemplo de página web con un formulario HTML:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
Nombre: <input type="text" id="txtNombre" name="txtNombre" /><br/>
Apellidos: <input type="text" id="txtApellidos" name="txtApellidos" /><br/>
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
En lugar de escribir diréctamente el texto que hace referencia a cada componente, podemos usar la etiqueta HTML <label>:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
<label for="txtNombre" id="lblNombre" name="lblNombre">Nombre:</label>
<input type="text" id="txtNombre" name="txtNombre" /><br/>
<label for="txtApellidos" id="lblApellidos" name="lblApellidos">Apellidos:</label>
<input type="text" id="txtApellidos" name="txtApellidos" /><br/>
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
Es recomendable usar esta etiqueta por dos razones:
- Por si necesitamos maquetar el formulario usando Hojas de Estilo en Cascada (CSS).
- Porque haciendo clic en el texto indicado en la etiqueta <label> se seleccionará el componente, del mismo modo que si hicieramos clic en él (útil sobre todo en componentes de pequeño tamaño como radio o checkbox, que veremos más adelante).
Al cargar en nuestro navegador web el código HTML anterior se mostrará una página WEB con dos cuadros de texto y un botón para enviar el formulario:
Si hacemos clic en el botón se mostrará una página de error, puesto que no existe el archivo indicado en el atributo action de la etiqueta <form>. En nuestros cursos de JavaScript y PHP veremos cómo validarlos y procesarlos.
Como hemos visto hasta ahora, en un formulario podemos insertar cuadros de texto y botones: a continuación los describiremos más detalladamente y mostraremos otros componentes que podemos insertar en un formulario.
Antes de enviar el formulario al servidor es necesario validar si los datos son correctos (se suele hacer con el lenguaje de programación JavaScript), y por seguridad volverlos a validar en el servidor antes de procesar la información.
Relacionado: [ Validar un formulario en JavaScript ] - [ JavaScript DOM Form ] - [ Formularios en PHP ]
Para insertar botones en un formulario usaremos la etiqueta <input> dándole uno de los siguientes valores en el atributo src:
- button: inserta un botón que no realiza ninguna acción (para asignarles una acción debemos un lenguaje como JavaScript).
- submit: usado para enviar los datos del formulario.
- reset: inserta un botón que al ser pulsado restablece el contenido de los componentes (incluidos los de tipo hidden) al valor que tienen definido en el código del formulario.
Otros atributos importantes son:
- disabled: muestra el componente desactivado.
- size: ancho del componente.
- value: especifica el texto que será mostrado.
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
<input type="button" id="btn1" name="btn1" size="60" value="Primer botón" /><br/>
<input type="button" id="btn2" name="btn2" size="80" /><br/>
<input type="button" id="btn3" name="btn3" size="100" value="Tercer botón" disabled /><br/>
<input type="reset" id="btnReset" name="btnReset" value="Borrar todo" /><br/>
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
En este ejemplo si pulsamos en el botón de tipo reset no sucederá nada, ya no hay componentes en el formulario cuyo valor pueda ser borrado:
Si definimos la etiqueta HTML como de tipo image crearemos un botón de tipo submit pero con la posibilidad de personalizarlo con una imagen, la cual indicaremos en el atributo src:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
<input type="image" id="btnImagen" name="btnImagen" src="ico_eliminar.gif" onclick="alert('pulsado');"/><br/>
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
Como vemos en la siguiente imagen, en la página web se mostrarán la imagen y el botón para enviar el formulario:
Los componentes de tipo hidden se utilizan para almacenar valores internamente en el formulario, sin mostrarse ningún componente gráfico.
En el siguiente código fuente de ejemplo se crea un componente de tipo hidden llamado 'hid1', al que se asigna un valor de '55', y cuando se pulse el botón para enviar el formulario, se enviará dicho valor junto con el formulario (al cargar la página web en el navegador se verá tan sólo el botón para enviar el formulario):
Relacionado: [ JavaScript DOM Hidden ]
Los cuadros de texto, aparte de los atributos id, name, size, disabled y value descritos anteriormente, resultan útiles:
- readonly: no permite modificar el contenido del componente.
- maxlength: número máximo de caracteres que puede contener.
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
Nombre: <input type="text" id="txtNombre" name="txtNombre" maxlength="5" size="7" /><br/>
Apellidos: <input type="text" id="txtApellidos" name="txtApellidos" value="Introduce tus apellidos..." size="50" /><br/>
Código postal: <input type="text" id="txtCodigoPostal" name="txtCodigoPostal" readonly /><br/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
En este caso no se pueden escribir más de cinco caracteres en el nombre, y nada en el código postal.
Observa también que si escribimos algo en los cuadros de texto y pulsamos el botón Restablecer (input de tipo reset) se borrarán los contenidos... pero quedando el correspondiente a los apellidos con su valor inicial.
Relacionado: [ JavaScript DOM Input Text ]
Los componentes de tipo password se tratan del mismo tipo que los cuadros de texto, con la diferencia de que al escribir en ellos se muestran asteriscos (u otro caracter, dependiendo del navegador web).
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
Password: <input type="password" id="passw" name="pass" /><br/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
Este elemento acepta también el atributo disabled, visto anteriormente.
Relacionado: [ JavaScript DOM Input Password ]
Son cuadros de texto que permiten escribir en varias líneas y admiten gran cantidad de texto:
<textarea
accesskey: para definir una letra que al ser presionada junto con una determinada combinación
de teclado (dependiendo del navegador web usado como explicamos anteriormente), hará que el componente
tome el foco.
cols: ancho del componente (en caracteres, no en píxels).
disabled: muestra el componente como desactivado (en HTML no hay que asignarle valor alguno, pero según
las especificaciones de XHTML es necesario asignarle como valor el mismo nombre de dicho atributo).
id: identificador del componente (se utiliza sobre todo para acceder al elemento desde JavaScript o
CSS).
name: nombre del componente. Es necesario indicarlo para acceder a su valor al ser procesado por un
lenguaje de programación del lado del servidor.
readonly: impide que se pueda escribir en un componente de tipo text (en HTML no hay que asignarle valor
alguno, pero según las especificaciones de XHTML es necesario asignarle como valor el mismo nombre de
dicho atributo).
rows: alto del componente (en caracteres, no en píxels).
tabindex: permite definir un orden de tabulación para el componente.
>
</textarea>
Ejemplo:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
Escribe tu comentario:<br/>
<textarea id="txtComent" name="txtComent" cols="30" rows="5">Escribe tu comentario...</textarea><br/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
Observa que en el código HTML de la etiqueta <textarea> no se usa el atributo value para establecer un valor por defecto al componente.
Este elemento acepta también el atributo disabled, visto anteriormente.
Relacionado: [ JavaScript DOM Textarea ]
Los componentes de formulario de tipo radio permiten seleccionar una de entre varias opciones disponibles en un grupo de opciones.
En el siguiente ejemplo creamos dos grupos de opciones:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php" >
<label for="opc11">Opción 1A</label>
<input type="radio" id="opc11" name="grupo1" value="11" />
<label for="opc12">Opción 1B</label>
<input type="radio" id="opc12" name="grupo1" value="12" checked />
<label for="opc13">Opción 1C</label>
<input type="radio" id="opc13" name="grupo1" value="13" /><hr/>
<label for="opc21">Opción 2A</label>
<input type="radio" id="opc21" name="grupo2" value="PRIMERO" />
<label for="opc22">Opción 2B</label>
<input type="radio" id="opc22" name="grupo2" value="SEGUNDO" />
<label for="opc23">Opción 2C</label>
<input type="radio" id="opc23" name="grupo2" value="TERCERO" checked /><p/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
Observa que para crear un grupo de opciones damos el mismo nombre a los componentes de tipo radio deseados en su atributo name, estableciendo valores diferentes para cada uno en su atributo value.
Fíjate también en que para marcar como seleccionado por defecto un elemento, usamos el atributo checked.
Asimismo, como hemos usado la etiqueta HTML <label> no necesitamos hacer clic en un componente para seleccionarlo: podemos seleccionarlo también haciendo clic en el texto de la etiqueta <label> correspondiente.
En el código HTML anterior hemos creado dos grupos de componentes radio, marcando por defecto como seleccionado uno en cada grupo de opciones.
Al procesar el formulario con un lenguaje del lado del servidor (como PHP) obtendríamos los valores '12' y 'TERCERO' respectivamente (según está indicado en el atributo value de los componentes de tipo radio), si dejamos seleccionados dichos elementos por defecto.
Este elemento acepta también el atributo disabled, visto anteriormente.
Relacionado: [ JavaScript DOM Input Radio ]
Los componentes de tipo checkbox permiten seleccionar o no diferentes opciones:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php" >
<label for="check1">Opción 1</label>
<input type="checkbox" id="check1" name="check1" value="A" />
<label for="check2">Opción 2</label>
<input type="checkbox" id="check2" name="check2" value="B" checked />
<label for="check3">Opción 3</label>
<input type="checkbox" id="check3" name="check3" value="C" /><hr/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
En el código HTML anterior hemos creado tres componentes checkbox, marcando por defecto como seleccionado el segundo con el atributo checked (el tercero en la imagen lo hemos seleccionado manualmente).
Este elemento acepta también el atributo disabled, visto anteriormente.
Relacionado: [ JavaScript DOM Input Checkbox ]
Los cuadros de lista desplegable permiten seleccionar uno o varios elementos. Se crean utilizando las etiquetas HTML <select>, <option> y <optgroup>:
<select
accesskey: para definir una letra que al ser presionada junto con una determinada combinación
de teclado (dependiendo del navegador web usado como explicamos anteriormente), hará que el componente
tome el foco.
disabled: muestra el componente como desactivado (en HTML no hay que asignarle valor alguno, pero según
las especificaciones de XHTML es necesario asignarle como valor el mismo nombre de dicho atributo).
id: identificador (se utiliza sobre todo para acceder al elemento desde JavaScript o CSS).
multiple: permite seleccionar varios elementos (en HTML no hay que asignarle valor alguno, pero según
las especificaciones de XHTML es necesario asignarle como valor el mismo nombre de dicho atributo).
name: nombre del componente. Es necesario indicarlo para acceder a su valor al ser procesado por un
lenguaje de programación del lado del servidor.
size: permite indicar el número de elementos visibles (sólo cuando el componente está configurado para
seleccionar varios elementos).
tabindex: define un orden de tabulación para el componente.
>
</select>
<option
disabled: muestra el componente como desactivado (en HTML no hay que asignarle valor alguno, pero según
las especificaciones de XHTML es necesario asignarle como valor el mismo nombre de dicho atributo).
id: identificador (se utiliza sobre todo para acceder al elemento desde JavaScript o CSS)
selected: define el elemento como seleccionado (de ser usado ha tener valor selected).
value: valor del elemento.
>
</option>
<optgroup
disabled: muestra el componente como desactivado (en HTML no hay que asignarle valor alguno, pero según
las especificaciones de XHTML es necesario asignarle como valor el mismo nombre de dicho atributo).
id: identificador del elemento.
>
</optgroup>
Ejemplo:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php" >
Selecciona:<br/>
<select id="sel1" name="sel1">
<option value="11">Opción 1</option>
<option value="22" selected>Opción 2</option>
<option value="33">Opción 3</option>
<option value="44">Opción 4</option>
</select><p/>
Selecciona:<br/>
<select id="sel2" name="sel2" size="4" multiple>
<option value="UNO">Opción 1</option>
<option value="DOS">Opción 2</option>
<option value="TRES" selected>Opción 3</option>
<option value="CUATRO">Opción 4</option>
<option value="CINCO">Opción 5</option>
<option value="SEIS">Opción 6</option>
<option value="SIETE">Opción 7</option>
<option value="OCHO">Opción 8</option>
</select><p/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
En el código HTML anterior hemos creado dos cuadros de lista desplegable, marcando como seleccionadas por defecto la segunda y tercera opción respectivamente con el atributo selected (la cuarta la hemos seleccionado manualmente).
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php" >
Selecciona:
<select id="sel1" name="sel1">
<option selected value="0">Selecciona un país...</option>
<optgroup label="Europa">
<option value="ESPANIA">España</option>
<option value="FRANCIA">Francia</option>
<option value="INGLATERRA">Inglaterra</option>
<option value="SUECIA">Suecia</option>
</optgroup>
<optgroup label="América">
<option value="ARGENTINA">Argentina</option>
<option value="BRASIL">Brasil</option>
<option value="CANADA">Canadá</option>
<option value="MEXICO">México</option>
</optgroup>
</select>
Selecciona:
<select id="sel2" name="sel2" size="8" multiple>
<option selected value="0">Selecciona un país...</option>
<optgroup label="Europa">
<option value="ESPANIA">España</option>
<option value="FRANCIA">Francia</option>
<option value="INGLATERRA">Inglaterra</option>
<option value="SUECIA">Suecia</option>
</optgroup>
<optgroup label="América">
<option value="ARGENTINA">Argentina</option>
<option value="BRASIL">Brasil</option>
<option value="CANADA">Canadá</option>
<option value="MEXICO">México</option>
</optgroup>
</select><p/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
En el código HTML anterior hemos creado dos cuadros de lista desplegable con dos grupos de opciones.
Este elemento acepta también el atributo disabled, visto anteriormente.
Si no usamos el atributo size es posible que las listas múltiples se muestren de forma diferente en los diferentes navegadores web.
Relacionado: [ JavaScript DOM Select / Option ]
Este componente se usa para hacer subir o hacer upload de archivos, y requiere de un lenguaje de programación del lado del servidor (como PHP).
Observa que en el formulario hay que poner enctype="multipart/form-data":
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" enctype="multipart/form-data" action="formulario.php" >
<input type="file" id="fArchivo" name="fArchivo" size="50" /><br/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
Según el ejemplo, se mostrará un cuadro de texto y junto a él un botón, en el que cuando hagamos clic se mostrará un cuadro de diálogo desde el que podremos seleccionar un archivo:
Este elemento acepta también el atributo disabled, visto anteriormente.
No es posible seleccionar dinámicamente un archivo en este componente usando lenguajes de programación como JavaScript.
Relacionado: [ JavaScript DOM Input File ]
Con la etiqueta <fieldset> podremos dividir el formulario en secciones, y con <legend> indicar un nombre para cada una de ellas:
<legend
align: alineación (bottom | left | right | top). Sólo en modo transitional.
>
</legend>
Ejemplo:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
<fieldset>
<legend>Datos Personales</legend>
Nombre: <input type="text" id="txtNombre" name="txtNombre" />
Apellidos<input type="text" id="txtApellidos" name="txtApellidos" />
</fieldset>
<fieldset>
<legend>Experiencia</legend>
<input type="radio" id="opc1" name="grupo" value="A" /> Menos de un año
<input type="radio" id="opc2" name="grupo" value="B" checked /> 2 a 4 años
<input type="radio" id="opc3" name="grupo" value="C" /> Más de 4 años
</fieldset>
<fieldset>
<legend>Experiencia</legend>
<textarea id="txtComent" name="txtComent" cols="50" rows="5"></textarea>
</fieldset><p/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
La etiqueta <label> nos resultará de utilidad para navegar en un formulario, ya que al hacer clic en su texto se seleccionará el componente del mismo modo que si hicieramos clic en él (útil sobre todo en componentes de pequeñas dimensiones como los radio o checkbox, vistos anteriormente).
Además, hay dos atributos que nos serán también útiles:
- tabindex: nos permite indicar el orden en que iremos navegando entre los componentes del formulario pulsando la tecla Tab.
accesskey: usaremos este atributo para definir unas hotkeys o teclas de acceso rápido, con el fin de poder seleccionar una opción o situarnos rápidamente con el teclado en un componente de un formulario.
Dependiendo del sistema operativo usado se activan de modo diferente: en Windows hay que presionar la tecla Alt y a continuación la tecla de acceso rápido definida como tal, mientras que en sistemas operativos Apple se realiza manteniendo presionada primero la tecla cmd.
El modo en que se muestra que una tecla está definida como de acceso rápido depende del navegador web usado.
Se puede usar con las siguientes etiquetas HTML: <a>, <area>, <button>, <input>, <label>, <legend> y <textarea>.
A continuación te mostramos un ejemplo:
<html>
<head>
<title>Mi primera página WEB: formularios</title>
</head>
<body>
<form id="miFormulario" name="miFormulario" method="post" action="formulario.php">
<label for="txtNombre" accesskey="N"><u>N</u>ombre:</label>
<input type="text" id="txtNombre" name="txtNombre" tabindex="1" accesskey="N" /><br/>
<label for="txtApellidos" accesskey="O"><u>A</u>pellidos:</label>
<input type="text" id="txtApellidos" name="txtApellidos" tabindex="2" accesskey="A" /><p/>
<label for="opc1">M<u>e</u>nos de un año</label>
<input type="radio" id="opc1" name="grupo" value="A" tabindex="3" accesskey="E" />
<label for="opc2">Ent<u>r</u>e 2 y 4 años</label>
<input type="radio" id="opc2" name="grupo" value="B" checked tabindex="4" accesskey="R" />
<label for="opc3">Má<u>s</u> de 4</label>
<input type="radio" id="opc3" name="grupo" value="C" tabindex="5" accesskey="S" /><p/>
<legend><u>O</u>bservaciones</legend>
<textarea id="txtComent" name="txtComent" cols="50" rows="5" tabindex="6" accesskey="O"></textarea><p/>
<input type="reset" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar el formulario" />
</form>
</body>
</html>
