Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

form

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.

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: teoli, khalid32, Federico, DaViD83
 Ultima modifica di: khalid32,