martes, enero 24, 2012

Tutorial de desarrollo web, Parte XVI: Formularios (4)

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)
Parte XIV: Formularios (2)
Parte XV: Formularios (3)

Por fin llegamos a la última entrega de formularios en HTML, que ya empieza a ser cansino esto. Pero, antes de empezar, como todas las semanas, aquí está el documento de Google Docs con la solución del ejercicio de la última semana.
La última semana vimos los posibles atributos de la etiqueta "input", que, como ya hemos estudiado a lo largo de estas tres entregas, puede tomar múltiples formas dependiendo del valor de su etiqueta "type". Ahora nos vamos a encargar de ver los atributos de las otras etiquetas que pueden ir dentro de un formulario (aquellas que aprendimos en la segunda entrega).
En primer lugar, vamos a hablar de un atributo que ya vimos la semana pasada. El primero de ello es el atributo disabled="disabled" que, como recordaréis, hacía que el "input" al que se lo pusiéramos estuviera no operativo. Pues bien, este atributo también valdrá para las etiquetas <textarea>, <select> y <option>, que serán las tres etiquetas de las que hablaremos en este capítulo.
También hay que remarcar los atributos name e id, que ya hablamos la semana pasada que todos los "inputs" podían (y debían) tenerlo. En este caso, ocurre lo mismo, salvo por el hecho de que los "options" del "select" no pueden tener atributo "name" (ya que se supone que el "name" será para nombrar al "select" entero).
Ahora vamos a los atributos específicos de cada uno. En el caso del "textarea", realmente ya hemos visto todos sus atributos, pero estará bien recordarlos. En primer lugar, tenemos los atributos obligatorios cols y rows. Estos atributos indicarán, en número de caracteres, cuántas columnas y filas tendrá el "textarea" con el que estemos trabajando. Esto se verá más fácil con un ejemplo:

<textarea cols="5" rows="3">12345
2
3</textarea>


Como véis, el "textarea" se adapta según los valores que le demos a "cols" y a "rows". Es bastante simple.
El otro atributo que también pueden llevar los "textarea" es el atributo readonly="readonly" que también vimos en algunos "inputs" la semana pasada y que sirve para crear un "textarea" que, a pesar de que no parezca desabilitado (lo cual lograríamos con el atributo "disable"), no permita al usuario introducir texto.
Y ahora pasamos al "select". En el propio "select" vimos hace un par de semana el atributo "multiple", que permitía hacer un "select" en las que el usuario, mediante el botón Control, pudiera seleccionar varias opciones (y no sólo una como es por defecto). Si el lector no recuerda esa opción, le recomiendo volver al capítulo XIV del tutorial.
Como recordaréis, al usar el atributo "multiple", el aspecto del "select" cambiaba de ser una lista desplegable a mostrar directamente la lista en un cuadro de texto. Sin embargo, podemos también mostrar la lista en forma de cuadro de texto sin permitir una selección múltiple, y eso lo lograremos con el atributo size. Además, el "size", como su nombre indica, llevará de parámetro el número de filas que queremos que nos muestre (si el "select" tiene más opciones, nos pondrá una barra espaciadora) así que incluso aunque usemos el atributo "multiple", el "size" no puede servir para limitar cuántas opciones se verán a la vez. Mostremos un ejemplo:

<select name="selectcontamaño" id="selectcontamaño" size="4">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>



Podemos ver que, aunque tiene pinta de "select" múltiple, en este "select" sólo podemos seleccionar un único valor.
Finalmente, los "options" de "select" también pueden tener atributos, aparte de los ya mencionados "id" y "disabled". Uno de ellos es tan importante como el "name" para tratar con programación, y es el atributo value que ya vimos con los "inputs". Al igual que ocurría con los "inputs" de tipo "checkbox" y "radio", el "value" del "option" indica cual es el dato que se enviará con el formulario dependiendo de nuestra selección, así que si queremos tener un "select" operativo, necesitaremos que todos sus "options" tengan "value".
Y, finalmente, el atributo que nos falta es el atributo selected="selected". Este atributo funciona como el "checked" de los "radio" y "checkbox", indicando que ese "option" en particular estará marcado por defecto. Igual que ocurría con el "input" de tipo "radio", si ponemos varios "options" con este atributo, sólo el último aparecerá marcado, a menos que hayamos hecho un "select" de selección múltiple, en cuyo caso, igual que con los "checkboxs", todos los que tengan el atributo "selected" aparecerán marcados.

<select name="opcionesseleccionadas" id="opcionesseleccionadas">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>


De las otras tres etiquetas, <fieldset>, <legend> y <label>, sólo está última tiene un atributo especial, el atributo "for" que ya vimos en su día y que, por tanto, no volveré a explicar.
Y, si terminara aquí, el capítulo se haría un poco corto, así que voy a intentar explicar un poco el asunto de los "name", "id" y "value".
Lo normal cuando hagamos un formulario es que pretendemos que el usuario haga una selección, y que esa selección tenga algún efecto visible en la página que está visitando, tal vez cambiar algo de la página que está viendo, tal vez enviar un correo o un formulario de registro o de acceso a una página. Sea como sea el caso, cuando vayamos a programarlo, necesitaremos saber qué es lo que el usuario ha seleccionado.
Como ya he mencionado alguna vez, aparte del HTML y el CSS (lenguaje de marcado y hoja de estilo respectívamente), existen otros lenguajes que se usan en el desarrollo web, la mayoría de ellos de programación. Podemos destacar el JavaScript y el PHP, aunque existen otros como el ASP (que es sustituto del PHP). Estos son los lenguajes que, cuando construyamos un formulario, se encargarán de jugar con los datos que el usuario haya introducido, pero para ello hemos de facilitarle las cosas a los lenguajes mediante HTML.
De esta manera, identificar cada uno de los elementos de nuestra página mediante atributos "id" nos ayudará ya no sólo a dar estilos con CSS, sino también a trabajar con todos esos elementos a través de estos lenguajes. Aunque más importante que el "id" respecto a la programación será el "name", que es el atributo que indicará al lenguaje de programación el nombre de la etiqueta en cuestión y le permitirá acceder directamente a ella. No son sustitutos el uno del otro, habrá casos en que únicamente nos valga el atributo "name" (sobre todo en las etiquetas de formulario "form", "input", "textarea" y "select", son cuatro etiquetas que nunca deberían ir sin "name"), pero no todas las etiquetas HTML pueden llevar atributos "name", sin embargo, el "id" sí se puede aplicar a todas (o, por si las moscas, a casi todas, aunque ahora mismo no sé de ninguna que no pueda) las etiquetas.
Resumiendo: el "name" puede omitirse en casi cualquier caso, salvo en las cuatro etiquetas antes mencionadas, en cuyo caso es obligatorio para poder acceder a ellas desde lenguajes de programación, mientras que el "id" es un atributo que siempre es recomendable aunque nunca es estrictamente necesario.
El atributo "value" es todavía algo más de comprender sin saber de programación, pero básicamente en este atributo indicará qué valor toma cada etiqueta en cada caso. Tomemos el siguiente ejemplo:

<input type="submit" name="botonEnviar" value="Enviar"/>

Como vemos, este código crea un botón para enviar los datos. Aunque en el caso de los "inputs" botones, el "value" se convierte también en el texto en ser reflejado, realmente no es ese su cometido principal. Lo importante de este botón es saber que es el botón de nombre "botonEnviar" (debido a su "name") y que, en caso de ser pulsado, el valor que tendrá el "botonEnviar" será "Enviar".
Es importante darnos cuenta de que, para el navegador, el "name" y el "value" irán siempre juntos, de modo que los lenguajes de programación acudirán al "name" para preguntar por su "value", que aunque en el caso del botón no podamos cambiarlo (esto es un poco mentira, pero hasta que veamos PHP, mejor no entrar más en ese asunto), en el caso de los cuadros de texto o las listas de selección, sí que podemos cambiarlo, de modo que el "value" se modifica según lo que el usuario seleccione y modifique. Es por eso que los "radio" y "checkbox" que lleven una misma temática deben tener todos el mismo "name" pero distintos "value", para poder diferenciar. Para ilustrar esto:

<input type="radio" name="sexo" value="hombre" id="hombre"/><label for="hombre">Hombre</label><br/>
<input type="radio" name="sexo" value="mujer" id="mujer"/><label for="mujer">Mujer</label>


En este caso, si el lenguaje de programación pregunta por el valor de "sexo" (acudiendo a su "name"), recibirá el "value" del "radio" que esté marcado. De la misma manera funcionan los "textbox" y de una manera muy parecida los "select" (con la diferencia de que en el "select" sólo hay que introducir el "name" una única vez, ya que se presupone que todos los "options" que van en su interior tienen todos el mismo "name").
En fin, esta parte sé que es un poco confusa y abstracta, pero intentad quedaros con aquello básico de cómo debéis usar cada uno de los tres atributos. De todos modos, cuando lleguemos (si llegamos, que me da a mí que sí) a ver PHP, se volverá a hacer hincapié (y mucho) en estos conceptos y se entenderán de un modo más sencillo.

EJERCICIOS


Y terminamos con la página que veníamos haciendo estas tres semanas anteriores. Serán pocas modificaciones ya que no hemos hecho mucho práctico en esta entrada, pero bueno. Tendremos que cambiar la selección de país para que aparezcan cuatro opciones y que por defecto esté seleccionada España. Además, deberemos darle sus correctos "id", "name" y "value" a cada una de las etiquetas.

Y bien, aquí terminamos de momento con los formularios, así que la semana que viene pasaremos a otra cosa. Me gustaría haber podido daros la opción de enviar el formulario a una página que yo hubiera colgado en algún servidor para que pudiérais ver vuestros formularios en acción, pero desgraciadamente no tengo ningún servidor propio y hacerme una cuenta de hosting para esto únicamente hubiera sido excesivo, pero sigo pensando a ver si encuentro la manera de haceros probar vuestros formularios sin aprender aún PHP. Sea como sea, la semana que viene volvemos con más, que ya nos queda poco para terminar con el HTML y el CSS y empezar con el JavaScript.

No hay comentarios: