mdn · yin1999 · Jul 29, 2023 · Jul 28, 2023 · Jul 29, 2023
@@ -22,11 +22,11 @@ target.onformdata = functionRef;
 ```js
 // grab reference to form
 
-const formElem = document.querySelector('form');
+const formElem = document.querySelector("form");
 
 // submit handler
 
-formElem.addEventListener('submit', (e) => {
+formElem.addEventListener("submit", (e) => {
   // on form submission, prevent default
   e.preventDefault();
 
@@ -37,7 +37,7 @@ formElem.addEventListener('submit', (e) => {
 // formdata handler to retrieve data
 
 formElem.onformdata = (e) => {
-  console.log('formdata fired');
+  console.log("formdata fired");
 
   // Get the form data from the event object
   let data = e.formData;

@@ -64,7 +64,7 @@ document.body.appendChild(f);
 
 // Add action and method attributes
 f.action = "/cgi-bin/some.cgi";
-f.method = "POST"
+f.method = "POST";
 
 // Call the form's submit method
 f.submit();
@@ -80,44 +80,59 @@ In addition, the following complete HTML document shows how to extract informati
 
     // Get a reference using the forms collection
     var f = document.forms["formA"];
-    info = "f.elements: " + f.elements + "\n"
-         + "f.length: " + f.length + "\n"
-         + "f.name: " + f.name + "\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;
+    info =
+      "f.elements: " +
+      f.elements +
+      "\n" +
+      "f.length: " +
+      f.length +
+      "\n" +
+      "f.name: " +
+      f.name +
+      "\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;
   }
 
   // A reference to the form is passed from the
   // button's onclick attribute using 'this.form'
   function setFormInfo(f) {
     f.method = "GET";
     f.action = "/cgi-bin/evil_executable.cgi";
-    f.name   = "totally_new";
+    f.name = "totally_new";
   }
 </script>
 
-<h1>Form  example</h1>
-
-<form name="formA" id="formA"
- action="/cgi-bin/test" method="POST">
- <p>Click "Info" to see information about the form.
-    Click set to change settings, then info again
-    to see their effect</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">
-  </textarea>
- </p>
+<h1>Form example</h1>
+
+<form name="formA" id="formA" action="/cgi-bin/test" method="POST">
+  <p>
+    Click "Info" to see information about the form. Click set to change
+    settings, then info again to see their effect
+  </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"> </textarea>
+  </p>
 </form>
 ```
 
@@ -126,45 +141,77 @@ The following example shows how to submit a form in a [popup window](/zh-CN/docs
 ```html
 <!doctype html>
 <html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-function popupSend (oFormElement) {
-  if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") {
-    alert("This script supports the GET method only.");
-    return;
-  }
-  var oField, sFieldType, nFile, sSearch = "";
-  for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
-    oField = oFormElement.elements[nItem];
-    if (!oField.hasAttribute("name")) { continue; }
-    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-    if (sFieldType === "FILE") {
-      for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-    } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-      sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
-    }
-  }
-  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
-}
-</script>
-
-</head>
-
-<body>
-
-<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;">
-  <p>First name: <input type="text" name="firstname" /><br />
-  Last name: <input type="text" name="lastname" /><br />
-  Password: <input type="password" name="pwd" /><br />
-  <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p>
-  <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
-  <input type="checkbox" name="vehicle" value="Car" />I have a car</p>
-  <p><input type="submit" value="Submit" /></p>
-</form>
-
-</body>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>MDN Example</title>
+    <script type="text/javascript">
+      function popupSend(oFormElement) {
+        if (
+          oFormElement.method &&
+          oFormElement.method.toLowerCase() !== "get"
+        ) {
+          alert("This script supports the GET method only.");
+          return;
+        }
+        var oField,
+          sFieldType,
+          nFile,
+          sSearch = "";
+        for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+          oField = oFormElement.elements[nItem];
+          if (!oField.hasAttribute("name")) {
+            continue;
+          }
+          sFieldType =
+            oField.nodeName.toUpperCase() === "INPUT"
+              ? oField.getAttribute("type").toUpperCase()
+              : "TEXT";
+          if (sFieldType === "FILE") {
+            for (
+              nFile = 0;
+              nFile < oField.files.length;
+              sSearch +=
+                "&" +
+                escape(oField.name) +
+                "=" +
+                escape(oField.files[nFile++].name)
+            );
+          } else if (
+            (sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") ||
+            oField.checked
+          ) {
+            sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+          }
+        }
+        open(
+          oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")),
+          "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)),
+          "resizable=yes,scrollbars=yes,status=yes",
+        );
+      }
+    </script>
+  </head>
+
+  <body>
+    <form
+      name="yourForm"
+      action="test.php"
+      method="get"
+      onsubmit="popupSend(this); return false;">
+      <p>
+        First name: <input type="text" name="firstname" /><br />
+        Last name: <input type="text" name="lastname" /><br />
+        Password: <input type="password" name="pwd" /><br />
+        <input type="radio" name="sex" value="male" /> Male
+        <input type="radio" name="sex" value="female" /> Female
+      </p>
+      <p>
+        <input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
+        <input type="checkbox" name="vehicle" value="Car" />I have a car
+      </p>
+      <p><input type="submit" value="Submit" /></p>
+    </form>
+  </body>
 </html>
 ```
 

@@ -20,13 +20,21 @@ HTMLFormElement.reportValidity()
 ## Example
 
 ```js
-document.forms['myform'].addEventListener('invalid', function() {
-  // Optional response here
-}, false);
-
-document.forms['myform'].addEventListener('submit', function() {
-  document.forms['myform'].reportValidity();
-}, false);
+document.forms["myform"].addEventListener(
+  "invalid",
+  function () {
+    // Optional response here
+  },
+  false,
+);
+
+document.forms["myform"].addEventListener(
+  "submit",
+  function () {
+    document.forms["myform"].reportValidity();
+  },
+  false,
+);
 ```
 
 ## Specifications

@@ -9,7 +9,7 @@ slug: Web/API/HTMLFormElement/requestSubmit
 
 ## 语法
 
-```js
+```js-nolint
 requestSubmit()
 requestSubmit(submitter)
 ```

@@ -22,12 +22,12 @@ slug: Web/API/HTMLFormElement/reset_event
 
 ## 属性
 
-| Property                              | Type                                 | Description                        |
-| ------------------------------------- | ------------------------------------ | ---------------------------------- |
+| Property                        | Type                       | Description                        |
+| ------------------------------- | -------------------------- | ---------------------------------- |
 | `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | 事件的目标（DOM 树最顶端的元素）。 |
-| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | 事件的类型。                       |
-| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | 是否指定事件冒泡。                 |
-| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | 事件是否可以被取消。               |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}   | 事件的类型。                       |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}      | 是否指定事件冒泡。                 |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}      | 事件是否可以被取消。               |
 
 ## 规范
 

@@ -20,7 +20,7 @@ slug: Web/API/HTMLFormElement/submit
 
 ## 语法
 
- ```js
+```js-nolint
 submit()
 ```
 

@@ -1,5 +1,5 @@
 ---
-title: 'HTMLFormElement: submit event'
+title: "HTMLFormElement: submit event"
 slug: Web/API/HTMLFormElement/submit_event
 ---
 
@@ -42,8 +42,8 @@ slug: Web/API/HTMLFormElement/submit_event
 
 ```html
 <form id="form">
-  <label>Test field: <input type="text"></label>
-  <br><br>
+  <label>Test field: <input type="text" /></label>
+  <br /><br />
   <button type="submit">Submit form</button>
 </form>
 <p id="log"></p>
@@ -57,9 +57,9 @@ function logSubmit(event) {
   event.preventDefault();
 }
 
-const form = document.getElementById('form');
-const log = document.getElementById('log');
-form.addEventListener('submit', logSubmit);
+const form = document.getElementById("form");
+const log = document.getElementById("log");
+form.addEventListener("submit", logSubmit);
 ```
 
 ### 结果

@@ -35,14 +35,15 @@ var promise = HTMLImageElement.decode();
 
 ```js
 const img = new Image();
-img.src = 'nebula.jpg';
-img.decode()
-.then(() => {
-  document.body.appendChild(img);
-})
-.catch((encodingError) => {
-  // Do something with the error.
-})
+img.src = "nebula.jpg";
+img
+  .decode()
+  .then(() => {
+    document.body.appendChild(img);
+  })
+  .catch((encodingError) => {
+    // Do something with the error.
+  });
 ```
 
 ## 规范

@@ -28,8 +28,8 @@ imgElem.decoding = refStr;
 
 ```js
 var img = new Image();
-img.decoding = 'sync';
-img.src = 'img/logo.png';
+img.decoding = "sync";
+img.src = "img/logo.png";
 ```
 
 ## Specifications

@@ -26,14 +26,14 @@ Image(width, height)
 
 ```js
 var myImage = new Image(100, 200);
-myImage.src = 'picture.jpg';
+myImage.src = "picture.jpg";
 document.body.appendChild(myImage);
 ```
 
 上面的代码相当于在 {{htmlelement("body")}}中定义了下面的 HTML:
 
 ```html
-<img width="100" height="200" src="picture.jpg">
+<img width="100" height="200" src="picture.jpg" />
 ```
 
 > **备注：** 无论构造函数中指定的大小是多少，都会加载整个位图。如果在构造时指定了尺寸信息，那么将会反应在实例的 {{domxref("HTMLImageElement.width")}} 和 {{domxref("HTMLImageElement.height")}} 属性上。图像自身的 CSS 像素值将会反应在{{domxref("HTMLImageElement.naturalWidth")}} 和 {{domxref("HTMLImageElement.naturalHeight")}}属性。如果没有指定值，那么两个属性的值相同