Etiqueta <form> de HTML

Definición y uso

<form> La etiqueta se utiliza para crear formularios HTML para recibir entradas del usuario.

<form> Los elementos pueden contener uno o más de los siguientes elementos de formulario:

Vea también:

Tutorial de HTML:Formularios y Entradas HTML

Manual de Referencia del DOM HTML:Objeto Formulario

Tutorial de CSS: Estilo de formulario

Ejemplo

Ejemplo 1

Formulario HTML con dos campos de entrada y un botón de envío:

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

Prueba personalmente

Ejemplo 2

Formulario HTML con casillas de verificación:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bicicleta">
  <label for="vehicle1">Tengo una bicicleta</label><br>
  <input type="checkbox" name="vehicle2" value="Coche">
  <label for="vehicle2">Tengo un coche</label><br>
  <input type="checkbox" name="vehicle3" value="Barco" checked>
  <label for="vehicle3">Tengo un barco</label><br><br>
  <input type="submit" value="Enviar">
</form>

Prueba personalmente

Ejemplo 3

Formulario HTML con casillas de selección:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Enviar">
</form>

Prueba personalmente

Atributo

Atributo Valor Descripción
accept-charset Conjunto de caracteres Especifica el conjunto de caracteres utilizado al enviar el formulario.
action URL Especifica a dónde se enviarán los datos del formulario al enviarlo.
autocomplete
  • on
  • off
 Especifica si el formulario debe habilitar la función de finalización automática.
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Especifica cómo se debe codificar los datos del formulario al enviarlos al servidor.
method
  • get
  • post
 Especifica el método HTTP utilizado para enviar los datos del formulario.
name Texto Especifica el nombre del formulario.
novalidate novalidate Especifica que no se debe validar el formulario al enviarlo.
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 Especifica la relación entre el recurso de enlace y el documento actual.
target
  • _blank
  • _self
  • _parent
  • _top
 Especifica dónde mostrar la respuesta recibida después de enviar el formulario.

Atributos globales

<form> La etiqueta también admite Atributos globales en HTML。

Atributo de evento

<form> La etiqueta también admite Atributo de evento en HTML。

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores siguientes por defecto <form> Elemento:

form {
  display: block;
  margin-top: 0em;
}

Prueba personalmente

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte