Formularios HTML

Muestra de un Formulario HTML:

La etiqueta <form>

La etiqueta <form> del HTML define un formulario que es usado para recopilar entradas de los usuarios:

<form>
... Elementos de Formularios ...
</form>

Un formulario HTML contiene elementos de formularios (etiquetas para formularios). Los elementos de Formularios son de diferentes tipos de entrada como: campos de texto, cajas de chequeo (checkbox), botones de opciones (radio), menús de selección, botones de envío y más.

La etiqueta <input>

El elemento input es el elemento de formulario más importante. El elemento input puede ser mostrado de varias maneras, dependiento del atributo type. A continuación algunos ejemplos:

Tipo	Descripción
<input type="text">	Define un campo de texto en una línea.
<input type="radio">	Define un boton de opción (para seleccionar uno de varios).
<input type="submit">	Define un boton de envío (para el envío del formulario).

Input de Texo

<input type="text"> define un campo de entrada de texto en una línea:

Código de dos cajas de texto:

<form>
  Nombre:<br>
  <input type="text" name="nombre"><br>
  Apellido:<br>
  <input type="text" name="apellido">
</form>

Muestra de dos cajas de texto:

Nota: el formulario en sí no es visible. También tenga en cuenta que el ancho predeterminado de un campo de texto es de 20 caracteres.

Input de Opciones

<input type="radio"> define un boton de radio o boton se opción. Un botón de radio (o de opción) le permite al usuario seleccionar uno de un limitado numero de opciones.

Código para tres botones de radio

<form>
  <input type="radio" name="color" value="rojo" checked>Rojo
  <input type="radio" name="color" value="verde">Verde
  <input type="radio" name="color" value="azul">Azul
</form>

Muestra para tres botones de radio

Input de Envío

<input type="submit"> define a botón para el envío de los datos del formulario a un manejador de formularios. El manejador del formulario es tipicamente una página del servidor con un script para procesar los datos recibidos del formulario (valores de los input). El manejador del formulario es especificado en el atributo action de la etiqueta <form>.

Código para envío del formulario

<form action="/pagina_manejadora.php">
  Nombre:<br>
  <input type="nombre">
  Apellido:<br>
  <input type="apellido">
  <input type="submit" value="Enviar">
</form>

El atributo Action

El atributo action define la acción a realizar cuando se envíe el formulario. Normalmente, los datos del formulario se envían a una página web en el servidor cuando el usuario hace clic en el botón Enviar. En el ejemplo anterior, los datos del formulario se envían a una página del servidor llamada "/pagina_manejadora.php". Esta página contiene una secuencia de comandos del lado del servidor que maneja los datos del formulario. Si se omite el atributo de acción, la acción se establece en la página actual.

<form action="pagina_manejadora.php">

El atributo Target

El atributo target especifica si el resultado enviado se abrirá en una nueva pestaña del navegador web, en un marco o en la ventana actual. El valor predeterminado es _self, lo que significa que el formulario se enviará a la ventana actual. Para hacer que el resultado del formulario se abra en una nueva pestaña del navegador web, use el valor _blank. Otros valores son _parent, _top, o un nombre que representa el nombre de un iframe.

<form action="pagina_manejadora.php" target="_blank">

El atributo Method

El atributo method especifica el método HTTP; ya sea GET o POST, que se utilizará al enviar los datos del formulario.

Para enviar los datos del formulario por el método get:

<form action="pagina_manejadora.php" method="get">

Para enviar los datos del formulario por el método post:

<form action="pagina_manejadora.php" method="post">

¿Cuando usar el método Get?

El método predeterminado al enviar datos de formulario es GET. Sin embargo, cuando se utiliza GET, los datos del formulario enviado serán visibles en el campo de dirección de la página:

/pagina_manejadora.php?nombre=Juan&apellido=Pérez

Notas sobre GET:

Agrega los datos del formulario en la URL en pares de nombre=valor.
El ancho de una URL es limitado a 3000 caracteres aproximado.
Nunca usar GET para enviar información sensible, porque será visible en la URL.
Es útil para envíos de formulario en los que el usuario puede agregar el resultado en sus favoritos o marcadores.
GET es mejor para datos no seguros, como cadenas de consulta en Google

Cuándo usar el método POST?

Utilice siempre POST si los datos del formulario contienen información sensible o personal. El método POST no muestra los datos del formulario enviado en el campo de dirección de la página.

Notas sobre POST:

POST no tiene limitaciones de tamaño y se puede usar para enviar grandes cantidades de datos.
Los envíos de formularios con POST no se pueden agregar como favoritos o marcadores.

El atributo Name

Cada campo de entrada input debe tener el atributo name para ser enviado. Si se omite el atributo name, los datos de ese campo de entrada input no se enviarán en absoluto.

El siguiente ejemplo solo enviará el campo de entrada "Apellido":

<form action="/pagina_manejadora.php">
  Nombre:<br>
  <input type="text" value="Juan"><br>
  Apellido:<br>
  <input type="text" name="apellido" value="Pérez"><br><br>
  <input type="submit" value="Enviar">
</form>

El atributo enctype

El atributo enctype especifica como debe ser codificar los datos del formulario cuando es enviado al servidor. El atributo enctype aplica para la etiqueta <form> y es usado en combinación con el metodo post, es decir, method=”post”.

En el siguiente ejemplo, se envían los datos del formulario codificados como multipart/form-data:

Código:

<form action="pagina.php" method="post" enctype="multipart/form-data">
  Nombre:<br>
  <input type="text" name="nombre"><br>
  Apellido:<br>
  <input type="text" name="apellido"><br>
  <input type="submit" value="enviar">
</form>

Agrupar datos de formulario con <fieldset>

El elemento <fieldset> se usa para agrupar datos relacionados en un formulario. El elemento <legend> define un título para el elemento <fieldset>.

<form action="/pagina_manejadora.php">
  <fieldset>
    <legend>Información Personal:</legend>
    Nombre:<br>
    <input type="text" name="nombre" value="Juan"><br>
    Apellido:<br>
    <input type="text" name="apellido" value="Pérez"><br><br>
    <input type="submit" value="Enviar">
  </fieldset>
</form>

Lista de Atributos para la etiqueta Form

Atributo	Descripción
accept-charset	Especifica el charset que usará en el formulario de envío (predeterminado: el charset de la página).
action	Especifica una URL o ruta a donde el formulario enviara los datos (predeterminado: la página de envío).
autocomplete	Especifica si el Navegador Web debe autocompletar los campos del formulario (predeterminado: on)
entype	Especifica la codificación de los datos enviados (predeterminado: es url-encode).
method	Especifica el metodo HTML (get o post) para el envío de los datos del formulario (predeterminado: el metodo get).
name	Especifica el nombre del formulario como identificador.
novalidate	Especifia que el Navegador Web no debe validarlo.
target	Especifica el destino de la dirección en el atributo action (predeterminado: _self).