Atributos de formulario HTML

Este capítulo introduce HTML <form> Diferentes 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 procesa los datos del formulario:

Ejemplo

Después de enviar, los datos del formulario se enviarán 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 personalmente

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

Propiedad Target

target La propiedad especifica dónde mostrar la respuesta después de enviar el formulario.

target La propiedad puede establecer uno de los siguientes valores:

Valores 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 estructura padre.
_top La respuesta se muestra en todo el 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 personalmente

Propiedad Method

La propiedad method especifica el método HTTP que se debe usar para 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") enviar.

El método HTTP predeterminado para enviar 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 personalmente

Ejemplo

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

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

Prueba personalmente

Consideraciones sobre GET:

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

Consideraciones sobre POST:

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

Consejo:¡Si los datos del formulario contienen información sensible o personal, ¡siempre use POST!

Propiedad Autocomplete

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

Después de habilitar la función de autocompletar, el navegador llenará los valores automáticamente basándose en los valores anteriores ingresados por el usuario.

Ejemplo

Habilitar el formulario de llenado automático:

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

Prueba personalmente

Atributo Novalidate

novalidate El atributo es un atributo booleano.

Si se ha configurado, especifica que no se debe validar los datos del formulario en el envío.

Ejemplo

Formulario sin atributo novalidate establecido:

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

Prueba personalmente

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 enviarán los datos del formulario al enviar el formulario.
autocomplete Especifica si el formulario debe abrir la función de completado automático (relleno).
enctype Especifica cómo codificar los datos del formulario cuando se envíen al servidor (solo para method="post").
method Especifica el método HTTP a usar para enviar los datos del formulario.
name Especifica el nombre del formulario.
novalidate Especifica que no se debe validar el formulario en el envío.
rel Especifica la relación entre el recurso de enlace y el documento actual.
target Especifica dónde mostrar la respuesta recibida después de enviar el formulario.