HTML,JS中form表中内容获取

╰半夏微凉° 2022-05-25 07:00 114阅读 0赞

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>js操作form表单</title>  
    </head>  
    <body>  
        <form action="" method="post" οnsubmit="return ss()">  
        用户名：<input type="text"  id="username" /><br />  
        密码：<input type="password"  id="pwd" /><br />  
        性别：<input type="radio" name="sex" id="1"/>男  
        <input type="radio" name="sex" id="0"/>女<br />  
          
          
        爱好：<input type="checkbox" name="hobby" id="1"/>篮球  
        <input type="checkbox" name="hobby" id="2"/>足球  
        <input type="checkbox" name="hobby" id="3"/>排球  
        <input type="checkbox" name="hobby" id="4"/>羽毛球<br />  
          
        <select id="sel">  
            <option value="1">人事</option>  
            <option value="2">IT</option>  
            <option value="3">后勤</option><br />  
              
              
        </select><br />  
          
          
        <button>提交</button>  
          
          
        </form>  
        <button οnclick="show()">回显数据</button>  
          
                <script>  
          
                    function ss()\{  
                        //获取表单的值  
                        var username=document.getElementById("username").value;  
                        var pwd=document.getElementById("pwd").value;  
                          
                        var sexs=document.getElementsByName("sex");  
                        for (var i=0;i<sexs.length;i++) \{  
                            if(sexs\[i\].checked)\{  
                                sex=sexs\[i\].id;  
                                  
                            \}\}  
                           var hobby=""  
                            var hobbys=document.getElementsByName("hobby");  
                          for (var j=0;j<hobbys.length;j++) \{  
                              if(hobbys\[j\].checked)\{  
                                  hobby+=hobbys\[j\].id;  
                                    
                              \}  
                                
                          \}  
                          var sel=document.getElementById("sel").value;  
      
    //checked 属性规定在页面加载时应该被预先选定的 input 元素。  
  
//checked 属性适用于 <input type="checkbox"> 或 <input type="radio">。  
  
//如果使用该属性，则会预先选定该 input 元素。  
  
//checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。  
                              
                    
                        alert(username+"======="+pwd+"=="+sex+"===="+hobby+"=="+sel)  
                        return false;  
                    \}  
                     
                      
                </script>  
            
        </form>  
         
    </body>

</html>

注意：通过调用getElementsByName或者getElementsByID过程中（）内的元素必须加上双引号；

form表单中常用的html对象input text,password,radio,checkbox,submit；

获取单选值多选值for .if循环的逻辑问题。