东台市建设局网站/关键词排名优化公司
表单属性与方法
表单和控件元素，如<input>有很多特定的属性与事件。如果我们了解它们，使用表单就会方便得多。
访问表单及元素
文档中的表单是特定集合的成员：document.forms.也是一个命名集合，我们能使用名称或序号访问表单。
document.forms.my - the form with name="my"document.forms[0] - the first form in the document如果有一个表单，那么命名集合form.elements中的任何元素都是有效的。举例：
<form name="my"><input name="one" value="1"><input name="two" value="2"></form><script>// get the formlet form = document.forms.my; // <form name="my"> element// get the elementlet elem = form.elements.one; // <input name="one"> elementalert(elem.value); // 1</script>可能有多个元素使用相同的名称，通常是单选按钮。则form.elements[name]返回一个集合，举例：
<form><input type="radio" name="age" value="10"><input type="radio" name="age" value="20"></form><script>let form = document.forms[0];let ageElems = form.elements.age;alert(ageElems[0].value); // 10, the first input value</script>这些导航属性不依赖标签结构，所有元素，无论在表单中处于多深的层次，使用form.elements都是有效。
Fieldset 子表单
表单可能有一个或多个<fieldset>元素，其也支持elements属性。举例：
<body><form id="form"><fieldset name="userFields"><legend>info</legend><input name="login" type="text"></fieldset></form><script>alert(form.elements.login); // <input name="login">let fieldset = form.elements.userFields;alert(fieldset); // HTMLFieldSetElement// we can get the input both from the form and from the fieldsetalert(fieldset.elements.login == form.elements.login); // true</script></body>简短标识: form.name
有更简短标识：我们能通过form[index/name]访问元素,代替这种方式form.elements.login,也可以写form.login。这也是可行的，但有点小问题：如果我们访问一个元素，然后改变其名称，那么旧的名称仍然有效（新的名称也有效）。通过示例更容易看明白：
<form id="form"><input name="login"></form><script>alert(form.elements.login == form.login); // true, the same <input>form.login.name = "username"; // change the name of the input// form.elements updated the name:alert(form.elements.login); // undefinedalert(form.elements.username); // input// the direct access now can use both names: the new one and the old onealert(form.username == form.login); // true</script>但通常这不是问题，因为我们很少改变表单元素的名称。
反向引用：element.form
对任何元素，通过element.form可以访问对应表单，所以表单引用所有元素，反之元素也引用表单。图示如下：
<form id="form"><input type="text" name="login"></form><script>// form -> elementlet login = form.login;// element -> formalert(login.form); // HTMLFormElement</script>表单元素
让我们来讨论一下表单控件，留意它们的特性。
input和textarea
通常我们能获取input或textarea值，通过input.valuel,input.checked访问checkbox的值。如下：
input.value = "New value";textarea.value = "New text";input.checked = true; // for a checkbox or radio button使用 textarea.value, 而不是 textarea.innerHTML
请注意，我们不应该使用textarea.innerHTML:因为其仅存储页面初始化时的html，而不是当前值。
select 和 option
元素<select>有三个重要属性：
select.options– 元素的集合,select.value– 选项的当前值,select.selectedIndex– 已选择条目的数量.
所以有三种方式设置元素值：
- 查找必要的
<option>，然后设置option.selected 为 true. - 设置
select.value至相应值. - 设置
select.selectedIndex至选项的序数.
第一种方式很明显，但2和3方式通常更便捷。
<select id="select"><option value="apple">Apple</option><option value="pear">Pear</option><option value="banana">Banana</option></select><script>// all three lines do the same thingselect.options[2].selected = true;select.selectedIndex = 2;select.value = 'banana';</script>与其他控件不同，<select multiple>允许多选。这时我们需要遍历select.options获得所有选择的值。如下：
<select id="select" multiple><option value="blues" selected>Blues</option><option value="rock" selected>Rock</option><option value="classic">Classic</option></select><script>// get all selected values from multi-selectlet selected = Array.from(select.options).filter(option => option.selected).map(option => option.value);alert(selected); // blues,rock</script>元素<select>的完整规范地址为： https://html.spec.whatwg.org/multipage/forms.html#the-select-element.
新选项
在规范有简短的语法可以创建<option>元素：
option = new Option(text, value, defaultSelected, selected);
text– option展现内容,value– option 实际值,defaultSelected– 如果为 true, 那么创建 selected 属性 ,selected– 如果为 true, 该选项为选中状态.
举例：
let option = new Option("Text", "value");
// creates <option value="value">Text</option>
同样的选中元素：
let option = new Option("Text", "value", true, true);
的其他属性
Option 元素还有额外的属性:
selected
option 被选中.
index
相对其他所有选项的序号.
text
option的展示内容 (用户所见内容).
总结
访问表单：document.forms,document.forms[name/index]也可以访问表单。
form.elements
通过 form.elements[name/index]可以访问表单元素,也能直接使用form[name/index]. 对元素属性一样有用.
**
element.form**
通过form属性，元素可以引用其表单.
input.value, textarea.value, select.value 等可以获取元素value, 对 checkboxes and radio按钮需通过 input.checked 访问value.
对<select> 我们也可以通过select.selectedIndex访问index，或在通过select.options访问选项集合 .表单中其他元素的规范请参考 https://html.spec.whatwg.org/multipage/forms.html.
这些是开始处理表单的基础知识，下节将讨论focus和blur事件，几乎涉及任何元素，但主要是基于表单。