Tutorial de desarrollo web, Parte XV: Formularios (3)

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)

Décimoquinta entrega del tutorial de desarrollo web, seguimos otra semana más trabajando con formularios. Pero, por supuesto, antes de comenzar, nuestra resolución al último ejercicio en Google Docs, no volvamos a perder las costumbres.

En estas dos semanas hemos conocido los distintos controles que podemos usar para permitir al usuario introducir datos en un formulario. Esta semana vamos a empezar a trabajar con los distintos atributos que pueden contener las etiquetas de los formularios.

Como ya hemos hablado, algunos atribtos como "id", "class" y "name" se pueden usar en casi todas las etiquetas de HTML. En el caso de los formularios, las etiquetas "id" y "name" son bastante importantes, así que sería recomendable nunca dejarlas atrás. Si queremos, podemos darle el mismo valor tanto al "id" o al "name", pero que al menos todas las etiquetas tengan ambos atributos, para luego, mediante lenguajes de programación, poder acceder a sus valores. Mención especial merecen los checkbox y los radiobutton (los "inputs" de tipo "checkbox" y "radio"), los cuales, como ya hablamos la semana pasada, todos los que sean posibles respuestas a una misma pregunta deben tener el mismo "name", pero, como ocurre siempre, nunca dos etiquetas pueden tener el mismo "id". Para dar un ejemplo:

<form>

<p>Sexo:</p><br/>

<input type="radio" name="sexo" id="hombre" value="hombre" />

<label for="hombre">Hombre</label><br/>

<input type="radio" name="sexo" id="mujer" value="mujer" />

<label for="mujer">Mujer</label><br/>

<p>¿Eres español?:</p><br/>

<input type="radio" name="espanol" id="espanolsi" value="espanolsi" />

<label for="espanolsi">Sí</label><br/>

<input type="radio" name="espanol" id="espanolno" value="espanolno" />

<label for="espanolno">No</label><br/>

</form>

Su resultado:

Sexo:

Hombre
Mujer


¿Eres español?:

Sí
No


Como podéis ver, debido a que "hombre" y "mujer" comparten el valor "sexo" del atributo "name", sólo se puede elegir uno de ellos, sin embargo no entorpece con la otra lista de opciones. Con los checkbox ocurre exactamente lo mismo.
Aunque en el ejemplo no lo he puesto, también la propia etiqueta "form" debe tener un "name" y un "id" para poder acceder al formulario desde un lenguaje de programación (repito una vez más que es muy importante). Los formularios además poseerán otro par de atributos bastante importantes, pero que a nuestros ojos no harán gran cosa aún. Uno es el atributo action (el cual nos indica a qué página debe dirigirse el formulario una vez se rellene) y otro el atributo method (que indica el modo en el que se pasarán los datos). Esto funcionaría así:

<form name="formulario" id="formulario" action="resolucion.php" method="post">
</form>

Este ejemplo sólo es para dar una muestra de lo que sería una etiqueta de formulario "completa", pero realmente ahora mismo los contenidos de "action" y "method" son un poco complicados. En "action" simplemente le escribimos el nombre de la página a la que vamos a enviar el formulario (la extenión ".php" indica que es una página que además contiene código de programación PHP, el cual todavía no hemos visto), indicando qué página se abrirá una vez se pulse un "submit". El "method" sin embargo, es un poco más complejo de explicar, además de necesitar más conocimientos para entenderlo, así que no hablaremos más de él hasta su debido momento.
De las etiquetas "inputs" ya hemos visto unos cuantos posibles atributos. El propio "type" que vimos en una de las primeras etiquetas de formularios es el más importante de los atributos de esta etiqueta, ya que señalará cómo será el aspecto de la etiqueta una vez lanzada la página. Además, los "inputs" tienen una serie de atributos cuyo uso será distinto dependiendo de qué tipo le hayamos asignado (como ocurrió con el "name" en los "radio" y "checkbox" antes visto). Empecemos:

• El atributo más importante probablemente sea el atributo "value", ya que dentro de él irá el dato que enviaremos al servidor. Pero, dependiendo de qué tipo de "input" será, el "value" será obligatorio u opcional, y se tendrá que usar de una u otra manera:
• En el caso de los "botones" ("submit", "reset" y "button"), es obligatorio no sólo porque sea el da to que se envíe al servidor, sino porque también será el texto que aparezca escrito encima del servidor. Veamos cómo funciona esto:
• 
  
• <input type="submit" name="enviar" id="enviar" value="Enviar"/>
• 
  
• 
  
• En el caso de los campos de texto ("text" y "password"), el atributo "value" no es obligatorio, ya que se supone que es el usuario el que introducirá su valor. Sin embargo, se puede introducir algo de texto predefinido (aunque en el caso del "password" es más bien inútil, ya que no se verá).
• 
  
• <input type="text" name="texto" id="texto" value="Introduzca texto."/>
• 
  
• 
  
• En el caso de los "checkbox" y "radio", el "value" es obligatorio y en él hay que introducir el valor que queremos que se envíe. No nos confundamos y creamos que el texto que incluyamos al lado del "input" en cuestión es el dato, incluso aunque le hayamos añadido una etiqueta "label", ya que para el navegador son cosas independientes, y la única manera de indicarle el valor que tiene cada uno de estos elementos es mediante el atributo "value" (como pudimos ver en el ejemplo más arriba).
• En el caso del "hidden", evidentemente la única manera que habrá de que tenga contenido es mediante el atributo "value". Pero, como de momento no usaremos ningún "input" de tipo "hidden", no creo que nos vayamos a romper mucho la cabeza con esto.
• El atributo "checked", cuyo único valor posible es, precísamente, "checked", sirve para indicar, en un "checkbox" o un "radio", que ese valor aparecerá marcado por defecto al cargarse la página. Evidentemente, en una lista de "radio" sólo puede haber uno marcado por defecto, de modo que si se marca más de uno, sólo se verá marcado el último. Por ejemplo:
• 

• <p>Sexo:</p>
• <input type="radio" name="sexo" id="hombre" value="hombre" checked="checked" /><label for="hombre">Hombre</p>
• <input type="radio" name="sexo" id="mujer" value="mujer" /><label for="mujer">Mujer</p>
• 

• Sexo:
  Hombre
  Mujer
• 
  
• También puede que queramos que el usuario no pueda usar algún "input" en particular por algún motivo. Para ello usaremos el atributo disabled="disabled", igual que el anterior, bastante simple. Si os preguntáis el sentido de un "input" al que el usuario no pueda acceder, una vez más es algo que probablemente parezca más útil cuando veamos programación. De todos modos, aquí un ejemplo:
• 

• < input type="text" name="noaccesible" id="noaccesible" value="No se puede escribir aquí." disabled="disabled"/>
• 
  
• 
  
• Otro bastante parecido es el "readonly", con la única diferencia de que en este caso sólo servirá para cuadros de texto ("text" y "password"). Al igual que los anteriores su sintaxis es tan tonta como readonly="readonly" y un ejemplo podéis verlo aquí:
• 

• <input type="text" name="sololectura" id="sololectura" value="No puedes escribir." readonly="readonly"/>
• 
  
• 
  
• Para los cuadros de texto además hay otros dos atributos que pueden ser interesantes: "size" y "maxlength". El primero indica el tamaño (en número de caracteres) que debe tener el cuadro de texto, mientras que el segundo indica cual es el máximo de caracteres que el  usuario podrá entrar. Veamos un ejemplo:
• 

• <input type="text" name="caractereslimitados" id="caractereslimitados" value="No más de 15." maxlength="15" size="10"/>
• 
  
• 
  
• Y, finalmente, tenemos un atributo exclusivo del tipo "file": el "accept". Este atributo indicará qué tipo de archivos pueden subirse con este tipo de "input", pudiendo tener como valores: accept="audio/*", accept="video/*" y accept="image/*". No son los únicos tipos de valores, pero sí son los más genéricos y con los que más tendremos que trabajar. Por supuesto, si no incluímos este atributo, podremos subir cualquier tipo de archivo.

Y, bueno, por esta semana esto es todo. Todavía nos quedan ver los atributos de los otros tipos de etiquetas, pero, la verdad, no pensé que fuera a extenderse tanto el "input". Pero, como ya he dicho anteriormente, es una etiqueta complicada, así que hay que trabajarla bien para entenderla.

EJERCICIO

Como os sospecharéis, esta semana vamos a darle atributos a nuestro formulario. Los cuadros de texto deben estar limitados a, como máximo, 15 caracteres cada uno, y adecuados a que se vean sólo 7 caracteres en cada uno. Al entrar debe estar seleccionado el sexo "hombre" y en preferencias "informatica" y la selección de avatar sólo puede permitir subir imágenes.

Bueno, y eso es todo por esta semana, la semana que viene espero, esta vez sí, acabar con los formularios de una vez. Así que, ya sabéis, esta semana, ¡a practicar!