HTML,JS中form表中内容获取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js操做form表单</title>
    </head>
    <body>
        <form action="" method="post" onsubmit="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 onclick="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>html

注意:经过调用getElementsByName或者getElementsByID过程当中()内的元素必须加上双引号;post

          form表单中经常使用的html对象input text,password,radio,checkbox,submit;orm

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