form

Interfaz del elemento formulario de HTML

Los elementos FORM comparten todas las propiedades y mtodos de los otros elementos HTML descritos en el captulo del elemento. Tambin tienen la interfaz especial HTMLFormElement.

Esta interfaz proporciona mtodos 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 aade en el cuerpo ('body') del documento
document.body.appendChild(f);

// Aade los atributos de accin y mtodo
f.action = "/cgi-bin/some.cgi";
f.method = "POST"

// Llama el mtodo de enviar el formulario
f.submit();

Adems, el siguiente documento HTML muestra como se puede extraer informacin 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 coleccin 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 botn 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 parmetros y otra vez en "Info" para ver los efectos</p>
 <p>
  <input type="button" value="Info"
   >
  <input type="button" value="Set"
   >
  <input type="reset" value="Reset">
  <br>
  <textarea id="tex" >
 </p>
</form>