Tutorial HTML

INICIO HTML Introducción HTML Editores HTML HTML básico Elementos HTML Atributos HTML Encabezados HTML Párrafos HTML Estilos HTML Formato HTML Cotizaciones HTML Comentarios HTML Colores HTML CSS HTML Enlaces HTML Imágenes HTML icono de favoritos HTML Tablas HTML Listas HTML Bloque HTML y en línea Clases HTML Identificación HTML Marcos flotantes HTML HTML JavaScript Rutas de archivo HTML Encabezado HTML Diseño HTML Responsivo HTML Código informático HTML Semántica HTML Guía de estilo HTML Entidades HTML Símbolos HTML Emoticonos HTML Juego de caracteres HTML Codificación de URL HTML HTML frente a XHTML

Formularios HTML

Formularios HTML Atributos de formulario HTML Elementos de formulario HTML Tipos de entrada HTML Atributos de entrada HTML Atributos de formulario de entrada HTML

Gráficos HTML

Lienzo HTML HTML SVG

Medios HTML

Medios HTML Vídeo HTML Audio HTML Complementos HTML HTML de YouTube

API de HTML

Geolocalización HTML Arrastrar/soltar HTML Almacenamiento web HTML Trabajadores web HTML SSE HTML

Ejemplos HTML

Ejemplos HTML Cuestionario HTML Ejercicios HTML Certificado HTML Resumen HTML Accesibilidad HTML

Referencias HTML

Lista de etiquetas HTML Atributos HTML Atributos globales HTML Compatibilidad con navegador HTML Eventos HTML Colores HTML Lienzo HTML Audio/vídeo HTML Tipos de documentos HTML Conjuntos de caracteres HTML Codificación de URL HTML Códigos de idioma HTML Mensajes HTTP Métodos HTTP Convertidor PX a EM Atajos de teclado

Formulario de entrada HTML * Atributos


Este capítulo describe los diferentes form*atributos para el elemento HTML <input>.


El atributo de formulario

El formatributo de entrada especifica el formulario al <input>que pertenece el elemento.

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

Ejemplo

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

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">

El atributo de formación

El formactionatributo de entrada especifica la URL del archivo que procesará la entrada cuando se envíe el formulario.

Nota: Este atributo anula el actionatributo del <form>elemento.

El formactionatributo funciona con los siguientes tipos de entrada: envío e imagen.

Ejemplo

Un formulario HTML con dos botones de envío, con diferentes acciones:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>

El atributo formenctype

El formenctype atributo de entrada especifica cómo se deben codificar los datos del formulario cuando se envían (solo para formularios con method="post").

Nota: Este atributo anula el atributo enctype del <form>elemento.

El formenctypeatributo funciona con los siguientes tipos de entrada: envío e imagen.

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 codificados como "multipart/form-data":

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

El atributo formmethod

El formmethod atributo de entrada define el método HTTP para enviar datos de formulario a la URL de acción.

Nota: Este atributo anula el atributo de método del <form>elemento.

El formmethodatributo funciona con los siguientes tipos de entrada: envío e imagen.

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

Notas sobre el método "obtener":

  • Este método agrega los datos del formulario a la URL en pares de nombre/valor
  • Este método es útil para envíos de formularios en los que un usuario desea marcar el resultado
  • Hay un límite en la cantidad de datos que puede colocar en una URL (varía entre navegadores), por lo tanto, no puede estar seguro de que todos los datos del formulario se transfieran correctamente.
  • ¡Nunca use el método "obtener" para pasar información confidencial! (la contraseña u otra información confidencial estarán visibles en la barra de direcciones del navegador)

Notas sobre el método "post":

  • Este método envía los datos del formulario como una transacción posterior HTTP
  • Los envíos de formularios con el método "publicar" no se pueden marcar
  • El método "post" es más robusto y seguro que "get", y "post" no tiene limitaciones de tamaño

Ejemplo

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

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

El atributo formtarget

El formtargetatributo de entrada especifica un nombre o una palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el formulario.

Nota: Este atributo anula el atributo de destino del <form>elemento.

El formtargetatributo funciona con los siguientes tipos de entrada: envío e imagen.

Ejemplo

Un formulario con dos botones de envío, con diferentes ventanas de destino:

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

El atributo formnovalidate

El formnovalidateatributo de entrada especifica que un elemento <input> no debe validarse cuando se envía.

Nota: Este atributo anula el atributo novalidate del <form> elemento.

El formnovalidateatributo funciona con los siguientes tipos de entrada: enviar.

Ejemplo

Un formulario con dos botones de envío (con y sin validación):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

El atributo novalidate

El novalidateatributo es un <form>atributo.

Cuando está presente, novalidate especifica que todos los datos del formulario no deben validarse cuando se envían.

Ejemplo

Especifique que no se deben validar datos de formulario al enviar:

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

Formulario HTML y elementos de entrada

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

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