martes, enero 03, 2012

Tutorial de desarrollo web, Parte XIII: Formularios (1)

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

Bien, aquí estamos con la primera entrega de este año del tutorial de desarrollo web. Igual que la semana pasada, el último ejercicio fue bastante "personal" y realmente enseñar su resolución es algo absurdo, ya que probablemente todo el mundo haya hecho su propia versión del ejercicio, así que esta semana tampoco hay documento mostrando la solución.
Aunque esta semana tenía pensado hacer una guía de referencia de CSS, determinados problemas que he tenido hoy no me han permitido ponerme, así que explicaré algo un poco más sencillo. Todos hemos entrado alguna vez a alguna página web y nos hemos encontrado con algún formulario donde nos pedían distintos datos, que debíamos introducir, tal vez con teclado, tal vez seleccionando con el ratón. Vamos a ver cómo podemos crear eso en nuestra página.
Antes que nada, avisarles de que estos formularios serán un tanto "inútiles" mientras no sepamos ningún lenguaje de programación, pero está bien empezar a aprender a hacerlos, para en el futuro, darles "vida". La primera etiqueta que necesitaremos es la etiqueta <form>, dentro de la cual  encerraremos todo nuestro formulario. Dentro de la etiqueta "form" tenemos una serie de etiquetas de formulario que aprenderemos a usar a lo largo de esta y la próxima entrega.
La más importante de estas etiquetas es la etiqueta <input>, una etiqueta bastante dinámica que cambiará radicalmente de aspecto según qué valor le demos a su atributo type. Por ejemplo, veamos el siguiente código:

<form>
Nombre: <input type="text" name="nombre" /><br/>
Apellidos: <input type="text" name="apellidos" /><br/>
<input type="submit" value="Enviar" name="enviar"/>
<input type="reset" value="Borrar" name="borrar"/>
</form>

Este código se vería en nuestra página así:

Nombre:
Apellidos:


Podemos observar que la etiqueta "input" cuando le hemos dado el valor "text" a su atributo "type" nos ha creado unos cuadros de texto para que el usuario escriba. Sin embargo, cuando le hemos dado el valor "submit" o "reset" nos ha creado unos botones, los cuales ambos tienen un uso distinto (aunque el "submit" ahora mismo es inservible, a menos que el formulario lo enlacemos con un documento que pueda recibir estos datos e interpretarlos, documento que con los lenguajes que conocemos hasta el momento no podemos hacer... aunque tal vez con el tiempo hablemos de estos otros lenguajes).
La etiqueta "input" puede tomar muchos tipos, según le demos un valor a "type". Estos pueden ser:

  • button - Sirve para crear un botón sin ninguna acción asignada, teniendo nosotros que asignarle la acción mediante un lenguaje como JavaScript, del cual ya hablaremos en no mucho.
<input type="button" value="Aceptar"/> 
  • checkbox - Sirve para crear casillas de selección múltiple, o sea, que permiten al usuario elegir varias opciones.
<input type="checkbox" value="1"/>1<br/>
<input type="checkbox" value="2"/>2
1
2
  • file - Con este "input", el usuario podrá abrir una ventana desplegable con la que podrá elegir un archivo de su ordenador, tal vez para subirlo o con algún otro propósito.
<input type="file"/>
  •  hidden - Este "input" no se verá en pantalla ni será percibido por el usuario. Aunque parezca poco útil y de momento dudo que lo utilicen, si llegáis a aprender a programar en servidor, os sorprenderá lo útil que es.
  • image - Crea un botón con una imagen seleccionada por el usuario.
<input type="image" src="http://img84.exs.cx/img84/8653/emealcubo4uh.jpg"/> 
  •  password - Crea un cuadro de texto donde los caracteres se sustituirán por símbolos para protegerlos.
<input type="password"/>
  • radio - Crea casillas de selección única, permitiendo al usuario elegir sólo una de las opciones.
<input type="radio" value="1"/>1<br/>
<input type="radio" value="2"/>2
1
2

  •  reset - Crea un botón que limpia todos los campos de un formulario, como ya vimos arriba.
  • submit - Crea un botón que envía el formulario a la página que se especifique en el formulario.
  • text - Crea un cuadro de texto.
Y, bueno, como les digo, no he podido escribir mucho más hoy, lo siento, el próximo día seguiremos tratando con los formularios, ya que "input" no es la única etiqueta usada en los formularios. Además, veremos cómo enviar la página a alguna página e incluso les daré alguna dirección para que podáis crear un formulario "en condiciones", con algún tipo de resultado. Y, para terminar, el ejercicio de hoy.

EJERCICIO

Esta semana, como no puede ser de otra forma, vamos a crear un formulario simple, que deberá comportarse como un formulario de registro. Para ello, deberemos pedir al usuario un nombre de usuario, sus nombres y apellidos y reales, una contraseña, que seleccione el sexo (sólo puede seleccionar uno, evidentemente), le diremos que suba un avatar y le pediremos que elija entre una lista de cosas sus preferencias. Además, además de poder "enviar" el formulario (que, evidentemente con lo que sabemos hasta ahora no podrá enviarlo, pero dejaremos el "amago" del botón), podrá, con un sólo botón, resetear todo el formulario.

Y bueno, de momento, eso es todo. Una vez más, lo lamento por dejarles a media en este asunto (e incluso algunas cosas explicadas un poco por encima y a la carrera), pero prometo compensarles en próximas entregas. ¡Hasta la semana que viene!

No hay comentarios: