martes, enero 10, 2012

Tutorial de desarrollo web, Parte XIV: Formularios (2)


Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)
Parte IX: Identificadores y clases (1)
Parte X: Listas
Parte XI: Contenedores span y div. La instrucción display
Parte XII: Formato con HTML
Parte XIII: Formularios (1)


Después de dos semanas sin traer resoluciones de ejercicios, el ejercicio de la semana pasada sí ha traído resolución, así que, volviendo a los viejos tiempos, vuelvo a dejarles el documento de Google Docs donde está la solución al último ejercicio. Y ahora continuamos con el tutorial.
La semana pasada, ya lo sé, les dejé una entrega bastante pobre y que puede haber confundido a muchos, así que esta semana intentaré arreglarlo además de explicar nuevas etiquetas de formularios. La semana pasada vimos dos etiquetas nuevas, las etiquetas <form> y <input>. La primera de las dos etiquetas era una etiqueta normal, con su respectiva etiqueta de cerrado, dentro de la cual se introducía todo el formulario. La segunda, por otro lado, era una etiqueta bastante especial, ya que, además de ser unas de esas etiquetas que se cierran a sí mismas, daba un resultado muy distinto depende del valor que le diéramos a su atributo type. La semana pasada revisamos todos esos valores, aunque los ejemplos, debido a limitaciones que me pone Blogger, no pudieron todos ser mostrados correctamente, pero podéis comprobarlo creando un archivo y poniendo la etiqueta en cuestión.
También uno de los errores fue mío. No aclaré que los "input" de tipo "radio" y "checkbox" necesitan tener todos un atributo "name" (del que volveremos a hablar más abajo en este mismo post) el cual debe ser el mismo para todos los "input" que pertenezcan a la misma selección (por ejemplo, si damos a seleccionar el sexo de una persona, el "input" para hombre y el "input" para mujer deben tener ambos el mismo nombre, en este caso podría ser name="sexo"). En el caso del "checkbox" importa menos, pero en los "radio" dará error (como el que había en el post de la semana pasada). En la solución al ejercicio de la semana pasada podréis verlo claro.
Pero el "input" no es la única etiqueta que puede haber dentro de un formulario, y sobre esas otras etiquetas vamos a trabajar esta semana. En primer lugar, vamos a ver la etiqueta <textarea>. No es para nada difícil, es más, creo que será bastante sencilla de entender. Veamos antes que nada el ejemplo:
<textarea cols="50" rows="5">Aquí se puede introducir texto.</textarea>
Como podemos ver, se crea un campo para introducir texto, tal vez parecido al "input" cuando le poníamos el valor "text", pero pudiendo escribir múltiples líneas. Además, podemos ver como podemos especificarle el ancho y el alto del "textarea" con los atributos "cols" (columnas) y "rows" (filas). Realmente, en los "inputs" de tipo "text" también podemos especificar su ancho (que no su alto), pero no es obligatorio (en el caso del "textarea", aunque el navegador lo leerá de todos modos dándole un valor por defecto, se supone que es obligatorio).
Nuestra siguiente etiqueta es la etiqueta <select>, dentro de la cual tendremos que aprender algunas otras etiquetas. La etiqueta "select" crea una lista desplegable, y dentro de ella hemos de darle los valores de dicha lista mediante la etiqueta <option>. Veamos un ejemplo:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Como vemos, con la etiqueta "select" hemos creado la lista desplegable y, en su interior, gracias a las etiquetas "option", hemos ido creado cada una de las optiones que podemos marcar. Como curiosidad, y aunque existen varios atributos distintos para la etiqueta "select", hoy vamos a ver sobre todo el atributo "multiple", con el que podremos seleccionar varias opciones en una lista desplegable. Veamos un ejemplo:
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Vemos que, en esta ocasión, haciendo click pulsando el botón "Control" (o Ctrl) en cada uno de las opciones, podemos marcar varias opciones y no sólo una, como ocurría con el anterior "Select".
Además, podemos organizar mejor nuestras opciones usando la etiqueta <optgroup>, de la siguiente manera:
<select>
<optgroup label="Frutas">
<option>Manzana</option>
<option>Pera</option>
<option>Naranja</option>
</optgroup>
<optgroup label="Verduras">
<option>Lechuga</option>
<option>Col</option>
</optgroup>
</select>
 
Bueno, creo que se entiende fácil, ¿no?
Ahora vamos a aprender a englobar nuestros formularios. Aunque no es muy difícil imaginarnos cómo ponerle un "div" o un "span" al formulario para darle bordes, el HTML nos ofrece una manera más sencillo para hacer esto y, de paso, poder separar el formulario por zonas. Será con la etiqueta <fieldset>, cuyo uso es increiblemente sencillo:
<form>
<fieldset>
Nombre: <input type="text"/>
</fieldset>
</form>
Nombre:
Como véis, queda bastante mejor y, usando varios "fieldset", podremos separar en distintas zonas nuestro formulario. Además, podremos usar la etiqueta <legend> para darle un título a nuestro "fieldset", de esta manera:
<form>
<legend>Datos personales</legend>
<fieldset>
Nombre: <input type="text"/>
</fieldset>
</form>
Datos personales Nombre:
Como véis, queda mucho más "profesional" y la manera de hacerlo es de lo más simple.
Finalmente, la última etiqueta que necesitamos para hacer nuestros formularios será la etiqueta <label>, la cual, valga la rebundancia, es una etiqueta para ponerle una etiqueta a un elemento del formulario. Aunque no es estrictamente necesaria, servirá para organizar mejor nuestro documento, aunque nos obligará a ponerle un "id" a todos los elementos de nuestro formulario (al menos aquellos a los que le queramos poner una etiqueta). Aún así, todo elemento de un formulario, si queremos que en algún momento sea operativo, debería llevar tanto los atributos "id" como "name" (este último no tiene mucha diferencia con el "id", sólo que está más orientado a la programación... pero de todo eso ya hablaremos).
Os preguntaréis que a qué me refiero con "poner una etiqueta" a un elemento del formulario. Es simple, realmente lo llevo haciendo cada vez que he hecho un input de tipo "texto", sólo que esta vez lo haremos de manera "correcta". Es especificar de alguna manera al usuario qué es lo que estamos introduciendo en dicho campo. Véase el anterior ejemplo, usando la etiqueta "label", se haría así:
<form>
<legend>Datos personales</legend>
<fieldset>
<label for="nombre">Nombre:</label> <input type="text" id="nombre"/>
</fieldset>
</form>
Datos personales
Visualmente no hemos cambiado nada, pero en esta ocasión le estamos diciendo que la cadena "Nombre:" funciona como etiqueta para el "input" de id "nombre" (usando el atributo "for" de la etiqueta "label" le especificamos la "id" a la que corresponde). Nada más simple que eso.
Y, de momento, eso es todo. La semana que viene seguiremos otra semana más con los formularios, que son todo un mundo dentro del desarrollo web. Tal como les he dicho, de por sí, no podréis llegar a hacer un formulario completamente operativo hasta que no sepáis programación en servidor, pero de momento vamos poco a poco trabajando en lo que podemos.

EJERCICIO

Como os imaginaréis, vamos a volver a coger el ejercicio de la semana pasada y lo vamos a modificar. En primer lugar, vamos a añadir etiquetas a cada una de las opciones que teníamos (excepto, evidentemente, a los botones), y también a las nuevas. Además añadiremos un cuadro para introducir una biografía y una lista desplegable para elegir el país. Finalmente, separaremos todo en "Datos personales" y en "Información del blog".

Y eso es todo por esta semana, la semana que viene seguiremos trabajando aún más con formularios, que, aunque hemos aprendido ya todas las etiquetas que necesitamos saber, todavía nos queda para entenderlos del todo. Así que, ¡hasta la semana que viene!

No hay comentarios: