表单(一)：基础知识

取得<form>元素引用的方式

var form = document.getElementById('form1');
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms['form2']; //取得页面中名称为'form2'的表单
var formObj = document.forms.form2; //不推荐，，一是容易出错，二是将来的浏览器可能会不支持

 

提交表单
定义提交按钮

//通用提交按钮
<input type='submit' value='submit form'/>
//自定义提交按钮
<button type='submit'>submit form</button>
//图像按钮
<input type='image' src='graphic.gif'/>

提交事件

var form = document.getElementById('myForm');
form.submit();

这种方式无需表单包含的提交按钮，任何时候都可以正常提交表单

var form = document.getElementById('myForm');
EventUtil.addHandle(form, 'submit', function(event){
    //取得事件对象
    event = EventUtil.getEvent(event);
    //阻止默认事件
    EventUtil.preventDefault(event);
})

*:在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮，结果往往会很麻烦，因为服务器要处理重复的请求，
或者造成错误，如果用户是下订单，那么可能会多订好几份。解决这一个问题的办法有两个
1、在第一次提交表单后就禁用提交按钮
2、利用onsubmit事件处理程序取消后续的表单提交操作

 

重置表单
创建重置按钮

//通用重置按钮
<input type='reset' value='reset form'/>
//自定义重置按钮
<button type='reset'>reset form</button>

点击重置按钮

var form = document.getElementById('myForm');
form.reset();

与调用submit()方法不同，调用reset()方法会像单击重置按钮一样触发reset事件

 

访问表单

<form method='post' id='myForm'>
    <ul>
        <li>
            <input type='radio' name='color' value='red'/>
        </li>
        <li>
            <input type='radio' name='color' value='green'/>
        </li>
        <li>
            <input type='radio' name='color' value='blue'/>
        </li>
    </ul>
</form>

var form = document.getElementById('myForm');
var coloFields = form.elements['color']; //返回一个NodeList