Lenguaje HTML/Formularios

Mediante el envío de formularios se pueden enviar datos de un artículo, de una encuesta o normalmente para enviar un mensaje a un e-mail. Para hacer esto deberíamos saber un poco sobre los lenguajes de tipo servidor, ASP o PHP, pero por el momento seguiremos con HTML. La etiqueta para un formulario, es <form>, y sus atributos son los siguientes:

method: Indica el método por el que se enviarán los datos. Existen 2:
- POST: Envía datos por la entrada estándar STDIO (utilizado normalmente).
- GET: Envía datos por medio de un URL (enlace).
action: Indica el mail a donde se enviarán los datos o el nombre del archivo .php o .asp –

Ejemplo:

 <form action="mail@dominiio.com" method="post"></form> o <form action="form.php" method="post"></form>

Elementos

Para enviar datos en un formulario se necesitan cuadros de texto. La etiqueta que se usa es <input> (no tiene etiqueta de cierre) y tiene varios atributos:

type: Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser:
text: Cualquier tipo de texto como el nombre, e-mail, dirección...
password: Se usa para ocultar las claves o datos confidenciales (al escribir en este, muestra *******.
hidden: Datos escondidos, asunto, e-mail de destino...
button: Crea un botón.
image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo src).
submit: Envía el formulario.
reset: Borra los campos del formulario.
value: Indica el valor de un atributo o el nombre que se mostrará (en el cuadro).
name: Nombre del campo.
maxlength: Indica el número de caracteres máximo para escribir.
size: Indica el tamaño del cuadro de texto.

Ejemplo:

 <form method="post">
 Nombre <input type="text" name="nombre" maxlength="10" size="15">
 Password <input type="password" name="contraseña" maxlength="10" size="15">
 <input type="submit" name="enviar" value="Enviar">
 <input type="reset" name="Borrar" value="Borrar Todo">
 </form>

Resultado:

Si queremos que una persona envíe algún comentario o sugerencia, ponemos un cuadro de texto grande, con la etiqueta <textarea>. Sus atributos son: rows: Filas que tendrá el cuadro. cols: Columnas que tendrá el cuadro. Ejemplo: <textarea cols="30" rows="4" name="comentario"></textarea>

Resultado:

Lista de Opciones: Son listas en las que se pueden especificar una o varias opciones. Podríamos poner páises, asuntos... y que el usuario seleccione la adecuada. La etiqueta para hacer esto es <select>, y cada opción se define por la etiqueta <option>. Además, deben contener los atributos value y name, ejemplo:

<select name="pais">	<option value="Arg">Argentina</option>
<option value="Br">Brasil</optiont>	<option value="Ch">Chile</option>
<option value="Eu">Estados Unidos</option>	<option value="Mx">México</option>
<option value="Vz">Venezuela</option>

Resultado:

Se puede seleccionar una opción por defecto, con el atributo selected en la opción que queramos. Podemos cambiar la lista de opciones, para que se pueda seleccionar más de una opción. Esto se hace con el atributo multiple y size (indica el número de valores a mostrar):

<select name="pais" size="3" multiple>	<option value="Arg">Argentina</option>
<option value="Br">Brasil</optiont>	<option value="Ch">Chile</option>
<option value="Eu">Estados Unidos</option>	<option value="Mx">México</option>
<option value="Vz">Venezuela</option>

Resultado:

Nota: Manteniendo presionada la tecla Ctrl o Shift se puede seleccionar más de una opción de la lista.

Botones de círculo: Si queremos que solo se pueda seleccionar una opción, además de las listas desplegables, tenemos los botones en forma de círculo. Se usa la etiqueta input, pero con el valor radio en el atributo type. Para seleccionar una opción por defecto, es el atributo checked:

<input type="radio" name="pais" value="Arg">Argentina	<input type="radio" name="pais" value="Br">Brasil
<input type="radio" name="pais" value="Ch">Chile	<input type="radio" name="pais" value="Eu">E.U.
<input type="radio" name="pais" value="Mx" checked>México	<input type="radio" name="pais" value="Vz">Venezuela

Resultado:

Cuadros de selección: Además de poner el valor multiple en las listas desplegables para poder seleccionar más de una opción, podemos utilizar el valor checkbox en el atributo type, y con el atributo checked se selecciona una (o varias) opción(es):

<input type="checkbox" name="pais" value="Arg"> Argentina	<input type="checkbox" name="pais" value="Br"> Brasil
<input type="checkbox" name="pais" value="Ch"> Chile	<input type="checkbox" name="pais" value="Eu"> E.U.
<input type="checkbox" name="pais" value="Mx" checked> México	<input type="checkbox" name="pais" value="Vz"> Venezuela

Resultado:

Un ejemplo de un formulario: <form action="mail@dominio.com" method="post"> Nombre: <input type="text" name="nombre" size="15" maxlength="20">
E-Mail: <input type="text" name="email" size="15" maxlength="20">
País: <select name="pais">

<option value="Arg">Argentina</option>	<option value="Br">Brasil</optiont>
<option value="Ch">Chile</option>	<option value="Eu">Estados Unidos</option>
<option value="Mx">México</option>	<option value="Vz">Venezuela</option>

Sexo: <input type="radio" name="sexo" value="hombre"> Hombre <input type="radio" name="sexo" value="mujer"> Mujer
Urgente: <input type="checkbox" name="prioridad" value="si"> Sí Comentario: <textarea rows="3" cols="40" name="comentario"></textarea>

<input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form>

Resultado:

Y en nuestro e-mail recibiríamos algo asi: nombre: Leo email: anonimo@dominio.com pais: Mx sexo: hombre prioridad=on comentario: hola, quiero información.

Nota: Si está activada un cuadro de selección, el valor al recibir el mail será on, si no se activó el valor será off.

Consejo: Para alinear la descripción de los campos y los campos, podrías crear una tabla con dos columnas.

Importante: En esta ocasión se abrirá el programa de envíos de mail por defecto de la computadora del usuario (suele ser Outlook Express). Si queremos que envíe los datos a un mail sin tener que abrir el programa, debemos crear un archivo PHP y en el atributo action poner el valor del archivo (esto lo puedes ver en el manual de PHP).