zoukankan      html  css  js  c++  java
  • 表单操作

    # 表单操作  
      1. ## 表单的引用:</br>
                1)直接定位: id / name/ tagname
                2)集合方式: 
                           document.forms[index];通过下标
                           document.forms["表单name名"];
                           document.forms."表单name名";
                           document."表单name名";

      2. ## 表单内总元素引用:
                1)直接定位: id / name/ tagname
                2)集合方式: 
                           document."表单name名".elements[index];通过下标
                           document."表单name名"."表单内元素name名";
                           document."表单name名".elements."表单内元素name名";
                           document."表单name名".elements["表单内元素name名"];
                           document."表单name名"["表单内元素name名"];
      3. ## 表单元素属性及方法: </br>
                1)属性:  disabled(是否可用)  form(返回包含字段的表单)
                2)方法:  blur()(失去焦点)    focus()(获得焦点)

    ##实例

     

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload=function(){
    document.form1.username.blur();
    document.form1.username.onfocus=function(){

    document.form1.username.value="";
    };
    document.form1.username.onblur=function(){
    if(document.form1.username.value){
    return 0;
    }
    else{
    document.form1.username.value="输入姓名";
    }
    };

    //
    // //单选btn1事件
    // document.form1.btn1.onclick=function(){
    // // console.log(document.form1.sex.length);//找到name为sex的长度
    // for(var i=0;i<document.form1.sex.length;i++){
    // if(document.form1.sex[i].checked){
    // console.log(document.form1.sex[i].value);
    // }
    // }
    // };
    //
    //
    // //复选btn2事件
    // document.form1.btn2.onclick=function(){
    // for(var i=0;i<document.form1.sex.length;i++){
    // if(document.form1.aihao[i].checked){
    // console.log(document.form1.aihao[i].id);//获取相应的复选框name为aihao的id值
    // }
    // }
    // };
    //
    //
    // //下拉btn3事件
    // document.form1.btn3.onclick=function(){
    //
    // // alert(document.form1.address.length);
    // for(var i=0;i<document.form1.address.length;i++){
    // //判断下拉列表中的元素是否被选中
    // if(document.form1.address[i].selected){
    // console.log(document.form1.address[i].value);//后台输出选中的value
    //
    // }
    // }
    //
    // };


    //表单的校验
    // function check(){
    //
    // //姓名的判断 1.将value="输入姓名"的默认值去掉
    // //2.判断输入框name为username的value值是否为空
    // if(document.form1.username.value==""){
    // document.form1.username.style.border="1px solid red";
    // return false;
    // }
    //
    //
    // }

    };
    </script>
    </head>
    <body>
    <form action="#" id="form1" name="form1" method="get" onsubmit="return check()">
    <label for="">姓名</label><input type="text" name="username" id="username1" value=""/><br/>
    <label for="" name="age">年龄</label><input type="text" id="age"/><br/>
    <label for="" name="sex">性别</label>
    <label for="" >男</label><input type="radio" value="male" name="sex"/>
    <label for="" >女</label><input type="radio" value="female" name="sex"/><br/>

    爱好<input type="checkbox" id="run" name="aihao"/> <label for="" >跑步</label>
    <input type="checkbox" id="music" name="aihao"/> <label for="" >音乐</label>
    <input type="checkbox" id="movie" name="aihao"/> <label for="" >电影</label><br/>
    <select name="address" id="address" multiple="multiple">
    <option value="cd">成都</option>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    </select><br/>
    <textarea name="" id="" cols="30" rows="10"></textarea><br/>
    <input type="submit" value="提交"/>
    <input type="button" value="单选" name="btn1"/>
    <input type="button" value="复选" name="btn2"/>
    <input type="button" value="下拉" name="btn3"/>
    <input type="button" value="提交" name="btn4"/>
    <input type="button" value="提交" name="btn5"/>
    </form>
    </body>
    </html>
    <script>
    function check(){

    // 姓名的判断 1.将value="输入姓名"的默认值去掉
    //2.判断输入框name为username的value值是否为空
    if(document.form1.username.value==""){
    document.form1.username.style.border="1px solid red";
    return false;
    }
    //性别的校验
    var statu=false;
    for(var i=0;i<document.form1.sex.length;i++){

    if(document.form1.sex[i].checked){
    statu=true;
    }
    }
    if(!statu){
    return false;
    }

    // document.form1.btn4.onclick=function(){
    //
    // document.form1.action="#2";//修改它提交的地址
    // document.form1.submit();//js提供的submit()方法
    //
    // };
    // document.form1.btn5.onclick=function(){
    // document.form1.action="#3";//修改它提交的地址
    // document.form1.submit();//js提供的submit()方法
    //
    // };
    //

    }
    // //多个按钮提交到不同的·地址
    document.form1.btn4.onclick=function(){

    document.form1.action="#2";//修改它提交的地址
    document.form1.submit();//js提供的submit()方法

    };
    document.form1.btn5.onclick=function(){
    document.form1.action="#3";//修改它提交的地址
    document.form1.submit();//js提供的submit()方法

    };
    </script>
  • 相关阅读:
    Web开发利器Webstorm导入多个文件夹或者项目
    js react 全选和反选
    nginx的配置文件 【nginx.conf】
    nginx 服务器重启命令,关闭
    Nginx反向代理新篇-使用location对多个URL做反向代理
    Windows下Nginx的安装与配置
    es6 递归 tree
    自定义table样式
    数据库(7)
    数据库(6)
  • 原文地址:https://www.cnblogs.com/alicezq/p/4805818.html
Copyright © 2011-2022 走看看