javascript - 哪个属性更适合处理表单，名称或ID？(Which attribute is better for processing forms, name or id?)

Question

I'm working with forms and using fetch to post data.(我正在处理表单，并使用访存来发布数据。)

I usually use id to select elements, but I was thinking lately to use the name attribute instead.(我通常使用id来选择元素，但是最近我在想使用name属性。) Is there some advantage for using the id attribute over the name attribute?(有一些优势，为使用id属性在name属性？) Thanks.(谢谢。)

For example(例如)

HTML(的HTML)

<form name="emailForm1">
  <input name="emailAddress1" type="email"><button type="submit">Submit</button>
</form>
<br>
<form id="emailForm2">
  <input id="emailAddress2" name="emailAddress2" type="email"><button type="submit">Submit</button>
</form>

JS(JS)

document.emailForm1.addEventListener('submit', emailSubmit1);

function emailSubmit1(e) {
  e.preventDefault();
  var email = e.target.emailAddress1.value;
  alert(email);
}

document.querySelector("#emailForm2").addEventListener('submit', emailSubmit2);

function emailSubmit2(e) {
  e.preventDefault();
  var email = document.querySelector("#emailAddress2").value;
  alert(email);
}

  ask by Leon translate from so

Answer 1

One benefit of name attributes is that they are included in the submitted form data by default.(name属性的一个好处是，默认情况下， name属性包含在提交的表单数据中。)

The code in your answer:(您的答案中的代码：)

 <form name="emailForm1"> <input name="emailAddress1" type="email"><button type="submit">Submit</button> </form> 

if you put ab@a in the field, results in a submission that ends in ?emailAddress1=ab%40a .(如果您在字段中输入ab@a ，则会导致提交结果以?emailAddress1=ab%40a结尾。)

(Check your browser's Network tab to see.) As you can see, emailAddress1 is included in the query string by default - this can make things a lot easier in some situations, when you want the user to be able to submit the form directly to the server, without having to send the request yourself with Javascript.(（检查浏览器的“网络”选项卡以查看。）如您所见，默认情况下，查询字符串中包含emailAddress1在某些情况下，当您希望用户能够直接将表单提交到时，这会使事情变得容易得多。服务器，而不必自己使用Javascript发送请求。)

But if you're processing the fields on frontend only, or if you're always extracting field values and then sending a request manually, rather than submitting the form by default, then it doesn't matter - you can use any method to extract the values.(但是，如果仅在前端处理字段，或者始终提取字段值然后手动发送请求，而不是默认情况下不提交表单，那么这没关系-您可以使用任何方法提取价值。)

That said, global variables are highly discouraged, and IDs in the HTML always create global variables, so some might recommend using name attributes (or another method of selecting elements) instead when possible.(也就是说，不建议使用全局变量，并且HTML中的ID总是创建全局变量，因此有些人可能建议在可能的情况下改用name属性（或选择元素的另一种方法）。)