zoukankan      html  css  js  c++  java
  • 应该熟知的表单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会有先获取焦点的不兼容的解析。

    还是写写好了:

      ie678onchange事件中点击不会直接选中,需要点击两次,解决方法是:

          A、通过绑定inputonclick = this.blur();

          B、通过触发inputonclick代替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();
    }

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

  • 相关阅读:
    20155338 2016-2017-2 《Java程序设计》第4周学习总结
    20155338 2016-2017-2 《Java程序设计》第3周学习总结
    20155338 2006-2007-2 《Java程序设计》第2周学习总结
    20155316 实验三《敏捷开发与XP实践》实验报告
    20155316 2016-2017-2 《Java程序设计》第10周学习总结
    20155316 2016-2017-2 《Java程序设计》第9周学习总结
    20155316 实验二《Java面向对象程序设计》实验报告
    20155316 2016-2017-2 《Java程序设计》第8周学习总结
    20155316 实验一《Java开发环境的熟悉》实验报告
    20155316 2016-2017-2 《Java程序设计》第7周学习总结
  • 原文地址:https://www.cnblogs.com/xinghh/p/3493099.html
Copyright © 2011-2022 走看看