HTMLFormElement

Baseline

20157

HTMLFormElement DOM <form>

EventTarget Node Element HTMLElement HTMLFormElement

HTMLElement

HTMLFormElement.elements: HTMLFormControlsCollection
HTMLFormElement.length: long
HTMLFormElement.name: name
HTMLFormElement.method: method HTTP
HTMLFormElement.target: target
HTMLFormElement.action: action URI
HTMLFormElement.encoding HTMLFormElement.enctype: enctype
HTMLFormElement.acceptCharset: accept-charset
HTMLFormElement.autocomplete: autocomplete
HTMLFormElement.noValidate: Boolean novalidate

action action action

HTMLElement

checkValidity(): true false invalid false
reportValidity(): true false invalid
requestSubmit()
reset()
submit()

addEventListener() oneventname

formdata: formdata
reset: reset
submit: submit

HTMLFormElement CSS querySelector() document forms

Document.forms HTMLFormElement

document.forms[index]: index
document.forms[id]: ID id
document.forms[name]: name name

elements HTMLFormControlsCollection <form> form

form name elements form

JavaScript

<input name="id"> <form id=""> form.id id "id" <input name="action"> <input name="post">
<input name="elements"> elements form.elements

elements
"elements"

JavaScript

HTMLFormElement.elements HTMLFormElement.length

elements

const f = document.createElement("form"); // 
document.body.appendChild(f); // 
f.action = "/cgi-bin/some.cgi"; // action  method 
f.method = "POST";
f.submit(); //  submit()

<form>

html

<form name="formA" action="/cgi-bin/test" method="post">
  <p>Press "Info" for form details, or "Set" to change those details.</p>
  <p>
    <button type="button" >Info</button>
    <button type="button" >Set</button>
    <button type="reset">Reset</button>
  </p>

  <textarea id="form-info" rows="15" cols="20"></textarea>
</form>

<script>
  function getFormInfo() {
    // 
    const f = document.forms["formA"];
    // 
    const properties = [
      "elements",
      "length",
      "name",
      "charset",
      "action",
      "acceptCharset",
      "action",
      "enctype",
      "method",
      "target",
    ];
    // 
    const info = properties
      .map((property) => `${property}: ${f[property]}`)
      .join("\n");

    //  <textarea> 
    document.forms["formA"].elements["form-info"].value = info; // document.forms["formA"]['form-info'].value would also work
  }

  function setFormInfo(f) {
    // 
    f.action = "a-different-url.cgi";
    f.name = "a-different-name";
  }
</script>

<form>

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Example new-window form submission</title>
  </head>
  <body>
    <form action="test.php" target="_blank">
      <p>
        <label>First name: <input type="text" name="first-name" /></label>
      </p>
      <p>
        <label>Last name: <input type="text" name="last-name" /></label>
      </p>
      <p>
        <label><input type="password" name="pwd" /></label>
      </p>

      <fieldset>
        <legend>Pet preference</legend>

        <p>
          <label><input type="radio" name="pet" value="cat" /> Cat</label>
        </p>
        <p>
          <label><input type="radio" name="pet" value="dog" /> Dog</label>
        </p>
      </fieldset>

      <fieldset>
        <legend>Owned vehicles</legend>

        <p>
          <label
            ><input type="checkbox" name="vehicle" value="Bike" />I have a
            bike</label
          >
        </p>
        <p>
          <label
            ><input type="checkbox" name="vehicle" value="Car" />I have a
            car</label
          >
        </p>
      </fieldset>

      <p><button>Submit</button></p>
    </form>
  </body>
</html>


HTML # htmlformelement

HTML : <form>

MDN

MDN 2025119

GitHub