Atributos de formulario HTML

Este capítulo introduce HTML <form> Distintas propiedades del elemento.

Propiedad Action

action La propiedad define la acción a realizar al enviar el formulario.

Por lo general, cuando el usuario hace clic en el botón "Enviar", los datos del formulario se envían a un archivo en el servidor.

En el siguiente ejemplo, los datos del formulario se envían a un archivo llamado "action_page.php". Este archivo contiene un script de servidor que maneja los datos del formulario:

Ejemplo

Después de enviar, se enviarán los datos del formulario a "action_page.php":

<form action="/action_page.php">
  <label for="fname">Nombre:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Apellido:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Enviar">
</form>

Prueba por tu cuenta

Consejo:Si se omite la propiedad action, se establece action en la página actual.

Propiedad Target

target La propiedad determina dónde se muestra la respuesta después de enviar el formulario.

target La propiedad puede establecer uno de los siguientes valores:

Valor Descripción
_blank La respuesta se muestra en una nueva ventana o pestaña.
_self La respuesta se muestra en la ventana actual.
_parent La respuesta se muestra en el cuadro de la ventana padre.
_top La respuesta se muestra en la totalidad del body de la ventana.
framename La respuesta se muestra en el iframe nombrado.

El valor predeterminado es _self, lo que significa que la respuesta se abrirá en la ventana actual.

Ejemplo

Aquí, los resultados del envío se abrirán en una nueva etiqueta del navegador:

<form action="/action_page.php" target="_blank">

Prueba por tu cuenta

Propiedad Method

La propiedad method especifica el método HTTP que se debe usar al enviar los datos del formulario.

Los datos del formulario pueden actuar como variables de URL (usando method="get") o como transacción HTTP POST (usando method="post") para enviar.

El método HTTP predeterminado al enviar los datos del formulario es GET.

Ejemplo

En este ejemplo, se utiliza el método GET para enviar los datos del formulario:

<form action="/action_page.php" method="get">

Prueba por tu cuenta

Ejemplo

En este ejemplo, se utiliza el método POST para enviar los datos del formulario:

<form action="/action_page.php" method="post">

Prueba por tu cuenta

Consejos sobre GET:

  • Añadir los datos del formulario al final de la URL en forma de pares de nombre/valor
  • ¡Nunca use GET para enviar datos sensibles! (Los datos del formulario enviados se pueden ver en la URL!)
  • La longitud de la URL está limitada (2048 caracteres)
  • Muy útil para los envíos de formularios en los que el usuario desea agregar los resultados como marcadores
  • GET se usa para datos no seguros, como las cadenas de consulta en Google

Consejos sobre POST:

  • Adjuntar los datos del formulario al cuerpo de la solicitud HTTP (los datos del formulario enviados no se mostrarán en la URL)
  • POST no tiene límite de tamaño y se puede usar para enviar grandes cantidades de datos.
  • No se pueden agregar marcadores a los envíos de formularios con POST

Consejo:¡Si los datos del formulario contienen información sensible o personal, ¡asegúrese de usar POST!

Propiedad Autocomplete

autocomplete La propiedad determina si el formulario debe abrir la función de autocompletar.

Después de activar la función de autocompletar, el navegador llenará automáticamente los valores basándose en los valores que el usuario ha ingresado anteriormente.

Ejemplo

Habilitar el formulario de llenado automático:

<form action="/action_page.php" autocomplete="on">

Prueba por tu cuenta

Atributo Novalidate

novalidate El atributo es un atributo booleano.

Si se ha configurado, especifica que no se debe validar los datos del formulario al enviar.

Ejemplo

Formulario sin establecer el atributo novalidate:

<form action="/action_page.php" novalidate>

Prueba por tu cuenta

Lista de todos los atributos <form>

Atributo Descripción
accept-charset Especifica la codificación de caracteres a usar para el envío del formulario.
action Especifica a dónde se debe enviar los datos del formulario al enviar el formulario.
autocomplete Especifica si el formulario debe tener la función de completar automáticamente (llenar).
enctype Especifica cómo se debe codificar los datos del formulario al enviarlos al servidor (solo para method="post").
method Especifica el método HTTP a usar al enviar los datos del formulario.
name Especifica el nombre del formulario.
novalidate Especifica que no se debe validar el formulario al enviar.
rel Especifica la relación entre el recurso de enlace y el documento actual.
target Especifica dónde se debe mostrar la respuesta recibida después de enviar el formulario.