应该熟知的表单js应用（select、label、submit）

前言

 首先需要清楚的是，表单传数据方式，有POST和GET的方式，通过name和对应的value值提交到后台。通过name，可以用对象属性调用的方式获取对应的input标签，如:

document.formName.iptName.iptVal  //获取input的value值
<input type=”hidden” name=”xxx” value=”xxx” /> //隐藏的参数可以这样提交

 

一，SELECT

1、基本属性和方法

//select

select.options          // 获取所有option

select.value            //选中的option的value

select.selectedIndex    //选中的option的序号

select.options.add(new Option(text,value))  //增加option

select.options.remove(i)      //移除i序号的option



//option

options[select.selectedIndex] //当前选中的option

options[?].value/.text        //option的value属性和对应的文本值

options[?].selected = true    //选中当前option

options[?] = null             //删除当前option

2、select事件

select.onchange = func;  //改变下拉框选项时触发

 

二，LABEL

1，根据label的for属性指向input的id，实现点击文字选中

//设置相同的name则只能选一个，for指向对应的id，这样点击文字可以选择对应的input

<input type="radio" name="hehe" id="a" value="" />

<label for="a">one</label>



<input type="radio" name="hehe" id="b" value="" />

<label for="b">two</label>

 2，把input写在label里边，点击文字也会选中

//input写label里边，点击文字可选中，注意for要去掉

<label><input type="radio" name="hehe" value="" />one</label>

<label><input type="radio" name="hehe" value="" />two</label>

注意：radio和check事件选中调用 onclick比较好，onchange在ie6/7/8会有先获取焦点的不兼容的解析。

还是写写好了：

　　ie6、7、8在onchange事件中点击不会直接选中,需要点击两次，解决方法是：

   　　 A、通过绑定input的onclick = “this.blur()”;

    　　B、通过触发input的onclick代替onchange选中（通过label事件可以触发对应的input事件）；

 

三，SUBMIT

1，input submit触发

//提交前调用的事件，return false则不提交

document.formName.onsubmit = func;

 2，button 或 其他点击 submit触发

//一般的button表示

<input type="button" value="点击我" name="btn" />



//更实用的button，可以放置文字，图片等，此处的type属性不要去掉，因为button不同浏览器的默认type不一样。

<button type="button" name="btn">点击我</botton>



//button的提交，注意这个submit()不会触发onsubmit事件

document.formName.btn.onclick = function(){

    document.formName.submit();

}

 

——个人实践总结下来的一篇小博客