Elemento form en HTML

Un elemento html form es una sección de un documento que contiene objetos con los que un usuario puede interactuar para enviar datos a un servidor web. Ejemplo simple de un formulario enviado a través de GET:

< form  action = ""  method = "get" > 
  < label  for = "name" > name: </ label > 
  < input  id = "name"  type = "text"  name = "name" > 
  < input  type = "submit "  value = " enviar " > 
</ form >

Ejemplo simple de un formulario enviado a través de POST:

< form  action= "" method = "post" > 
< label  for = "nombre" > name: </ label > 
< input id = "name" type = "text" name = "name" > 
< input type = "enviar " value = " enviar " > 
</ form >

Un ejemplo de un formulario que muestra el uso de los elementos <fieldset>, <legend> y <label>:

< form  action = ""  method = "post" > 
  < fieldset > 
    < legend > form </ legend > 
    < input  type = "radio"  name = "radio"  id = "radio" > 
    < label  for = "radio" > haz clic Aquí </ label > 
  </ fieldset > 
</ form >

Etiqueta html form

Clasificaciones de contenido	Elemento organizativo.
Contenido permitido	Contenido organizacional, pero elemento excluyente `<form>`.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normativo.
Interfaz DOMO	`HTMLFormElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Una función autocomplete que todavía no es compatible con la mayoría de los navegadores.

Características

En este elemento html form se pueden utilizar propiedades globales .

`accept`

Una lista separada por comas de los tipos de contenido aceptados por el servidor. Cabe señalar que esta propiedad se ha eliminado en HTML5 y es posible que no se utilice recientemente, sino que utilice la propiedad accept dependiente de <input>.

`accept-charset`

Una lista separada por comas o espacios de codificaciones de caracteres aceptadas por el servidor. El navegador los usará en el orden en que se presentan, y el valor predeterminado es la cadena reservada UNKNOWN que indica que la codificación es la misma que la del documento que contiene el formulario.

En versiones anteriores de HTML, se permitía que las codificaciones de caracteres estuvieran separadas por una coma o un espacio, pero en HTML5 solo se permitían espacios. Ejemplo de uso de la propiedad accept-charset para indicar que el formulario acepta entradas codificadas en UTF-8:

< form  action = ""  method = "get"  accept-charset = "UTF-8" > 
  < label  for = "name" > name: </ label > 
  < input  id = "name"  type = " texto "  name = " name " > 
  < input type = " enviar " value = " enviar " > 
</ form >

`action`

Un URI para el programa que procesará la información del formulario, y este valor se puede anular mediante la propiedad formaction en un elemento <button> o <input>.

`autocomplete`

Esta propiedad indica si el valor de los elementos del formulario se puede completar automáticamente a través del navegador. El valor de esta propiedad se puede anular estableciendo la propiedad autocomplete en elementos de formulario individuales. Los posibles valores de esta propiedad son:

off: El usuario debe ingresar manualmente valores en cada campo a la vez, o la página proporciona un método para autocompletar entradas de forma aislada del navegador, es decir, el navegador no interfiere con el problema de autocompletar.
on: El navegador puede completar automáticamente los valores ingresados por el usuario en función de los valores ingresados por el usuario en tiempos anteriores.

En la mayoría de los navegadores modernos (incluidos Firefox 38+, Chrome 34+ e IE 11+), la configuración de la propiedad no autocomplete evitará que el administrador de contraseñas del navegador pregunta al usuario si desea almacenar información de inicio de sesión (nombre de usuario y contraseña), si el usuario lo permite. , la información de inicio de sesión se completará automáticamente la próxima vez que el usuario visite la página.

Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

`enctype`

Cuando el valor de la propiedad del método es posts, la propiedad enctype representa el tipo MIME que se utilizará para enviar el contenido del formulario al servidor. Los posibles valores son:

application/x-www-form-urlencoded: El valor predeterminado si no se especifica ningún valor para esta propiedad.
multipart/form-data: Use este valor si está usando el elemento <input> en el formulario y establece la propiedad type en file.
text/plain.

Este valor se puede anular utilizando la propiedad formenctype en un elemento <button> o <input>. Se enviará el siguiente formulario como tipo de datos multipart/form-data:

< form  action = ""  method = "post"  enctype = "multipart / form-data" > 
  < label  for = "name" > name: </ label > 
  < input  id = "name"  type = "text"  name = " nombre " > 
  < input  type = " enviar " value = " enviar " > 
</ form >

`method`

Esta propiedad especificará qué método de envío HTTP debe utilizar el navegador para enviar el formulario. Los posibles valores son:

post: Envíe los datos del formulario mediante el método POST , dentro del cuerpo de una solicitud HTTP.
get: Enviar datos a través del método GET , asignar los datos del formulario al URI de destino, usar el código ?para separar el nombre de la página de los datos y luego enviar el URI resultante al servidor. Utilice este método si su plantilla no tiene efectos secundarios y sólo contiene caracteres ASCII.

Este valor se puede anular utilizando la propiedad form method en un elemento <button> o <input>.

`name`

Nombre del modelo. El uso de esta propiedad quedó obsoleto en HTML 4 (y la propiedad debería haberse utilizado en su id lugar). Pero se ha reutilizado en HTML5 para marcar el formulario en el documento y, si se especifica, debe ser exclusivo de otros formularios.

`novalidate`

Esta propiedad booleana indica que el navegador no debe verificar los campos del formulario al enviar.

Si no se establece ningún valor para esta propiedad, es decir, el navegador tiene que verificar los campos del formulario, la configuración predeterminada se puede anular utilizando la propiedad formnovalidate en un elemento <button> o <input> perteneciendo al formulario.

El usuario no verificará las entradas en el siguiente formulario porque usamos la propiedad en él novalidate:

< form  action = ""  method = "get"  novalidate > 
  < label  for = "name" > name: </ label > 
  < input  id = "name"  type = "text"  name = "name"  required > 
  < input  type = "Enviar" value = "Correo electrónico" > 
</ form >

`target`

Esta propiedad toma una palabra reservada que indica la ubicación predeterminada para mostrar la salida cuando hace que los enlaces o elementos de formulario vayan a otra página.

Las siguientes palabras reservadas tienen significados especiales:

‎_self: Muestra el resultado de la ubicación de la página actual. Este es el valor predeterminado si no se especifica ningún otro valor.
_blank: Vea la página en una nueva ventana.
_parent: Page mostrará el lugar de la página padre a la que pertenece el iframe, y si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.
‎_top: el ancho de la página es un lugar en la parte superior de una página en la jerarquía (es decir, la página que es la página principal directa o indirecta de la página actual y no tiene una página principal). Si no hubiera una página padre Vst Zlk este valor es el comportamiento del valor de la _self misma.

Este valor se puede anular utilizando la propiedad formtarget en un elemento <button> o <input>.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <form> estableciendo la propiedad display en block y eliminando el margen superior margin-top:

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