Form Properties and Methods
JavaScript Form Properties and Methods （JavaScript表单属性和方法）
The method property is targeted at setting or returning the value of the method attribute in a form. （方法属性旨在设置或返回表单中方法属性的值。）
The method attribute indicates the way of sending form-data. The latter is sent to the page, specified in the action attribute. （方法属性指示发送表单数据的方式。后者被发送到action属性中指定的页面。）
Navigation: Form and Elements
Navigation: Form and Elements
Document forms are the components of the specific collection, known as document.forms. It is a so-called “named collection”, both named and ordered. For getting the form both the name and the number can be used, like here:
document.forms.myForm - the form with name=“myForm” （document.forms.myForm - name = “myForm"的表单）
document.forms[0] - it’s the first form in the document （document.forms [0] -这是文档中的第一个表单）
While having a form, any element is available in the named collection form.elements, like in this example:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<form name="myForm">
<input name="firstName" value="1">
<input name="lastName" value="2">
</form>
<script>
// get the form
（//获取表单）
let form = document.forms.myForm; // <form name="myForm"> element
// get the element
（//获取元素）
let elem = form.elements.firstName; // <input name="firstName"> element
alert(elem.value); // 1
</script>
</body>
</html>
Multiple elements can exist with the same name: for example, the case with radio buttons. In such a case, form.elements[name] is a collection, for example:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<form>
<input type="radio" name="age" value="1">Value1</input>
<input type="radio" name="age" value="2">Value2</input>
</form>
<script>
let form = document.forms[0];
let ageElems = form.elements.age;
alert(ageElems[0]); // [object HTMLInputElement]
</script>
</body>
</html>
The navigation properties don’t rely upon the tag structure. All the control elements are available inside form.elements. （导航属性不依赖于标签结构。所有控件元素在form.elements中可用。）
Fieldsets as “Subforms”
A form can contain one or many <fieldset> elements. Also, they have elements property, which is controlled by the lists form inside them. Here is an example:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<form id="formId">
<fieldset name="infoFields">
<legend>info</legend>
<input name="login" type="text">
</fieldset>
</form>
<script>
alert(formId.elements.login); // <input name="login">
let fieldset = formId.elements.infoFields;
alert(fieldset); // HTMLFieldSetElement
// we can get input by name both from the form and from a set of fields
（//我们可以从表单和一组字段按名称获取输入）
alert(fieldset.elements.login == formId.elements.login); // true
</script>
</body>
</html>
You can also use a shorter notation: form.name. So, you have the option of accessing the element as form[index/name]. In other words, you can simply write form.login instead of form.elements.login. That also can work, but there is a small problem: when accessing an element and changing its name, it will still be available under the previous name. It is demonstrated in the following example:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<form id="form">
<input name="login">
</form>
<script>
alert(form.elements.login == form.login); // true, it's the same <input>
form.login.name = "name"; // change the name of the input
// form.elements updated the name:
alert(form.elements.login); // undefined
alert(form.elements.name); // input
// form allows both names: the new and the old
alert(form.name == form.login); // true
</script>
</body>
</html>
Backreference: element.form
Backreference: element.form
The form is available as element.form for any element. So, elements reference the form and the form references all elements, as demonstrated in the picture below:
And, here is an example:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<form id="form">
<input type="text" name="login">
</form>
<script>
// form -> element
（编辑表单元素）
let login = form.login;
// element -> form
（元素 - 形式）
alert(login.form); // HTMLFormElement
</script>
</body>
</html>
Form Elements
Form Elements （表单元素）
Let’s look through the main form elements:
input.value = "The Value";
textarea.value = "The text"
input.checked = true; // checkbox or radio button
let option = new Option(text, value, defaultSelected, selected);
The parameters are the following:
text is the text within the option, （-文本是选项中的文本，）
value is the value of the option, （- value是选项的值，）
defaultSelected – if it’s true, then selected HTML-attribute is generated, （- defaultSelected –如果为true ，则生成选定的HTML属性，）
selected – if it’s true, then the option is picked out. （-已选择–如果为真，则选择该选项。）
Sometimes there is a confusion over defaultSelected and selected. The difference between them is the following: defaultSelecte specifies the HTML-attribute, which you can get using option.getAttribute(‘selected’), and the selected sets whether the is selected or not. It is more important. In principle, both values can be set to true or false. For example:
let option = new Option('text', 'value');
// creates <option value="value">text</option>
In the example below, the same element is selected:
let option = new Option('text', 'value', true, true);
Option elements include the following properties:
option.selected - the option is selected. （- option.selected -已选择该选项。）
option.index - the number of the option amid the others in its kbd class=“highlighted”><select>.
option.text -the option’s text content. （- option.text -选项的文本内容。）