--- title: form slug: Web/API/HTMLFormElement tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/HTMLFormElement ---

HTML Form Element Interface

L'elemento FORM possiede tutte le proprietà e i metodi di qualunque element, e inoltre ha un'interfaccia specializzata: HTMLFormElement.

Questa interfaccia fornisce i metodi per creare e modificare gli elementi del FORM. L'esempio seguente mostra come creare un nuovo elemento form, modificare i suoi attributi e inviarlo.

// Crea un form
var f = document.createElement("form");

// Lo aggiungere come ultimo nodo all'interno dell'elemento Body
document.body.appendChild(f);

// Setta l'attributo action e l'attributo method
f.action = "/cgi-bin/some.cgi";
f.method = "POST"

// Invia il form tramite il metodo submit
f.submit();

Il seguente esempio di pagina HTML mostra come estrarre informazioni da un form e come settare alcuni dei suoi attributi.

</html>
<head>
<title>Esempio di Form</title>
<script type="text/javascript">
  function getFormInfo() {
    var info;

    // Ricava un riferimento al form usando la collezione di form disponibile in document
    var f = document.forms["formA"];
    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["formA"].elements['tex'].value = info;
  }

  // Un riferimento al form viene passato
  //  dall'attributo onclick del button usando 'this.form'
  function setFormInfo(f) {
    f.method = "GET";
    f.action = "/cgi-bin/evil_executable.cgi";
    f.name   = "totally_new";
  }
</script>
</head>
<body>
<h1>Form  example</h1>

<form id="formA"
 action="/cgi-bin/test" method="POST">
 <p>Clicca "Info" per vedere delle info sul form.
    Cllica set per cambiare i settaggi,quindi di nuovo info per vedere l'effetto</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>
</body>
</html>

Proprietà

form.elements: Restituisce una collezione dei controlli contenuti form corrente.
form.length: Restituisce il numero di controlli contenuti nel form corrente.
form.name: Restituisce una stringa con con il valore dell'attributo name del form corrente.
form.acceptCharset: Restituisce una lista dei set di caratteri supportati per il form corrente.
form.action: Restituisce/setta l'URI a cui verranno spediti i dati del form.
form.enctype: Restituisce/setta il tipo di contenuto che il form corrente invierà al server.
form.method: Restituisce/setta il metodo con cui inviare le informazioni al server.
form.target: Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.

Metodi

form.submit: Invia il form.
form.reset: Riporta il form al suo stato iniziale.

{{ languages( { "fr": "fr/DOM/form", "pl": "pl/DOM/form", "en": "en/DOM/form" } ) }}