Formularios
1. Introducción
Los formularios nos dan la posibilidad de recibir información de parte del usuario. Su utilización nos permitirá construir formularios de entrada de datos que podríamos recibir en nuestro e-mail o bien almacenar en una base de datos dentro de nuestro servidor, para luego por ejemplo, generar una página o una cookie de manera dinámica.
2. Dos métodos post y get
Hay dos métodos de envío de información mediante formularios que trataremos aquí: post y get.
2.1. Método get
El método get envía información al servidor como parte de la URL. El servidor analizará la URL pedida por el agente de usuario y separará la información relevante para su posterior procesamiento.
El signo ? es el delimitador que nos permite separar la consulta de la URL. busqueda podría ser un programa CGI que recibirá la información posterior a ? e interpretará tal cadena para crear una variable palabra = xhtml. En muchos casos sencillos y para enviar cádenas de pocos carácteres este método funciona bien, sin embargo para otros casos es mejor utilizar otro método de envio.
2.2. Método post
Supongamos que quisieramos enviar una contraseña para loguearnos dentro de un servidor. No sería conveniente que la contraseña aparezca en la URL ya que otras personas podrían ver esta información.
Generalmente en este caso correspondería utilizar el método de envio post. Este método envía la información como parte de la petición del agente de usuario al servidor web (esta petición también incluye la URL, sin embargo nuestra información no formará parte de ella).
3. Empezando con form
El elemento principal y obligatorio de todo formulario es form y quizá sus dos atributos más importantes son method y action. El primero específica el método de envio (get o bien post), y en el segundo pondremos la URL del recurso que contendrá la secuencia de comandos encargada de hacer algo con esa información.
Sin embargo un formulario sin otros elementos no nos sirve de mucho. Hagamos entonces un recorrido por los elementos más comunes:
4. Elemento input
Ahora presentaremos al elemento input, que al específicarle su atributo type nos permite construir diferentes tipos de controles.
5. Campos de texto
Código para construir dos campos de texto:
<form> <p>Nombre: <input type="text" name="nombre"/></p> <p>Apellido: <input type="text" name="apellido"/></p> </form>
El valor text en el atributo type indica que será un campo de texto
Ahora si quisieramos enviar esta información el agente de usuario
armaría cadenas de texto, con pares del tipo nombre=VALOR1
y
apellido=VALOR2
dónde VALOR1 y VALOR2 es la
información escrita en las casillas de texto de Nombre y Apellido
respectivamente, dichos valores se asocian al valor escrito en el atributo
name del input de tipo text.
El resultado es el siguiente:
Ilustremos ahora algunas características con las que podemos dotar al input
<form> <p> E-mail: <input type="text" name="mail" readonly="readonly" value="example@example.com" /> <strong>readonly</strong>=<em>readonly</em> y <strong>value</strong>=<em>example@example.com</em>. </p> <p> Contraseña: <input type="password" name="password" /> <strong>type</strong>=<em>password</em> </p> <p> Iniciales: <input type="text name" name="inicial" size="5" maxlength="2" /> <strong>size</strong>=<em>3</em> y <strong>maxlength</strong>=<em>2</em> </p> <p> No foco: <input type="text" disabled="disabled" value="jo jo" /> <strong>disabled</strong>=<em>disabled</em> y <strong>value</strong>=<em>jo jo</em> </p> </form>
Aquí el resultado:
Observen detenidamente como varía el comportamiento y la apariencia de los cuadros de texto según los diferentes atributos y valores específicados.
6. Botones de radio
Estos botones se suelen presentar en grupo y nos permite elegir una opción entre varias. Para esto se específican valores iguales para el atributo name, mientras que para el type utilizamos el valor radio.
Piquemos código:
<form> <p>Sobre su edad: <input type="radio" name="edad" value="mayor" /> MAYOR <input type="radio" name="edad" value="menor" /> MENOR </p> <p>Su genero: <input type="radio" name="genero" value="hombre" /> HOMBRE <input type="radio" name="genero" value="mujer" /> MUJER </p> </form>
El resultado:
Al especificar un valor distinto para name, se crea un nuevo grupo, mientras que dentro de un mismo grupo sólo podemos elegir una sola de las opciones.
7. Botón de comprobación checkbox
Ahora mostremos que pasa al poner en el atributo type el valor checkbox, que convierte a input en un Botón de comprobación.
Piquemos algo de código para dos input de tipo checkbox:
<form> <p> <input name="fuma" type="checkbox" checked="checked" value="si" /> Fumador <input name="deporte" type="checkbox" value="si" /> Deportista </p> </form>
Observen el resultado:
Uno de los input lleva el atributo checked con el valor checked, de esta forma le indicamos que debe aparecer marcado por defecto ni bien se presente el formulario.
Si enviaramos esta información al servidor, se armarían pares
deporte=si
y fuma=si
en el caso de que las dos
esten marcadas.
8. Botones de envio y de reset
Ahora supongamos que queremos enviar esta información a algún servidor. Como dijimos existen dos metodos de envío. Según qué enviaremos y la tecnología del servidor sabremos por cual optar. Para indicarle al agente de usuario el envío de información utilizaremos un botón de envío especificando el valor submit en el atributo type.
Probemos crear un cuadro de búsqueda para Google:
<form method="get" action="http://www.google.com/search"> <p> <input name="q" type="text" /> <input type="submit" value="Busca en Google" /></p> </form>
La consulta a Google se formula de de esta manera
http://www.google.com/search?q=cadena
. Para obtener
q=cadena debemos especificar el atributo name con
el valor q, luego cadena será lo que se introduzca en el
cuadro de búsqueda. Por último el input text enviará toda la consulta por
el método get.
Vean el resultado y testeenlo:
Otro botón muy utilizado, es el de tipo reset que se encarga de deshacer todas las modificaciones que haya hecho el usuario sobre el formulario, es decir regresa todos los elementos anidados bajo el elemento form a los valores originales especificados en el documento.
Prueben cambiar el texto dentro del cuadro y luego presionen Reset
El código anterior:
<form> <input type="text" value="Soy el original" /> <input type="reset" /> </form>
9. Cajas de texto
Las cajas de texto se suelen utilizar para incluír una cantidad de texto mayor y de varias líneas, para la cual el input de type text no sería apropiado.
A picar código:
<form> <textarea rows="10" cols="50" >Quedo adentro del cuadro.</textarea> </form>
Como resultado obtendremos:
Los atributos rows y cols, marcan la cantidad de líneas y el tamaño de ancho respectivamente, de la caja.
10. Seleccionar con select
Incluyendo el elemento select podremos armar una lista de selección múltiple, este elemento se combina con el elemento option para ir agregando las diferentes opciones.
Ejemplo de código:
<form> <p> Elija fruta: <select name="fruta"> <option>Manzana</option> <option>Pera</option> <option>Kiwi</option> <option>Uva</option> </select> </p> </form>
El resultado es el siguiente:
De nuevo select cuenta con el atributo name con el valor fruta.
Sí se enviara esta información a un servidor, el agente de usuario
armará la cadena de carácteres con el par fruta=Pera
que se
enviará por get o post, suponiendo que se
haya elegido la fruta Pera.
11. Elemento label
Este elemento nos permite asociar una cadena de texto a un control del formulario. Esto supone una cuota de semántica ya que se identifica al control con un texto y otra de accesibilidad debido a que los agentes de usuario permiten utilizar el control mediante el texto asociado.
Ejemplo de código:
<form> <p><label><input type="checkbox" /> Con label</label></p> <p><input type="checkbox" /> Sin label</p> </form>
Observen el resultado:
En principio parecen identicas, pero prueben hacer clic sobre el texto Con label, al hacerlo la casilla de la izquierda al texto se seleccionara. En cambio al hacer clic sobre Sin label no ocurre nada.
Siempre que sea posible se recomienda utilizar el elemento label
12. Agrupando con fieldset
El agrupamiento es un recurso intersante para estructurar mejor nuestros formularios. El elemento fieldset nos da la posibilidad de agrupar diferentes secciones bajo un marco que puede llevar una descripción al anidarle otro elemento llamado legend.
Escribamos algunos controles y agrupemos bajo dos grupos:
Código:
<form> <fieldset> <legend>Información personal</legend> <label>Nombre: <input type="text" /></label> <label>Apellido: <input type="text" /></label> <label><input type="checkbox" /> Soltero</label> </fieldset> <fieldset> <legend>Información académica</legend> <label>Universidad: <input type="text" /></label> <label><input type="checkbox" /> Título obtenido</label> </fieldset> </form>
Resultado de lo anterior:
18 aporte(s) de lectores:
Le he hecho un ojo por encima y se ve muy bueno... Solo creo que en el Tema 10 (listas) pudo mencionarse la etiqueta "optgroup" que igual es XHTML Stricto.
Oye.... muy buen tutorial... muchas gracias... muy bien explicado!!!
En horabuena tio!!
guau!!!
genial, de lo mejor que he encontrado, acabo de reenviarlo a unos amigos!!!
muy muy bueno!!!
Joder tío!!!
Esta genial.Cuando leas este comentario más de 100 páginas sobre xhtml sabrán este tutorial!!!
Enorabuena.
ASOMBROSO...Es de lo mejor que me he encontrado sobre el código XHTML
esta bien se le entiende bastantes
felicidds
Felicidades, gran tutorial, me ha ayudado para ponerme al día en una mañana. Gracias por trabajo!
¡Excelente manual!, no conocía sobre xhtml, y apartir de ahora me encuentro haciendo un formulario..
Muy buen tutorial!!
felicidades, me a ayudad mucho!
gracias
Que tal, creo que esta super nice tu manual para aquellos que inician en las artes web.
Yo lo use para checar mi generador de formularios hecho en php.
Saludos.
rramirez@rramirez.com
Es un excelente tutorial. Sin duda despejará muchas de las dudas que tengo sobre HTML y XHTML.
Gracias pude hacer el ejercició del colegio en 20 minutos. Muy claro.
Pd podrias poner como separar grupos con una sola línea.
x ejemplo.
nombre ________
apellidos_______
----------------------------------
direccion_____________
Tenia que hacer un trabajo y me a servido de mucho...
¡Gracias!
sto me a sido de muxa utilidad para mi proyecto integrador ¡¡¡GRACIAS!!!
Cojonudo
¿Se puede controlar la anchura de fieldset?
Un saludo.
Hola amigo, quiciera saber como hago para que en un formulario html que trabaja con DB myadmin y un motor php, traiga la info del cliente cuando digito el id a los campos del mismo formulario html. cgracias
Muy buen tutoria, te quedo excelente, se lo recomendaré a todos mis amigos...
Publicar un comentario
ATENCIÓN: Por favor intenta aportar o preguntar sobre el tema que trata la página. Otro tipo de consultas o criticas puedes dejarlas en el libro de visitas. Los aportes y preguntas están moderados simplemente para evitar spam o comentarios fuera de lugar.