21 noviembre 2010

Formularios en HTML

Los formularios permiten a los desarrolladores de páginas web poner elementos interactivos en sus páginas, por ejemplo, para recibir comentarios de sus lectores.

El usuario escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una dirección de correo electrónico o a un script dinámico web como PHP, ASP o CGI.

Etiqueta form

Los formularios están delimitados con la etiqueta <form> ... </form>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe tener los siguientes atributos:
method indica cómo se enviarán las respuestas.
action indica la dirección a que se enviará la información, ya sea un script CGI o correo electrónico.

Ejemplos de etiquetas form:
<form method="post" action="mailto:webmaster@dominio.com">
<form methos="get" action="http://www.tudominio.com/cgi-bin/script.py">


Dentro de la etiqueta form

La etiqueta form actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo action de la etiqueta form, por el método indicado en el atributo method.

Se puede insertar cualquier elemento HTML en una etiqueta form, pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:
La etiqueta input para los botones y casillas de texto.
La etiqueta textarea una casilla de texto.
La etiqueta select una lista de opciones múltiples.

Dentro de la etiqueta input

El atributo name es esencial, ya que permite al script CGI reconocer qué campo está asociado con un par nombre-valor, lo que significa que el nombre del campo estará seguido de un signo igual "=" seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningún valor, por el valor predeterminado de la etiqueta value.

El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta input. Estos son los valores posibles:

text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.
<input type="text" name="nombre" maxlenght="15" size="22" />


password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.
<input type="password" name="secret" maxlenght="10" size="22" />


checkbox: Las casillas de elección pueden adoptar uno de dos estados: seleccionado "checked" o no seleccionado "unchecked".
<input type="checkbox" name="fruta" value="manzana" checked />Manzana
<input type="checkbox" name="fruta" value="naranja" />Naranja
<input type="checkbox" name="fruta" value="pera" />Pera
Manzana
Naranja
Pera

radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name.
<input type="radio" name="sexo" value="hombre" />Hombre
<input type="radio" name="sexo" value="mujer" />Mujer
Hombre
Mujer

reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.
<input type="reset" value="Limpiar" />


submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value.
<input type="submit" value="Aceptar" />


file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviará con el formulario.
<input type="file" />


image: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo src.

hidden: Es un campo que el navegador no muestra, es para definir una configuración única que se enviará al CGI como par nombre-valor.

Etiqueta textarea

La etiqueta textarea se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta input. Esta etiqueta tiene los siguientes atributos:
cols representa el número de caracteres que puede contener un línea.
rows representa el número de líneas.
name representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre-valor.
readonly impide que el usuario modifique el texto predeterminado en el campo
value. Representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto.
<textarea rows="4" name="comments">Escribe tus comentarios</textarea>


La etiqueta select

La etiqueta select sirve para crear una lista desplegable de elementos, especificados por las etiquetas option dentro de ella. Los atributos de esta etiqueta son:
name representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre-valor.
size representa el número de líneas de la lista.
<select name="ocupacion">
  <option>Selecciona</option>
  <option value="alumno">Alumno</option>
  <option value="exalumno">Exalumno</option>
  <option value="profesor">Profesor</option>
</select>


Estos son los objetos que podemos colocar en nuestro formulario para pedir datos al usuario, y que la acción llamada en la etiqueta form nos regrese algún resultado.

1 comentario: