Formularios
Hasta ahora hemos visto la forma en la que HTML gestiona y muestra la información, esencialmente mediante el texto, imágenes y enlaces. Nos queda por ver de qué forma podemos intercambiar información con nuestro visitante. Desde luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante la web: comprar un artículo, rellenar una encuesta, enviar un comentario al autor, etc.
Hemos visto anteriormente que podíamos, mediante los enlaces a direcciones de email, contactar directamente con un correo electrónico. Sin embargo, esta opción puede resultar en algunos casos poco versátil, si lo que deseamos es que el navegante nos envié una información bien precisa y además requiere que el visitante tenga instalado en su ordenador algún correo electrónico en un programa como Outlook Express.
Es por ello que el HTML propone otra solución mucho más amplia: los formularios.
Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales, por ejemplo en sitios comerciales de electrónica. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.
El formulario es la forma en que el visitante de la página web manda información a un administrador.
El formulario consta de unos mecanismos en donde el usuario responde a una serie de preguntas. Para ello puede escribir en una serie de cajas la información solicitada y/o también elegir entre una o varias opciones disponibles, las cuales pueden formar o no una lista.
El lenguaje HTML puede crear formularios con cajas de texto y botones que mandan información, si bien, mediante HTML solo podemos enviarlo a un correo electrónico. Si queremos recoger los datos para procesarlos debemos usar algún lenguaje de programación como ASP o PHP que nos permitirán, entre otras cosas, el tratamiento y manejo de formularios y su envío de bases de datos.
ELEMENTOS HTML
Un formulario debe ir siempre dentro de la etiqueta <form>…</form>. Tanto los elementos para mandar información como los adicionales (textos, imágenes, etc.) explicativos sobre la información que se debe mandar deben ir encerrados dentro de estas etiquetas.
Los elementos de formulario que recogen información como botones y cuadros de texto, se denominan campos de formulario o controles de formulario. La mayoría de controles se crean con la etiqueta <input>, esto lo veremos más adelante.
ATRIBUTOS PARA LA ETIQUETA <FORM>
Dentro de la etiqueta <form> debemos insertar algunos atributos:
-
action: indica donde va a ser enviado el formulario. Como ya dijimos hay dos posibilidades: enviarlo a un correo electrónico o enviarlo a una página en PHP o programa del servidor para que procese un contenido.
En el primer caso el contenido del formulario es enviarlo a la dirección de correo electrónico.
<form action=’ejemplo@gmail.com’>
Si lo que queremos es que el formulario sea procesado por código PHP o un programa del servidor, hemos de especificar la ruta del archivo que contiene dicha página o programa.
<form action=’dirección del archivo’>
<form action=’procesar/pagina.php’>
La forma de expresar la ruta del archivo del correo al que se manda el formulario es la misma que para los enlaces.
-
method: se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar este atributo son “POST” y “GET”. Normalmente, y salvo que, digamos lo contrario daremos valor “POST”.
“GET” indica que los datos enviados se adjuntaran en la barra de direcciones del cliente, al final de la URL correspondiente y después de un signo de interrogación de cierre. Si se envía más de un texto estos irán separados por el símbolo “&”.
El valor “POST” indica que el método de envió no se hará a través de la URL, sino formando parte del cuerpo en la petición.
-
enctype: se utiliza para indicar la forma en la que viajara la información. En el caso de enviar el formulario por correo electrónico, el valor de este atributo debe ser “text/plain”. Así conseguimos que se envié el contenido del formulario como texto plano dentro del email.
Para enviar la información a un programa que procese la información generalmente no utilizaremos este atributo de modo que tome su valor por defecto.
ENVIO DEL FORMULARIO
Como se supone que no sabemos PHP, ni disponemos de un programa que procese la información, supondremos que enviamos un formulario por email.
<form action=’ejemplo@gmail.com’ method=’POST’ enctype=’text/plain’>
CAMPOS DE TEXTO
Llamamos campos de texto, dentro de un formulario, a los elementos que nos permiten recoger texto escrito por el usuario. En la pantalla se muestra una pequeña caja donde el usuario puede escribir el texto que pretende enviar.
Podemos crear varios tipos de campos de texto, bien sea para introducir un dato simple (nombre, edad, dirección, etc.), pero también podemos crear un campo de texto para un dato simple, pero con texto oculto, del tipo contraseña.
Delante o detrás de estos elementos debemos indicar, mediante el lenguaje HTML habitual para texto, el tipo de dato que queremos que el visitante proporcione, ya que los campos de texto son simples cajas, en las que escribir la información, la cual será enviada posteriormente.
Como se dijo anteriormente, todo el formulario debe ir dentro de las etiquetas <form>…</form>, las cuales forman una caja que lo engloba.
-
texto corto: para crear una caja en la que escribir un texto corto, donde se introduce un dato simple, usaremos la etiqueta <input> con el atributo y valor “type=’text’”. El atributo “name=’tipodedato’” también es obligatorio, ya que nos indicara al recibirlo que tipo de dato queremos recoger.
<input type=’text’ name=’tipodedato’/>
La etiqueta <input> se utiliza para varios tipos de campos de formularios, es decir, que sirve para tanto introducir texto en formulario, como para otras formas de introducir información (botones, otros tipos de texto, etc.). Esta etiqueta no tiene cierre, por lo que en HTML le insertaremos una barra al final.
El atributo “type” indica que tipo de campo se aplica al formulario; es decir, específica de qué forma se van a introducir los datos y da forma a la manera en que se visualizara en la pantalla. Esto se define mediante el valor que se le asigne. En el ejemplo que hemos puesto debe llevar siempre el valor “text”.
Es necesario “name” para el procesamiento de los datos ya que indica que tipo de dato se recoge. Como valor podemos poner en principio cualquier texto, pero conviene que sea una referencia al tipo de dato que recogemos (por ejemplo, nombre, dirección, email, etc.), ya que será la referencia que tengamos en el email que recibamos, o en el programa que procese los datos.
A estas cajas de texto debemos ponerle delante o encima de ellas una indicación del tipo de datos que queremos recoger, lo cual lo indicamos en la forma habitual para escribir texto en HTML.
<p>Nombre: <input type=’text’ name=’nombre’/></p>
Como se puede observar la etiqueta <input> es un elemento en línea, por lo que para estructurar el formulario, debemos ayudarnos de otras etiquetas como los párrafos o etiquetas <br>.
Además de estos dos atributos esenciales para el correcto funcionamiento de nuestra etiqueta, existen otra serie de atributos que pueden resultarnos de utilidad pero que no son imprescindibles:
-
size: define el tamaño de la caja a los ancho. Su valor es un número que indicara cuantos caracteres (letras o espacios) va a ocupar. Si el texto ocupa más sitio que la caja solo veremos el final del mismo. Si al escribir el usuario llega al final de la caja, el texto que escriba a continuación también cabra dentro del campo, pero ira desfilando, a medida que escribe, haciendo desaparecer la parte del texto que queda a la izquierda.
-
maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito en el campo. En caso del que el campo de texto tenga definido el atributo “maxlength”, el navegador no permitirá escribir más caracteres en este campo que los que hayamos indicado.
NOTA: es importante no confundir “maxlength” con “size”. Mientras “size” define el tamaño visible de la caja del texto, “maxlength” indica el tamaño máximo real del texto que se puede escribir. Podemos tener una caja de texto con un tamaño aparente que es menor que le tamaño máximo. Lo que ocurrirá en este caso, es que al escribir, si sobrepasamos el espacio marcado por “size”, el texto ira desfilando dentro de la caja hasta que lleguemos a su tamaño máximo definido por “maxlength”, momento en el cual nos es imposible continuar escribiendo.
-
value: indica el texto que aparecerá escrito en la caja por defecto cuando se cargue la página. El texto que insertemos como valor de este atributo, es el que se mostrara por defecto. Normalmente las cajas de texto aparecen vacías, pero mediante este atributo en la caja de texto, vemos escrito este texto. Esto puede ayudar al usuario a rellenar as rápidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren.
-
TEXTO OCULTO
Podemos crear una caja de texto oculto, que funcione igual que el anterior, pero en la cual los caracteres que escribamos permanecerán ocultos, en su lugar se muestran unos puntos gruesos que los sustituyen.
Este tipo de etiquetas son las que se emplean para introducir contraseñas, de manera que aporten una cierta confidencialidad. Este tipo de campos son análogos a los del texto con una simple diferencia, reemplazaremos el valor del atributo “type=’text/plain’” por “type=’password’”. Estos campos son ideales para la introducción de datos confidenciales, principalmente códigos de acceso o claves.
<input type=’password’ name=’clave’/></p>
Admite también los atributos “size”, “maxlength” y “value”, con los mismos efectos.
En muchos formularios de páginas web, se utiliza este campo para entrar en zonas restringidas. A veces pide confirmación de contraseña, teniendo que escribir esta dos veces. Todo esto está fuera del alcance de HTML, ya que suele hacerse mediante código JavaScript, PHP y otros programas.
TEXTO LARGO
Si deseamos poner a la disposición del usuario un campo de texto donde pueda escribir cómodamente sobre un espacio compuesto de líneas, hemos de insertar una nueva etiqueta, <textarea>…</textarea>.
Este tipo de campos son prácticos cuando el contenido a enviar no es un nombre, teléfono, edad o cualquier otro dato breve, sino más bien, un comentario, opinión, etc. en los que existe la posibilidad de que el visitante desee rellenar varias líneas.
Dentro de la etiqueta <textarea> debemos indicar, como en anteriores casos, el atributo “name” para asociar el contenido a un nombre que será asemejado a una variable en los programas de proceso. Además, esta etiqueta admite dos atributos para cambiar el ancho y el alto de la caja de texto. Estos son “rows” y “cols”.
-
rows: define el número de líneas del campo de texto, es decir, su altura o filas de texto que caben. Si al escribir se sobrepasan, la caja muestra una barra de desplazamiento en su parte derecha.
-
cols: define el número de columnas del campo de texto, medido en números de caracteres, es decir, la anchura o número de caracteres que se pueden escribir por línea.
Para que aparezca un texto predefinido, dentro de la etiqueta no usaremos el atributo “value”, sino que escribiremos el texto que queremos que aparezca entre las etiquetas.
<textarea name=’comentario’ rows=’10’ cols=’20’>Comentario</textarea>
LISTA DE OPCIONES
Para determinados casos, los textos libres son difícilmente adaptables a programas que puedan procesarlos debidamente. Es por ello que, en determinados casos, puede resultar más efectivo proponer una elección al navegante a partir del planteamiento de una serie de opciones disponibles y definidas por nosotros.
Este tipo de opciones predefinidas por nosotros pueden ser expresadas por medio de diferentes campos de formulario.
Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una o varias de las múltiples opciones que nos proponen. Para construirlas emplearemos la etiqueta <select>…</select>.
Como para los ejercicios ya vistos en formularios, dentro de esta etiqueta definiremos su nombre por medio del atributo “name”.
Cada opción o elemento, será incluida en una línea precedida de la etiqueta <option>…</option>.
Esta estructura puede verse modificada principalmente a partir de otros dos atributos.
-
size: indica el número de valores mostrado a la vez en la lista. Lo típico es que no se incluya ningún valor en el atributo “size”, en ese caso tendremos un campo de opciones desplegable, pero si indicamos un valor aparecerá un campo donde veremos las opciones definidas por “size”, y el resto podrán ser vistos por medio de la barra lateral de desplazamiento, su valor es numérico.
-
multiple: permite la selección de más de un elemento de la lista. Esta elección se hace como el explorador de Windows, con las teclas CTRL o SHIFT. Este atributo se expresa sin valor alguno, es decir, no se utiliza con el igual, simplemente se pone para conseguir el efecto, o no se pone si queremos una lista desplegable común. En código XHTML puede aparecer como “multiple=’multiple’”.
NOTA: si es posible no utilices multiple. No se recomienda la puesta en práctica de este atributo, ya que el manejo de las teclas CTRL o SHIFT para elegir varias opciones, puede ser desconocido para el navegante. Evidentemente siempre cabe la posibilidad de explicarle como funciona aunque no dejara de ser una complicación para el visitante.
La etiqueta <option> puede ser asimismo optimizada por medio de otros atributos.
-
value: define el valor de la opción que será enviado al programa o correo electrónico si el usuario elige esa opción. Este atributo puede resultar muy útil si el formulario es enviado a un programa para su procesamiento, puesto que a cada opción se le puede asociar un número o letra, la cual es más fácilmente manipulable que un texto.
-
selected: del mismo modos que el atributo “multiple” este atributo no toma ningún valor, sino que simplemente indica que la opción que lo presenta esta elegida por defecto.
LOS BOTONES
Además de poder enviar texto mediante un formulario, podemos hacer que el usuario elija entre varias opciones que le presentaremos en formato botón. Para ello se le presenta una serie de opciones o casilleros entre los cuales el usuario puede marcar los que le interesen.
En el caso de los botones “radio” se le presentan varias opciones de las que deberá marcarse solo una. Si se intentan elegir dos opciones, al elegir la segunda opción, se desactiva la primera.
-
el atributo “name” es obligatorio.
-
cada botón u opción que puede elegir el usuario consta de una etiqueta <input> con el atributo y valor “type=’radio’”.
-
el atributo “value” también es obligatorio, debemos dar valores distintos a cada una de las etiquetas, ya que mediante este atributo sabemos cuál es el valor que el usuario ha marcado. El valor que le damos debe hacer referencia a la opción de su etiqueta.
-
por último, debemos escribir al lado de la etiqueta del botón, bien sea delante o detrás, el texto que debe aparecer junto a la etiqueta, para que el usuario sepa a qué se refiere cada uno de los botones.
Como puede verse, a cada una de las opciones se le atribuye una etiqueta <input> dentro de la cual, asignamos el mismo nombre, “name” para todas las opciones y un “value” distinto. Si el usuario elije en el ejemplo la opción de otoño, recibiremos en nuestro correo una línea que indicara “estación=3”.
Cabe señalar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo “checked”.
CAJAS DE VALIDACION
También llamadas “checkbox”, son también botones de opciones, pero en este caso podemos marcar uno o varios a la vez, ya que al marcar uno, no se desactivan los otros, pues cada botón es independiente al resto.
Cada botón u opción consta de la etiqueta <input> seguida del atributo y valor “type=’checkbox’”. El atributo “name” es obligatorio y aquí indica la referencia al botón, por lo tanto debe ser distinto en cada uno de los botones, ya que en el correo o programa de procesamiento de datos recibiremos un mensaje del tipo “referencia=on/off”, dependiendo de si el botón ha sido activado o no.
Al igual que en los botones “radio”, debemos escribir delante o detrás de la etiqueta del botón, el texto que queremos que aparezca para que el usuario sepa a qué se refiere cada uno de los botones.
Al igual que en los botones “radio” se le puede dejar una o varias opciones ya marcadas al cargar la página mediante el atributo “checked”.
OTROS CAMPOS
Como podemos imaginarnos, en formularios no solamente habrá elementos o campos donde solicitar información del usuario, sino también hará que implementar otra serie de funciones. Concretamente, han de transmitirnos su envió mediante un botón. También puede resultar práctico poder poner un botón de borrado o bien acompañar el formulario de datos ocultos que puedan ayudarnos en su procesamiento.
-
botón de envió: es el único botón que es obligatorio, ya que todo formulario debe ser enviado a algún correo o página de procesamiento. Para dar por finalizado el proceso de relleno de formulario y hacerlo llegar a su gestor, el navegante ha de enviarlo por medio de un botón previsto a tal efecto.
<input type=’submit’/>
La etiqueta y atributo superior, es al que indica que este es el botón de envió. El atributo “value” indica cual es el texto que incluiremos dentro del botón (normalmente, Enviar).
Este tipo de campos <input>, para el envió de formularios, a menudo se conocen simplemente como “botones de submit”.
Este tipo de botones envía automáticamente el formulario en el que se encuentra cuando es presionado. Es decir, cuando se pulsa el botón, el navegador nos lleva a la dirección web indicada en el campo “action” y al mismo tiempo envía a esa dirección los datos que contiene el formulario.
-
botón de borrado: este botón sirve para borrar todos los campos del formulario y dejarlos en sus valores predeterminados, caso de haberse equivocado, o querer cambiar algunos datos una vez relleno, el usuario puede pulsar este botón y volver a empezar a rellenarlo.
A diferencia del botón de envió, indispensable en cualquier formulario, el botón de borrado resulta meramente operativo y no es utilizado frecuentemente. Hay que tener cuidado de no ponerlo muy cerca del botón de envió, y de distinguir claramente el uno del otro, para que ningún usuario borre el contenido del formulario que acaba de rellenar por error.
<input type=’reset’ value=’borrar’/>
envió de archivos adjuntos: podemos pedir al usuario que nos envié junto al formulario un archivo adjunto, para ello usaremos el código <input type=’file’/>.
El atributo “name” es imprescindible para poder recibir correctamente los datos.
<input type=’file’ name=’archivo’/>
Al pulsar el botón examinar o seleccionar, se abrirá el cuadro de Windows para buscar el archivo, buscaremos y al hacer click en abrir tendremos el archivo seleccionado para enviarlo. En algunos navegadores aparece un cuadro de texto a la derecha del botón en el que podemos escribir directamente la ruta del archivo.
Al incluir un control para adjuntar archivos, es obligatorio añadir el atributo “enctype”, que en este caso debe ser “multipart/form-data”, por lo tanto la etiqueta <form> para poder adjuntar un archivo es el siguiente.
<form action=’’ method=’POST’ enctype=’multipart/form-data’>
-
campos ocultos: en algunos casos, aparte de los datos enviados por el usuario, puede resultar útil enviar otros datos definidos por nosotros mismos que ayuden al programa a procesar el formulario. Este tipo de datos, que no se encuentra en la página pero son detectados en el código fuente, no suele utilizarse en páginas construidas en HTML, son usados por páginas que emplean otro tipo de programas para procesar los datos.
<input type=’hidden’ name=’sitio’ value=’www.google.com’/>
El usuario ignora que existe este tipo de campo, ya que no se ve en pantalla. Su código HTML lleva siempre el atributo y valor “type=’hidden’”, que es el que indica que este es un campo oculto. Por lo demás, no suelen utilizarse si solo se emplea código HTML, ya que suelen enlazar con otro tipo de programas para procesar y guardar los datos de forma automatizada.
-
botones normales: dentro de los formularios también podemos colocar botones normales, pasables como cualquier otro botón. Igual que ocurre con los campos ocultos, estos botones por si solos no tienen mucha utilidad, pero podremos necesitarlos para realizar acciones en el futuro.
<input type=’button’ value=’texto’/>Texto escrito
El uso más frecuente de un botón es en la programación en el cliente. Utilizando lenguajes como JavaScript podemos decidir acciones a tomar cuando un visitante pulse el botón de una página web.
Los botones de contenido pueden ser usados como botones de envió de restablecimiento, o bien puede no tener ninguna acción prestablecida (dependiendo del valor de su atributo “type”). Su característica principal es que se puede insertar contenido HTML dentro de ellos y así dotarlo de un aspecto atractivo.
Los botones de contenido se insertan con el TAG HTML “button”, “submit” o “reset” en el atributo “type”. Un valor “button” supondrá que el botón no hará nada en respuesta a un click, a no ser que se especifique una acción de otra manera (por ejemplo, usando el lenguaje JavaScript). Un valor “submit” hará que el botón funcione como un botón de envió. Finalmente, un valor “reset”, hará que el botón funcione como un botón de restablecimiento de los valores predeterminados del formulario.
Como podemos observar en el ejemplo, hemos introducido contenido HTML dentro del propio botón; en concreto hemos usado la etiqueta <b> para poner parte del texto en negrita y la etiqueta <br> para introducir un salto de línea. Ten en cuenta que la apariencia varía según el navegador que utilices.
A su vez hemos escrito “<button type=’submit’>”, lo que supondrá que el botón funcione como un botón de envió. Si hubiéramos escrito “<button type=’reset’>”, el botón funciona como un botón de restablecimiento de valores por defecto, y si hubiéramos escrito “<button type=’button’>”, el botón daría lugar a ninguna acción. En caso de no especificarse el atributo “type” para el botón, normalmente el navegador consideraría que es un botón de envió.
-
botón de imagen: este tipo de botones funcionan de la misma forma que los botones de envió salvo que los botones de imagen son representados visualmente con la imagen especificada en el atributo “src”. Los botones de imagen envían, además de toda la información contenida en el formulario, las coordenadas donde ha ocurrido el click cuando el formulario fue enviado. Las coordenadas se determinan desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado “boton1”, las coordenadas serán enviadas en la forma “boton1.x” y “boton1.y”). En ocasiones las coordenadas no serán útiles, pero no tenemos que preocuparnos por ello ya que bastara con recuperar la información útil.
<input name=’button’ type=’image’ src=’image.jpg’/>
-
formularios avanzados: las etiquetas <fieldset> y <legend> se utilizan en conjunto y sirven respectivamente para definir y etiquetar grupos lógicos de elementos de formularios. Realmente no afecta a la operativa del formulario, pero sirven para agrupar elementos en diferentes áreas, de modo que se clasifique la entrada de datos del usuario. Al formar varios grupos de elementos se puede crear una estructura mucho más fácil de asimilar por el usuario., sobre todo si se trata de formularios que tengan muchos elementos.
Es posible mejorar el aspecto de un formulario agrupando varias etiquetas en un mismo apartado. Para ello utilizaremos la etiqueta <fieldset>. Dentro de ella incluiremos varios campos. Esta etiqueta agrupa dentro de un cuadro a los campos incluidos dentro de ella.
Además, también podemos poner una cabecera, o título al cuadro que forma la etiqueta <fieldset> mediante la etiqueta <legend>, la cual debe estar también incluida en la etiqueta <fieldset>.
Mediante la etiqueta <fieldset> se crea un grupo que agrupa varios elementos de formulario. En un formulario podemos incluir varias etiquetas <fieldset> con <legend>, creando así varios apartados dentro del formulario.
La etiqueta <legend> debe estar incluida dentro de <fieldset> como se ve en el ejemplo anterior.
La etiqueta <legend> añade simplemente una nota aclaratoria sobre qué tipo de información se está agrupando en el recuadro. Tampoco sirve para nada en especial de no ser porque queda bonita y porque puede servir para ayudar al usuario y mejorar la interfaz y la claridad de los formularios.
A la etiqueta <legend> se le puede añadir el atributo “align” para indicar el lugar donde debe aparecer la leyenda. Por ejemplo, podríamos indicar “align=’rigth’” para que apareciera en la parte de la derecha, en lugar de la izquierda que es donde aparece por defecto.
En la mayoría de los controles de formulario no hay establecida una relación entre el campo y el texto que se muestra junto al control. Hasta ahora el texto que se muestra junto al campo se incluye en forma de texto normal, sin ninguna referencia al campo que describe.
Podemos, no obstante, en el texto adjunto, hacer referencia a su campo mediante la etiqueta <label>, la cual debe encerrar el texto que se mostrara como explicación al campo.
Mediante esta referencia, para marcar los campos de texto o activar los campos de botones podemos hacerlo también haciendo un click sobre el texto.
La relación entre la etiqueta <label> y su correspondiente etiqueta dentro del campo de formulario se hace mediante los siguientes atributos:
-
en la etiqueta <label> incluiremos el atributo “for”.
-
en la etiqueta del control (input, select, etc.) incluiremos el atributo “id”.
-
el valor de los atributos “for” e “id” serán los mismos, ya que es lo que relaciona el texto explicativo con su etiqueta. Por tanto debe ser el mismo para un mismo control y distinto del de los demás controles con los que no esté relacionado.
Aunque aparentemente el ejercicio tiene el mismo aspecto que sin la etiqueta <label>, la diferencia en la pantalla es que al pulsar con el ratón encima del texto explicativo queda seleccionado el campo al que hace referencia; esto puede ser útil en los controles de botones de “radio” y “checkbox”.
Los botones de enviar, borrar y botón normal no necesitan la etiqueta <label>, ya que su texto va incluido dentro del botón.
NOTA: al estilo o aspecto que queremos darle a un formulario, es decir, tipo y tamaño de la letra, márgenes, bordes, colores e imágenes de fondo, etc., puede y debe hacerse mediante el código CSS, para ello basta con aplicar las mismas propiedades que para los textos, párrafos, etc.
El tratamiento de cualquier elemento del formulario, incluso los botones, por medio de estilos CSS es similar a cualquier otro elemento de la página, pudiendo usar las mismas propiedades.
NOTA: dentro de la etiqueta <legend> indicaos que se admitía el atributo “align” con los siguientes valores “left/center/top/bottom/rigth”, lo que nos permite alinear el titulo horizontal y verticalmente.
-