Atributos form* de entrada HTML

Recomendaciones de cursos: <input> Este capítulo introduce HTML Diferentes elementos 'form' Atributos.

Atributo 'form'

El atributo form La propiedad especifica <input> El formulario al que pertenece el elemento.

El valor de esta propiedad debe ser igual al atributo 'id' del elemento <form> al que pertenece.

Ejemplo

Un campo de entrada situado fuera del formulario HTML (pero sigue siendo parte del formulario):

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

Prueba personalmente

Propiedad 'formaction'

El atributo formaction La propiedad especifica la URL del archivo que se utilizará para procesar los datos de entrada (datos) al enviar el formulario.

Nota:}}Esta propiedad sobrescribe <form> La propiedad La propiedad Atributos.

formaction El atributo se aplica a los siguientes tipos de entrada: submit y image.

Ejemplo

Un formulario HTML con dos botones de envío que tienen diferentes operaciones (action):

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

Prueba personalmente

Propiedad 'formenctype'

El atributo formenctype La propiedad especifica cómo se debe codificar los datos del formulario al enviarlos (sólo se aplica a los formularios con 'method="post"').

Nota:}}Esta propiedad anulará <form> La propiedad 'enctype' del elemento.

formenctype El atributo se aplica a los siguientes tipos de entrada: submit y image.

Ejemplo

Un formulario con dos botones de envío. El primero envía los datos del formulario con la codificación predeterminada, el segundo envía los datos del formulario con la codificación "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">Nombre:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Enviar">
  <input type="submit" formenctype="multipart/form-data"
  value="Enviar codificado como Multipart/form-data">
</form>

Prueba personalmente

Propiedad 'formmethod'

El atributo formmethod La propiedad define el método HTTP que se utilizará para enviar los datos del formulario a la URL de acción.

Nota:}}Esta propiedad anulará <form> La propiedad 'method' del elemento.

formmethod El atributo se aplica a los siguientes tipos de entrada: submit y image.

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

Consideraciones sobre GET:

  • Añada los datos del formulario en forma de pares 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 está limitada (2048 caracteres)
  • Muy útil para envíos de formularios donde el usuario desea agregar los resultados como un marcador
  • GET se aplica a datos no seguros, como las cadenas de consulta de Google

Consideraciones sobre POST:

  • Adjunte 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!

Ejemplo

Formulario con dos botones de envío. El primero envía los datos del formulario usando method="get". El segundo envía los datos del formulario usando method="post":

<form action="/action_page.php" method="get">
  <label for="fname">Apellido:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nombre:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Enviar usando GET">
  <input type="submit" formmethod="post" value="Enviar usando POST">
</form>

Prueba personalmente

Atributo formtarget

El atributo formtarget El atributo especifica un nombre o clave que determina dónde se mostrará la respuesta recibida después de enviar el formulario.

Nota:}}Esta propiedad anulará <form> el atributo target del elemento.

formtarget El atributo se aplica a los siguientes tipos de entrada: submit y image.

Ejemplo

Formulario con dos botones de envío y diferentes ventanas de destino:

<form action="/action_page.php">
  <label for="fname">Apellido:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Nombre:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Enviar">
  <input type="submit" formtarget="_blank" value="Enviar a una nueva ventana/pestaña">
</form>

Prueba personalmente

formnovalidate

El atributo formnovalidate El atributo especifica que no se debe verificar el elemento <input> al enviar.

Nota:}}Esta propiedad anulará <form> Atributo novalidate del elemento.

formnovalidate El atributo se aplica a los siguientes tipos de entrada: submit.

Ejemplo

Hay un formulario con dos botones de envío (con y sin verificación):

<form action="/action_page.php">
  <label for="email">Ingrese su correo electrónico:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Enviar">
  <input type="submit" formnovalidate="formnovalidate"
  value="Enviar sin verificación">
</form>

Prueba personalmente

Atributo novalidate

novalidate El atributo es <form> Atributos.

Si se ha configurado, la propiedad novalidate especifica que no se debe verificar todos los datos del formulario al enviar.

Ejemplo

Especifica que no se verifique ningún dato del formulario al enviar:

<form action="/action_page.php" novalidate>
  <label for="email">Ingrese su correo electrónico:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Enviar">
</form>

Prueba personalmente

Elementos Form y Input de HTML

Etiqueta Descripción
<form> Definir formularios HTML para entrada de usuarios.
<input> Definir controles de entrada.

Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Manual de Referencia de Etiquetas de HTML.