关于form.elements的javascript
[英]javascript about form.elements
问题描述
I am a JavaScript newbie and form.elements is making me confused. 
我是JavaScript新手， form.elements让我感到困惑。 I have a demo like this: 我有一个这样的演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function js() { var myform = document.forms[0]; alert(myform.elements.length); } </script> </head> <body onload="js()"> <form> <fieldset> this is a demo: <p> this is ap element</p> <label> this is a label element </label><br/> <input type="text" value="abc"/> <button type="button">click me</button> </fieldset> </form> </body> </html>
Why does this return 3 elements instead of 5? 为什么返回3个元素而不是5个？ I think the answer should be 5 elements ( fieldset , p , label , input and button ), because W3Schools states that " form.elements returns a collection of all elements in a form ", but the browser tells me there's only 3 elements. 我认为答案应该是5个元素（ fieldset ， p ， label ， input和button ），因为W3Schools指出“ form.elements返回表单中所有元素的集合 ”，但是浏览器告诉我只有3个元素。 Why? 为什么？
5 个解决方案
解决方案1
3 已采纳 2016-01-14 09:27:36
It doesn't return the p and label elements (or that <br> element you've got in there, either) as those aren't listed form elements (see below). 它不会返回p和label元素（或者您在那里找到的<br>元素），因为这些元素未列出表单元素（请参见下文）。
The
HTMLFormElement.elementsproperty returns anHTMLFormControlsCollection(HTML 4HTMLCollection) of all the form controls contained in theFORMelement, with the exception ofinputelements which have atypeattribute of image.HTMLFormElement.elements属性返回FORM元素中包含的所有表单控件的HTMLFormControlsCollection（HTML 4HTMLCollection），具有type为image的input元素除外。— MDN's Notes on HTMLFormElement.element .
The elements which HTMLFormElements.elements returns are collectivised in a subcategory of form-associated elements known as listed elements in the HTML specification: HTMLFormElements.elements返回的元素被归类为与表单相关的元素的子类别，这些元素在HTML规范中称为列出的元素 ：
Listed elements
Denotes elements that are listed in theform.elementsandfieldset.elementsAPIs.form.elements和fieldset.elementsAPI中列出的元素。
button,fieldset,input,keygen,object,output,select,textareabutton，fieldset，input，keygen，object，output，select，textarea
解决方案2
1 2016-01-14 09:26:44
In your code, only following are the form elements 在您的代码中，仅表单元素如下
[fieldset, input, button]
these are the names of possible form elements 这些是可能的表单元素的名称
<button>, <fieldset>, <input>, <output>, <progress>, <select>, <textarea>.
I have put a console log to show which those form elements are 我放置了一个控制台日志以显示哪些表单元素是
function js() {
var myform = document.forms[0];
console.log( myform.elements );
}
解决方案3
0 2016-01-14 09:28:05
This is because p and label are not form elements. 这是因为p和label不是表单元素。 We have the following form elements like 我们有以下表单元素，例如
- input 输入
- select 选择
- textarea textarea的
- button 按键
- datalist 数据列表
- keygen 凯基
- output 产量
解决方案4
0 2016-01-14 09:31:59
Your code show 3 elements as form elements fieldset (HTMLFieldSetElement), input (HTMLInputElement) & button (HTMLButtonElement) . 代码显示3种元素作为表单元素fieldset （HTMLFieldSetElement）， input （HTMLInputElement） button （HTMLButtonElement）。 label and p are not treated as form elements. label和p不被视为表单元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function js() { var myform = document.forms[0]; alert.log(myform.elements.length); for(var i=0;i<myform.elements.length;i++) { alert(myform.elements[i]); } } </script> </head> <body onload="js()"> <form> <fieldset> this is a demo: <p> this is ap element</p> <label> this is a label element </label><br/> <input type="text" value="abc"/> <button type="button">click me</button> </fieldset> </form> </body> </html>
解决方案5
0 2016-01-14 09:33:42
the p , label elements arent a form element so when you want to count the number of form element it give 3 p ， label元素没有一个form元素，所以当您要计算form元素的数量时，它给出3
by the way if you want to know the following elements are a form elements: 顺便说一句，如果您想知道以下元素是表单元素：
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.