解决方案
如果您不想阅读全部内容,请查看控制部分。
布局
如果使用多个
表单控件...
...将所有内容包裹在<form>
标签中,并给其一个#id。
...将表单控件分组并将它们包裹在<fieldset>
标签中。
...给<fieldset>
和表单控件添加#id。
访问
要完全控制一个<form>
...
Next, collect all of the <form>
tag's form controls using the .elements property:
var fields = formObj.elements
Having done that, you may use HTMLFormControlsCollection to reference any form control like a HTMLCollection by referencing the elements property and #id of the form control:
var set = fields.**fieldsetID**
var sel = fields.**selectID**
var btn3 = fields[2] // third form control
控制
元素的属性最初是通过在HTML中硬编码来设置的:
<fieldset disabled>
或者通过JS方法进行编程,例如setAttribute()。
fieldsetObj.setAttribute('disabled', true)
一旦属性被建立,如果你想要改变它,应该将其作为一个属性引用:
fieldsetObj.disabled = false
事件处理
通过向
<form>
标签注册事件来实现
委托事件。
(点击此处了解详情)。
formObj.addEventListener('change', function)
最适用的事件包括:
change, input, click, focus, blur, submit, reset
当所有事件都委托给<form>
标签时,Event Object属性Event.currentTarget将始终引用它。实际点击、更改、接收用户输入、获得焦点等的元素是事件的来源,可以作为Event.target进行引用。
一旦事件发生,事件链将进入捕获阶段:
e.currentTarget ===> e.target
<form> ============> <input>
然后是目标阶段:
e.target changed
<input checked>
最后是 冒泡阶段,任何其他元素在此之后将通过事件触发,如果按照其自身的默认行为进行排列,则会被注册或安排进行(例如,如果x是这样的,则y是那样的):
e.target =============> e.currentTarget
<input checked> ======> <form>
标签
许多(但并非全部)表单控件具有特殊行为,以便更轻松地操作<form>
及其表单控件:
<fieldset>
:将[disabled]属性应用于它和所有嵌套的表单控件也将被启用/禁用。
<input type="radio">
:将[name]属性应用于一组[单选框],当[checked]时它们将是互斥的(即只能选择一个)
具有[name]属性的表单控件在<form>
提交时将其value
发送到服务器。
<label>
:应用[for]属性并将其值设置为另一个表单控件的#id,将同步所述<label>
和表单控件。如果发生单击事件,则相关联的表单控件也会像被单击一样行为。
上述继承特性并非全部用于演示,但提到它们是因为如果需要,可能会用到。
演示
细节在演示中有注释
var main = document.forms.main;
var m = main.elements;
var g0 = m.grp0;
main.addEventListener('change', action);
function action(e) {
if (e.target.name === "grp0") {
if (g0.value === 'on') {
m.set0.disabled = false;
} else {
m.set0.disabled = true;
}
} else {
return false;
}
}
<form id='main'>
<fieldset id='ctrl'>
<label>Group 1 On
<input name="grp0" value="on" type="radio" checked/>
Off
<input name="grp0" value="off" type="radio" />
</label>
</fieldset>
<fieldset id='set0'>
<legend>Group 1</legend>
<textarea id="txt"></textarea>
</fieldset>
</form>