Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > Formularios en HTML

Bypass main content

Formularios en HTML

Los formularios son una característica del estándar HTML Que permite a los autores recolectar información provista por los visitantes. Estos formularios pueden resultar útiles para reunir información personal, de contacto, preferencias, opiniones, o de cualquier otro tipo que el autor necesite. En este tutorial exl¡ploraremos todas las herramientas disponibles para construir formularios en HTML.

Páginas:1234>
Bypass main content

Un formulario puede insertarse en un documento HTML a través del elemento HTML form que actuará como contenedor para todos los elementos de entrada. Toda la información recolectada por un formulario puede ser enviada a un agente procesador (un archivo conteniendo un script hecho especialmente para procesar esta información) que usualmente va especificado en el atributos "action". Lo que el agente procesador haga con la información y cómo la maneje es un tema que no será tratado en este sitio ya que no pertenece al estándar HTML. Para manejar la información de un formulario debes usar un script del lado servidor.

También puedes especificar cómo la información será enviada en el valor del atributo "method": "post" (los datos del formulario son adjuntados al cuerpo del mismo) ó "get" (los datos del formulario son adjuntados a la URL). Se supone que el agente procesador sabe cuál es el método de envío del formulario.

De este modo, un formulario simple puede tener la siguiente declaración:

<form method="post" action="handler.php">
...Controles...
</form>

Elementos de entrada

La mayoría de los controles de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y también del tipo de información que pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos mediante el uso de cuatro elementos: el elemento HTML input, el elemento HTML button, el elemento HTML select y el elemento HTML textarea. En este tutorial dividiremos los controles por su funcionalidad.

Como regla general para todos los controles, el atributo "name" identificará la información para el agente procesados, y su valor dependerá de la naturaleza del control (algunas veces, como en las casillas de verificación o botones radio, será el contenido del atributo "value").

Nota: como las descripciones y atributos de cada control son levemente tratados en este tutorial, visita la referencia de los elementos para más información al respecto.

Entrada textual

Ecisten tres tipos de entrada textual que pueden recolectar información como nombres, comentarios, opiniones, etc.

Entrada de línea

Este control recolecta información textual en una sola línea, lo que significa que el usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea (en la mayoría de los formularios, la tecla "enter" presionada en uno de estos campos, envía el formulario que lo contiene).

Este control es insertado en documentos HTML usando el tag HTML input con el valor "text" en su atributo "type". El valor inicial, mostrado cuando la página se carga, puede ser definido usando el atributo "value".

Código
<form method="post" action="agente.php">
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aquí" />
</form>
Vista
Ingresa un texto:

El valos pasado al agente procesador será el texto ingresado por el usiario, es decir, el contenido de la caja de texto.

Entradas de password

Este control actúa exactamente como el de entrada de línea con la excepción de que "esconde" los caracteres ingresados mostrándolos como puntos o asteriscos para evitar que los usuarios ven su contenido.

Es definido utilizando el valor "pass" en el atributo "type", y su valor inicial puede ser definido usando el atributo "value". Es comúnmente usado para el ingreso de contraseñas.

Código
<form method="post" action="agente.php">
Ingresa tu contraseña: <input name="contrasena" type="password" value="123456" />
</form>
Vista
Ingresa tu contraseña:

El valor pasado al agente procesador será el texto ingresado por el usuario, es decir, el contenido de la caja de texto.

Entrada de multi-línea

Este control permite a los usuarios ingresar texto en una o más líneas. se inserta utilizando el tag HTML textarea y puede ser usado para recolectar reportes, comentarios, cartas, etc. En este tag, el contenido será el texto inicial.

Código
<form method="post" action="agente.php">
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea>
</form>
Vista
Ingresa tus comentarios:

Nota que los tributos "rows" y "cols" establecen las dimensiones de la caja de texto y son requeridos por algunos DTDs. El valor pasado al agente procesador será el texto ingresado, es decir, el contenido de la caja de texto.

Páginas:1234>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona