持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

表单和表单元素有许多特殊的属性和时间。

获取表单及表单控件元素

获取表单元素

document.forms是文档中表单的集合。可以通过name属性或者索引来访问表单，document.forms[name/index]。

<form id="form" name="my">
  <fieldset name="userFields">
    <legend>info</legend>
    <input name="login" type="text">
  </fieldset>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>
<javascript>
    let form1 = document.forms[0]
    let form2 = document.forms.my
    console.log(form1 == form2) // true
</javascript>

获取表单中的控件元素

当有了一个表单时，表单中的元素可以通过name属性获取。form.elements[name]。

1. 不论控件元素层级有多深，都可以通过form.elements[name]获取。
2. 如果有多个相同的name属性的表单元素，则form.elements[name]是一个集合。
3. 也可以通过form[name/index]直接访问控件元素。

console.log(form1.elements)//[object HTMLFormControlsCollection]
console.log(form1.elements.login == form1.login)//true
//如果有多个相同的name属性的表单元素，则`form.elements[name]`是一个集合。
console.log(form1.elements.age)//[object RadioNodeList]
console.log(form1.elements.age[0].value)//10
console.log(form1.elements.age[1].value)//20

表单元素和控件元素相互引用

任何控件元素都可以通过element.form访问表单元素。表单元素引用了所有的控件元素，空间元素也引用了表单元素。

console.log(form1.age[1].form == form1)//true

表单控件元素

1. <input type="text">和<textarea>通过input.value和textarea.value设置和获取值。

2. <input type="checkbox">和<input type="radio">通过input.checked获取或设置值。

3. <select><option>通过select.value获取值。

   select有三个重要的属性。

   select.value--当前选择的option的值
   select.options--option子元素的集合
   select.selectedIndex--当前所选择option的编号
   

   通过这三种属性设置select的值。

   a. 通过select.value设置。
   b. 将option.selected设置为true。
   c. 将select.selectedIndex设置为对应option的编号。
   

<select id="select">
  <option value="apple">Apple</option>
  <option value="pear">Pear</option>
  <option value="banana">Banana</option>
</select>

<script>
  // 下面这三行做的都是同一件事
  select.options[2].selected = true;
  select.selectedIndex = 2;
  select.value = 'banana';
  // 请注意：选项编号是从零开始的，所以编号 2 表示的是第三项
</script>

创建一个 <option> 元素：

option = new Option(text, value, defaultSelected, selected);

• text —— <option> 中的文本，
• value —— <option> 的 value，
• defaultSelected —— 如果为 true，那么 selected HTML-特性（attribute）就会被创建，
• selected —— 如果为 true，那么这个 <option> 就会被选中。