Vamos a ver el atributo form de HTML5, con este atributo (no confundir con la etiqueta) no es obligatorio que los input de un formulario estén dentro del mismo.

De esta manera los formularios deberán tener un id asignado y los input referenciarán a ese id para relacionarse.

Sintaxis del atributo form de HTML5

Sintaxis para relacionar un input con un formulario mediante su id y el atributo form:

<input type="text" name="nombre" form="formulario">

En la sintaxis podemos ver el input ‘nombre’ asignado al formulario con id = formulario.

En  HTML5  son muchos los nuevos input incorporados, os recomiendo repasar los nuevos input HTML5.

Ejemplo del atributo form de HTML5

Tras haber visto la sintaxis de este nuevo atributo HTML5 vamos a verlo funcionando en este ejemplo:

<form action="018-ejemplo-atributo-form-html5.php" id="formulario" method="POST">
     Nomre: <input type="text" name="nombre"><br>
     <input type="submit" value="Enviar">
</form>
Apellidos: <input type="text" name="apellidos" form="formulario">

En el ejemplo podéis ver que tras enviar el formulario se saca por pantalla el valor del input ‘apellidos’ que está fuera del código del formulario.

Compatibilidad del atributo

Este atributo es compatible con cualquier elemento de formulario (input, select, textarea…), pongo su compatibilidad con inputs HTML5:

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

compartir
Publicado por
Aner Barrena