Crear formularios con XHTML y CSS

Es hora de empezar con el estudio de uno de los elementos más importantes dentro de una estructura XHTML, los formularios.

Los formularios son una parte importante en casi todos los sitios comerciales que existen en Internet, por no decir que en todos, por lo que representan el elemento clave para establecer una comunicación sin necesidad de tener que hacer alguna llamada o visita personal.

Pero su función no se ve limitada a esto, podemos explotar su potencial para incluso realizar algún tipo programación avanzada.

Su funcionalidad de obtener datos para después procesarlos nos da la oportunidad de realizar el número de operaciones que deseemos con la información. Así las tareas pueden ir desde una sencilla calculadora realizada con JavaScript hasta un graficador hecho con PHP.

Lo que sucede más allá del formulario ya no corresponde a XHTML ni CSS, dependerá y variará según las operaciones que el diseñador o desarrollador necesiten hacer, el uso de lenguajes o aplicaciones especializadas entra en juego.

Elemento form

La etiqueta “form” es la utilizada para definir un nuevo formulario dentro de nuestro código XHTML, cuenta con una apertura y un cierre, en medio de esto deben ir definido todos los campos y botones que va a tener nuestro formulario.

<form action=”webera.php” method=”post”>
<!-- En esta parte tendremos los campos -->
</form>

Como se puede observar, el campo de apertura tiene dos atributos principales, estos son “action” y “method”:

• El atributo “action” se encarga de decirle al navegador a que lugar mandar la información obtenida en el formulario cuando ésta se envía. Es decir su valor puede ser cualquier página o script que vaya a procesar la información y hacer algo con ella.
• Por su parte el atributo “method” se encarga de definir la manera en que vamos a enviar esa información, para esto tenemos dos opciones básicas “get” o “post”.

La diferencia entre “get” y “post” esta en el medio que utilizan para mandar la información, mientras que “get” utiliza la URL para mandar los datos, “post” lo hace utilizando los HTTP headers.

El uso de uno u otro método variará según lo que queramos hacer, “get” representa menos seguridad para el manejo de información ya que cualquiera puede tener acceso simplemente leyendo la URL, aunque para evitar esto se puede utilizar encriptación.

Campos y botones del formulario

La forma en que usuario podrá añadir información a un formulario será a través de campos, los cuales varían según el tipo de información que se debe insertar.

Si bien existen muchos tipos de campos, las etiquetas para definirlos son básicamente tres: “input”, “textarea” y “select”.

El elemento “input” es el más importante de todos, ya que puede utilizarse para definir distintos campos, incluso botones, ya que su atributo “type” es el que se encarga de definir que uso darle al elemento.

Identificación de los campos

Si enviamos todos los datos introducidos en un formulario sin nada que los identifique, por obvias razones el procesamiento resultará defectuoso.

El atributo “name” es el que originalmente recibía esta función de identificación, pero con las nuevas formas de programación frontend, el “id” de un elemento también puede ser usado para realizar la labor de diferenciación y reconocimiento del contenido.

Si por ejemplo quisiéramos especificar que un campo será utilizado para introducir la edad del usuario, entonces debemos realizar lo siguiente:

<input name="edad" />

Etiqueta “input”

Esta etiqueta es la madre de todas, gracias a su uso podemos crear diferentes tipos de elementos de formulario, desde cajas de texto hasta botones radio, casillas de selección, entre otros.

Existen 10 valores posibles para el atributo “type” del elemento “input”, estos definirán una función específica para el campo.

1. El más común de estos valores es “text”, al dar este valor al atributo estamos indicando que el campo será una caja de texto que contendrá una línea sencilla.
2. Otros de los valores comunes son “password” que agrega una caja cuyo texto es protegido, es decir no se ven los caracteres como tal.
3. También encontramos el valor “checkbox” que sirve para crear casillas de selección.
4. El valor “radio” crea botones de tipo radio generalmente utilizado para seleccionar una de varias opciones.
5. El valor “hidden” oculta el campo para que no sea visible en la interfaz.
6. “submit” crea un botón para mandar la información del formulario.
7. “reset” añade un botón que resetear todos los campos a su estado original.
8. “file” agrega la funcionalidad de elegir archivos para enviarlos.
9. “image” sirve para indicar las coordenadas donde se dio clic a una imagen.
10. Y “button” sirve para crear botones que no necesariamente tienen que mandar información.

Input type=”text”

En conjunto con este valor podemos utilizar otros atributos como “maxlength”, el cual limita el número de caracteres que se pueden escribir en el cuadro de texto.

Si por ejemplo quisiéramos una caja de texto en línea sencilla que únicamente permita incluir 10 caracteres, definiríamos una línea como la siguiente en el código:

<input type="text" maxlength="10" />

También podemos incluir un valor por defecto en nuestra caja, si quisiéramos mostrar una palabra o incluir siempre el mismo valor para evitar que se olvide el llenado de este campo, para ello existe el atributo “value”.

Si a nuestro campo declarado le queremos dar como valor predeterminado la palabra “La Webera” haremos lo siguiente:

<input type="text" maxlength="10" value="La Webera" />

Input type=”password”

La encriptación se hace con la intención de proteger la contraseña que el usuario está introduciendo, de esa manera únicamente él sabrá qué escribió en el campo y algún que otro fisgón no podrá obtenerla a simple vista.

<input type="password" name="contrasena" maxlength="20" />

Input type=”checkbox”

A la hora de declarar este valor el campo input cambia de forma, ya no será una caja de texto, será un recuadro que podemos seleccionar y al dar clic sobre él un signo de correcto aparecerá.

Al momento de enviar el formulario todas aquellas casillas que estén seleccionadas serán enviadas para su procesamiento, en cambio aquellas que no lo estén simplemente serán ignoradas.

Por defecto todas las casillas están deseleccionadas, en caso de que quieras que algunas aparezcan seleccinadas debes añadir el atributo “checked” de la siguiente manera:

<input type="checkbox" name="opcion" checked="checked" />

Si el elemento “input” no cuenta con un atributo “value” entonces lo que se enviará para procesarse es el “name”, pero en caso de contar con “value” esto será lo que el servidor recibirá para utilizarse.

Input type=”radio”

Para ello se le da el mismo nombre a un grupo de botones radio y de esa manera cuando uno de los radios es seleccionado el resto se deselecciona automáticamente.

<input type="radio" name="pais" value="mexico" checked="checked" />
<input type="radio" name="pais" value="espana" />
<input type="radio" name="pais" value="chile" />

En esta ocasión el atributo “value” es totalmente necesario, ya que eso es lo que identificará cada opción.

Input type=”hidden”

Para propósitos de interfaz este valor puede sonar algo absurdo o innecesario, pero para cuestiones de manejo de información y procesamiento del lado servidor puede ayudar mucho, ya que nos permite añadir información al formulario sin permitir que el usuario pueda observarla y por lo tanto modificarla.

<input type="hidden" name="numcliente" value="13456yui89" />

Esta información puede provenir del lado de Javascript o del propio HTML por lo que una vez que los cálculos necesarios son realizados el valor se agrega al campo “input” y la información se procesa después del lado servidor.

Input type=”submit”

La manera más fácil y común de enviar la información que fue depositada en un formulario es a través de un botón de tipo “submit”.

El texto que veremos dentro de este botón variará según el navegador, ya que por defecto cada uno le da un valor distinto, por lo que es común utilizar un valor personalizado para definir dicho contenido. Si por ejemplo quisiéramos que el botón diga “Manda el formulario!” en vez del típico “Submit”, basta con hacer lo siguiente:

<input type="submit" value="Manda el formulario!" />

Elemento “textarea” de HTML

A diferencia de las múltiples opciones y configuraciones que se pueden presentar en un elemento “input”, “textarea” representa una sentencia sencilla con un uso simple y directo, aceptar y desplegar grandes cantidades de texto que después se mandarán al servidor para su procesamiento.

El elemento “textarea” cuenta con una etiqueta de apertura y otra de clausura, y el texto que escribamos entre esas dos etiquetas será el que se mostrará en el elemento al momento de visualizarse en la interfaz.

Si quisiéramos introducir una área de texto cuyo contenido sea “Inserta tu resumen aquí” haríamos lo siguiente:

<textarea name="resumen" rows="10" cols="20">Inserta tu resumen aquí</textarea>

Los atributos “rows” y “cols” de HTML son totalmente obligatorios, estos ayudarán a definir el tamaño del área de texto que vamos a mostrar, esto modifica en principio la altura y anchura del elemento pero después puede ser modificado mediante el uso de CSS.

En nuestro ejemplo estamos definiendo 10 filas de alto y 20 columnas de ancho.

Elemento “select” de HTML

Si bien éste es el comportamiento considerado comúnmente como normal, también existe la posibilidad de crear elementos “select” de tipo múltiple, permitiéndole al usuario elegir más de una opción.

Para definir la opciones dentro del menú de selección debemos recurrir a otra etiqueta la cual lleva por nombre “option”.

Cada opción que queramos desplegar deberá de ir entre una etiqueta “option” de apertura y otra de cierre, si por ejemplo quisiéramos definir una lista de países haríamos lo siguiente:

<select name="pais">
  <option>Argentina</option>
  <option>España</option>
  <option>México</option>
  <option>Venezuela</option>
</select>

Con la estructura utilizada en el ejemplo, el valor que se enviará al momento de mandar toda la información del formulario al servidor será el contenido de la opción que seleccionamos, si seleccionamos la segunda opción entonces “España” es el valor que se le dará al elemento “pais”.

En caso de no desear este comportamiento, podemos utilizar el atributo “value” para modificar el valor que se mandará para el procesamiento, si en lugar de “España” queremos mandar la abreviación “es” podemos hacer lo siguiente:

<option value="es">España</option>

Se puede establecer una opción seleccionada por defecto mediante el atributo “selected”, esto nos permite tener siempre un valor al momento de que el usuario envíe el formulario y evitar falta de información.

<option value="es" selected="selected">España</option>

“optgroup” es otra etiqueta que se puede utilizar dentro de un “select”, es poco utilizado pero representa gran utilidad cuando se requiere seccionar una lista de opciones que es muy grande. Tomemos como referente el ejemplo que hemos venido manejando, en caso de que queramos segmentar mejor nuestra lista podemos agrupar los países por continente:

<select name="pais">
    <optgroup label="América">
<option>Argentina</option>
<option>México</option>
<option>Venezuela</option>
    </optgroup>
    <optgroup label="Europa">
<option>España</option>
<option>Italia</option>
<option>Portugal</option>
    </optgroup>
</select>

Como ya mencionamos ésta es la manera predeterminada para mostrar un elemento “select”, pero existe la opción de hacerlo de selección múltiple mediante los atributos “size” y “multiple”.

Al momento de hacer uso del atributo “size” el menú drop down desaparece y se muestran las opciones dentro de un cuadro, el cual desplegará una barra de desplazamiento en caso de que su tamaño no cubra todas las opciones.

Por su parte el atributo “multiple” permite que dentro de esta caja podamos seleccionar todas las opciones que deseemos, esto se logra oprimiendo la tecla Ctrl y después dando clic en la opción del menú sin soltarla.

Nuestro código final quedará de la siguiente manera:

<select name="pais" size="8" multiple="multiple">
    <optgroup label="América">
<option>Argentina</option>
<option>México</option>
<option>Venezuela</option>
    </optgroup>
    <optgroup label="Europa">
<option>España</option>
<option>Italia</option>
<option>Portugal</option>
    </optgroup>
</select>

Formularios HTML accesibles

No debemos olvidarnos de etiquetas como “optgroup” que nos permiten segmentar y agrupar grandes listados, o como “fieldset” que nos ayudará a crear una división y agrupar campos, obteniendo una mejor visualización y permitiendo una mejor asistencia.

Algunos otros aspectos que podemos tomar en cuenta para este tema ya fueron analizados en otros artículos, tal es el caso de los atributos “tabindex” y “accesskey” que permiten aumentar la accesibilidad a los campos “input”, “textarea” y “select”, ya que ayudan a la navegación de aquellos que no utilizan un dispositivo de señalización, como un mouse.

Los atributos de descripción suelen ser muy importantes en estas situaciones, si el usuario se siente confundido al momento de estar llenando el formulario puede recurrir a ellos para obtener una mejor explicación del contenido que debe tener el campo.

De igual manera se puede hacer uso del atributo “value” de cada campo, para dar un valor por defecto que explique mejor la manera en que se debe de llenar.

Uso de etiquetas “label”

Todos los elementos que van a tomar parte de un formulario deben de ir siempre acompañados por un elemento de tipo “label”, al menos de que la interfaz del sitio demande lo contrario.

Un elemento de tipo “label” establece un enlace explícito, con una etiqueta de creación de campos, mediante el atributo “for” que permite asociar dicho elemento con el “id” del campo. Si tuviéramos un campo para un nombre podríamos asociarlo con un “label” de la siguiente manera:

<label for="nombre_form">Nombre:</label>
<input name="nombre" id="nombre_form" />

En el ejemplo utilizamos distintos valores para los atributos “id” y “name”, pero generalmente se utiliza el mismo, el cambio en nuestro ejemplo fue hecho con propósitos de demostrar la manera en que funcionaba el atributo “for”.

En el caso de las casillas de verificación y los botones de tipo radio, al momento de dar clic la opción a la que esta asociado el label se marca como seleccionada.

Dar estilo al formulario con CSS

Uno de los problemas más frecuentes que se presentan al momento de desarrollar un formulario, se da al buscar un estilo uniforme para todos los campos.

Para evitar caer en una desuniformidad y modificar los estilos por defecto, el uso de CSS se ha vuelto fundamental, y gracias a él podemos cambiar los bordes, las fuentes y los fondos para llegar a un estilo que se adecue más a lo que queremos mostrar en nuestro sitio.

Bordes

Quizás la manera más rápida y sencilla de modificar radicalmente la apariencia de un formulario es cambiando los bordes de los campos que en él se despliegan.

Para ello tenemos que hacer uso de la propiedad CSS “border”, que nos permitirá cambiar el tipo de borde, su color y tamaño.

Si quisiéramos por ejemplo tener un borde de tipo sólido, color gris y con 1 píxel de anchura, basta con utilizar una sentencia como esta:

input, textarea { border: 1px solid #333; }

Esto se aplicará a todos los elementos de tipo “input” y “textarea” que tengamos en el formulario.

En cambio, si quisiéramos ceñirnos más al estilo original pero cambiando los colores, podemos utilizar la propiedad “border-color” con un valor para cada sección, como se muestra aquí:

input, textarea {
  border: 1px solid;
  border-color: #333 #666 #666 #333;
}

En cuanto a lo que bordes para selects se refiere, estos se ven más limitadas por parte de los navegadores, aunque en la actualidad estos problemas han tendido a reducirse.

Lo mismo puede ocurrir con los checkbox y los radio button, su estilo puede permanecer diferente al resto de los bordes que manejamos.

Fuentes

Podemos especificar el tipo de fuente con la que se va a desplegar el texto dentro de cada campo del formulario, y para ello basta con recurrir a la propiedad “font” de CSS. Al igual que con el resto de los elementos donde podemos aplicar esta propiedad, el color y el tamaño son aspectos elegibles.

input, textarea { font: 10px arial }

Fondo

El último aspecto relevante que se puede modificar para resaltar o dar un estilo distinto a los elementos de un formulario, es el fondo.

Por lo general esta propiedad, representada por “background”, es tratada con mucho cuidado y sólo se utiliza en casos donde la interfaz lo necesite.

Un uso muy práctico del cambio de fondo se puede hacer en conjunto con el evento “focus” mediante CSS, así podemos cambiar el fondo del campo únicamente cuando el usuario se encuentre posicionado sobre él:

input:focus, textarea:focus { background: #ccc }

¿Cómo dar estilo a checkboxes y radiobuttons con CSS3?

Hasta hace poco era realmente difícil poder dar un estilo adecuado y funcional a los radiobuttons y checkboxes que componen nuestros formularios.

La raíz de este problema, se deriva de que no existe un estándar de visualización para dichos elementos, por lo que con CSS no se logra obtener una solución adecuada y se tenía que optar por utilizar librerías de JavaScript para tratar de establecer el estilo.

En la actualidad, gracias a la incorporación de CSS3 podemos lograr dar estilos a dichos elementos y hacerlos funcionales en casi todos los navegadores, todo sin utilizar scripts o frameworks.

Estableciendo nuestro HTML

Para tratar de ahorrar tiempo y espacio, en esta ocasión el código mostrado será únicamente para modificar los elementos de tipo checkbox, pero vale aclarar que el proceso para darle estilo a los radiobuttons es exactamente el mismo.

Lo primero que debemos hacer es crear nuestros checkbox, y seguido de cada una de estas un elemento de tipo “label”.

<input type="checkbox" />
<label>Checkbox personalizado</label>

La etiqueta label que colocamos al lado del checkbox es para mostrar la leyenda que nos hará identificar para qué es cada casilla. De esa manera podremos interactuar con el formulario teniendo un contexto de lo que seleccionamos.

Para dar el vínculo final, debemos utilizar el atributo “for” dentro de la etiqueta “label”, para de esa manera enlazar su valor con el del ID del checkbox.

<input type="checkbox" id="casilla1" name="casilla1" />
<label for="casilla1"><span>Checkbox personalizado 1</span></label>

Pasemos a dar estilo

Es tiempo de comenzar a darle estilo a nuestros elementos del formulario, y como primer paso debemos ocultar los checkboxes que aparecen por defecto, para así después poder establecer los propios.

input[type="checkbox"] {
    display:none;
}

Una vez ocultos, podemos darle un estilo al label y al span que se encuentra dentro de este. El motivo de utilizar este span, es simplemente para darnos más control sobre la posición exacta de la casilla. Se puede aplicar la imagen de fondo directamente sobre la etiqueta label, pero el posicionamiento puede llegar a ser difícil.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(imagen_checkbox.png) left top no-repeat;
}

Lo primero que podrás notar en el código, es el uso de un selector algo particular, lo que hacemos con el es identificar y obtener todos los elementos que son de tipo “checkbox” a los cuales les sigue un elemento “label” con una etiqueta “span” en su interior.

También podrás notar la sentencia que establece el background para el elemento. Para este ejemplo, podemos hacer uso de una imagen que cuente con cuatro gráficas que representen al checkbox sin y con selección y al radio button en las mismas situaciones.

Después de esto, podemos agregar más estilos como márgenes o padding, todo dependiendo de nuestros gustos.

Toque final con CSS3

Lo que resta por hacer, es proveer un estilo para cuando el elemento se encuentra en estado seleccionado, es aquí donde entra CSS3.

Para lograr abarcar todos los elementos que se encuentran en estado de selección, haremos uso del pseudo selector “:checked”, el cual es exclusivo de CSS3.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(imagen_checkbox.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(imagen_checkbox.png) -19px top no-repeat;
}

Como podrás notar no cambia la imagen de fondo, simplemente se mueve la posición del background para que de esa manera se utilice la misma imagen pero se muestre otra parte. En tu caso puedes hacer uso de dos imágenes distintas si así lo consideras necesario.

Con esto basta para lograr dar estilos a estos elementos sin la necesidad de utilizar JavaScript, como ya dijimos desgraciadamente no todos los navegadores soportan esta técnica, y por no todos nos estamos refiriendo obviamente a Internet Explorer, el cual incluso en su versión 9 aún no acepta el uso de el pseudo selector “:checked”.

Sin embargo, no nos debemos de preocupar por IE, ya que aunque no acepta estos estilos, se aplican los default y el elemento es perfectamente funcional.

Posicionamiento de labels en un formulario

Dichos elementos son utilizados generalmente para establecer los nombres de cada uno de los campos a llenar en el formulario, es por ello que alineación tiende a tomar cierta relevancia al elaborar la estructura de nuestro sitio.

Por más simple que parezca, la alineación de un label no es una decisión insignificante, ya que la posición de este elemento en base a los inputs, puede afectar la lectura y usabilidad de un formulario. Si el usuario puede detectar adecuadamente cada uno de los labels en un formulario, su velocidad de llenado puede aumentar, así como su satisfacción al avanzar a través de los campos sin problemas.

Sin embargo, no existe una forma única o completamente comprobada como la mejor, por lo que esta decisión se debe tomar en base a ciertos factores y necesidades específicas de tu formulario, tomando como referencia el diseño de tu página.

Alineado en la parte superior

El alineado en la parte superior del campo, representa una de las mejores opciones para reducir el tiempo de llenado de un formulario. Esto se debe a que aminora la necesidad de realizar movimientos extraños con el ojo, ya que tanto el label como el campo se pueden observar con una simple mirada.

Otra ventaja de este tipo de alineación, es que no es necesario hacer uso de mucho espacio horizontal de la página, por lo que son ideales para ser utilizados en barras laterales. De igual manera, este espacio puede ser aprovechado para agregar alguna clase de descripción o traducción que ayude al usuario a completar el formulario.

En caso de requerir más espacio vertical, este tipo de alineado no es el adecuado para ti. Si tu formulario se vuelve algo largo, al agregar labels en la parte superior de cada campo, este crecerá mucho y muy rápido, por lo que al usuario le podrá parecer muy tedioso llenar tanta información, además de que necesita de un constante desplazamiento a través de las barras.

Alineado a la izquierda

Al colocar el label horizontalmente junto al campo, tenemos dos opciones de alineamiento. Una de estas opciones es alinear a la izquierda, es decir, que el texto se muestre separado del campo y el borde izquierdo del texto se ajuste al margen izquierdo del elemento que contiene el formulario.

Debido a que todos se encuentran alineados al límite izquierdo del elemento y no son distorsionados por algún campo, es más sencillo identificar a que se refiere cada label, siendo esto ideal para formularios que hacen peticiones de información poco común.

Otro factor a considerar, es que con este tipo de alineado ahorramos mucho espacio de manera vertical, pero sacrificamos espacio horizontal, por lo que su uso dependerá en gran medida del tipo de diseño que utilicemos en la página.

Alineado a la derecha

El segundo tipo de alineado que se puede utilizar al tener el label a un lado del campo, es el alineado a la derecha. Este alineado, toma el texto y lo ajusta al margen derecho, ya sea pegándolo al input o al extremo derecho del elemento que contiene el label.

Con este tipo de alineado se obtiene las mismas ventajas de espacio que con el alineado a la izquierda, más espacio vertical pero menos horizontal. Quedando así poco espacio para agregar algún tipo de información extra al lado del campo, como por ejemplo una traducción, una recomendación o una validación.

La gran ventaja de utilizar este alineado, es su gran conexión visual entre el label y el campo. Gracias a esto, el tiempo de llenado de formularios que cuentan con este alineado, puede llegar a ser hasta el doble de rápido que el de formularios con alineados a la izquierda. Además de esto, este alineado proporciona más flexibilidad para que el formulario pueda adaptarse a la variación de tamaño de los labels.

Sin embargo con este tipo de alineado, el escaneo de los labels puede resultar más difícil, ya que sus valores no se encontrarán alineados a un margen, dificultando de esta manera la lectura.