form
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/es/web/api/html_dom_api/index.md)
Interfaz del elemento formulario de HTML
Los elementos FORM
comparten todas las propiedades y métodos de los otros elementos HTML descritos en el capítulo del elemento. También tienen la interfaz especial HTMLFormElement.
Esta interfaz proporciona métodos para crear y modificar los elementos FORM
usando el DOM. El siguiente ejemplo muestra como crear un nuevo formulario, como modificar sus atributos y enviarlo:
// Crea un formulario var f = document.createElement("form"); // Lo añade en el cuerpo ('body') del documento document.body.appendChild(f); // Añade los atributos de acción y método f.action = "/cgi-bin/some.cgi"; f.method = "POST" // Llama el método de enviar el formulario f.submit();
Además, el siguiente documento HTML muestra como se puede extraer información de un formulario y cambiar algunos de sus atributos.
<title>Ejemplo de formulario</title> <script type="text/javascript"> function getFormInfo() { var info; // Obtiene una referencia utilizando la colección de formularios var f = document.forms["formularioA"]; info = "f.elements: " + f.elements + "\n" + "f.length: " + f.length + "\n" + "f.name: " + f.elements + "\n" + "f.acceptCharset: " + f.acceptCharset + "\n" + "f.action: " + f.action + "\n" + "f.enctype: " + f.enctype + "\n" + "f.encoding: " + f.encoding + "\n" + "f.method: " + f.method + "\n" + "f.target: " + f.target; document.forms["formularioA"].elements['tex'].value = info; } // Se pasa la referencia al formulario desde el // atributo al hacer clic ('onclick') del botón con la ayuda de este.formulario ('this.form') function setFormInfo(f) { f.method = "GET"; f.action = "/cgi-bin/evil_executable.cgi"; f.name = "totally_new"; } </script> <h1>Ejemplo de formulario</h1> <form name="formularioA" id="formularioA" action="/cgi-bin/test" method="POST"> <p>Haga clic en "Info" para ver informaciones de este formulario. Haga clic en "Set" para cambiar los parámetros y otra vez en "Info" para ver los efectos</p> <p> <input type="button" value="Info" onclick="getFormInfo();"> <input type="button" value="Set" onclick="setFormInfo(this.form);"> <input type="reset" value="Reset"> <br> <textarea id="tex" style="height:15em; width:20em"> </p> </form>
Propiedades
- form.elements (todos los elementos del formulario)
-
.elements
devuelve una colección de todos los controles que hay en el formularioFORM
. - form.length
-
.length
devuelve la cantidad de controles que hay en el formulario - form.name
-
.name
devuelve el nombre del formulario actual en forma de cadena. - form.acceptCharset
-
.acceptCharset
devuelve una lista del conjunto de caracteres soportados para el actual elementoFORM
. - form.action
-
.action
obtiene/configura la acción del elementoFORM
. - form.enctype
-
.enctype
gets/sets the content type of theFORM
element. - form.encoding
-
.encoding
gets/sets the content type of theFORM
element. - form.method
-
.method
obtiene/configura el método HTTP utilizado para enviar el formulario. - form.target
-
.target
obtiene/configura el objetivo de la acción (i.e., the frame to render its output in).
Métodos
- form.submit
-
submit() manda el formulario.
- form.reset
-
reset() restaura el formulario, lo devuelve al estado inicial.