Diseñamos

En el siguiente articulo, trataré de mostrar como construir un formulario accesible mediante elementos XHTML y como darle forma utilizando hojas de estilo.

Este artículo está dirigido a aquellas personas, que estando familiarizadas con el lenguaje html, quieren extender sus posibilidades al diseño accesible mediante XHTML+CSS, usando estandares del diseño para la web.

Para el ejemplo he elegido un formulario de contacto, pero las técnicas empleadas pueden aplicarse a cualquier tipo de formulario que imaginemos.

En nuestro formulario, tendremos tres cajas de texto, una lista desplegable y un botón. Las cajas de texto a su vez, serán de dos tipos, una textarea, y dos elementos input

Para empezar, crearemos un formulario simple, contenido dentro de un div, algo más o menos como lo siguiente.

<div id="cform">

    <form method="post" action="#">

          <textarea name="notes" rows="13" cols="55"></textarea>

          <input type="text" name="name" title="Tu Nombre" />

          <input type="text" name="mail" title="Tu dirección de correo" />

          <select name="food">

                 <option>Pizza</option>

                 <option>Hamburguesa</option>

                 <option>Lechuga</option>

                 <option>Tomate</option>

                 <option>Cebolla</option>

                 <option>M&M's</option>

                 <option>Smartie<s/option>

                 <option>Cacaolat</option>

           </select>

           <input type="submit" id="submit" name="send" value="Enviar »" title="Pulsa una vez para enviar el mensaje, y espera a la pantalla de confirmación" />

    </form>

</div>

Como pueden ver en el siguiente enlace, los elementos del formulario están creados, pero la verdad es que poco podemos hacer dejándolos así.

A continuación añadiremos una serie de elementos complementarios, que mejoraran la accesibilidad y por defecto la experiencia del usuario.

Para lograr este objetivo, necesitamos indicar al usuario como utilizar estos elementos, en XHTML tenemos la etiqueta label, que se puede asociar a casi cualquier elemento dentro de un formulario, además, para reforzar la lógica dentro del contexto, tenemos las etiquetas fieldset y optgroup, que nos permite crear grupos de elementos dentro del formulario. Combinando todo esto obtenemos el siguiente codigo.

<div id="cform">

    <form method="post" action="#">

        <fieldset><legend>Formulario de Ejemplo</legend><br />

            <div>

                <label for="notes">Cuerpo del Mensaje:</label>

                <textarea name="notes" rows="13" cols="55"></textarea><br />

            </div>

            <div>

                <label for="name">Nombre:</label>

                <input type="text" name="name" title="Tu Nombre" /><br />

            </div>

            <div>

                <label for="mail">Dirección de correo:</label>

                <input type="text" name="mail" title="Tu dirección de correo" /><br /

            </div>

            <div>

                <label for="food">Elige tu comida favorita</label>

                <select name="food">

                    <option value="">Seleccionar ... </option>

                    <optgroup label="Dieta Basica">

                        <option>Pizza</option>

                        <option>Hamburguesa</option>

                    </optgroup>

                    <optgroup label="Verde">

                        <option>Lechuga</option>

                        <option>Tomate</option>

                        <option>Cebolla</option>

                    </optgroup>

                    <optgroup label="Fruta">

                        <option>M&M's</option>

                        <option>Smarties</option>

                        <option>Cacaolat</option>

                    </optgroup>

                </select><br />

            </div>

            <div>

                <input type="submit" id="submit" name="send" value="Enviar »" title="Pulsa una vez para enviar el mensaje, y espera a la pantalla de confirmación"

            </div>

        </fieldset>

    </form>

</div>

Ya tenemos nuestro formulario construido, totalmente accesible, y con un codigo valido XHTML1.1, creo que es el turno del empezar con nuestra hoja de estilo.

Para el diseño, quiero utilizar la propiedad float, todos los elementos estaran contenidos dentro de un div de 480px de ancho, flotando a la izquierda.

html, body {

    font-family:"Trebuchet MS", Verdana, sans-serif;

    background-color:#FAFBFC

}

#cform {

    width:480px;

    margin:80px auto 0 auto

}

fieldset div input {

    float:left;

    width:194px;

    padding:0.15em

}

html>body label {

    display:block

}

input {

    width:316px

}

select {

    width:200px

}

textarea {

    float:left;

    padding:0;

    margin:10px;

    width:180px;

    height:180px

}

input#submit {

    padding:0.15em;

    margin:10px 0;

    width:200px;

    font:bold 100% Verdana, Helvetica, Arial, sans-serif

}

Estamos casi en el proceso final, hasta el momento, tenemos todos los elementos posicionados a la izquierda, hemos declarado el tamaño por defecto y tan solo nos quedan los toques finales, para obtener resultados como este.

Si mirais el codigo del ejemplo final, podreis ver que he usado la propiedad overflow:auto; para el elmento fieldset, añadiendo esto conseguimos que actue como un contenedor, rodeando por completo todos los elementos flotantes. Tambien quisiera señalarles el uso que haremos de las pseudo-clases :active, :hover y :focus, para reforzar el impacto visual, captando la atención sobre el elemento en cuestión, estos pequeños detalles son los que facilitan la navegación al usuario.

Como ven, las posibilidades son inmensas. Con un poco máas de trabajo se pueden construir formularios muy complejos , pero eso lo dejaremos para un artículo próximo. Por ahora espero que esta explicación os sirva al menos como ayuda para vuestros proyectos.