JavaScript处理表单事件以及获取表单属性值

html代码：

<div id="one">
            <form align="center" id="form_one" class="two">
                用户名:<input type="text" size="10" placeholder="输入用户名" id="name"><p>
                密码：<input type="password" size="10" placeholder="输入密码" id="passd"><p>
                性别：<input type="radio" id="boy" name="sex" value="男">男&nbsp;&nbsp;
                    <input type="radio" id="girl" name="sex" value="女">女<p>
                所在省份：<select id="province">
                            <option>北京</option><option>上海</option><option>四川省 
                            </option>
                            <option>陕西省</option><option>云南省</option><option>贵州省 
                            </option>
                            <option>黑龙江省</option><option>吉林省</option>
                        </select><p>
                <input type="submit" id="btn" onclick="fn()">
            </form>
        </div>

css代码：

        div{
                width: 200;
                height: 180;
                background-color: aqua;
                margin: 0 auto;
                margin-top: 15%;
                opacity: 0.5;
                
            }
        .two{
                border-color: black;
            }

JavaScript代码：

<script>
        function fn() {
        var form1 = document.getElementById("form_one")
        var username = form1.name.value;
        var password = form1.passd.value;
        //获取单选按钮的值
        var sex = null;
        //使用对象存储单选按钮中的值
        var obj = document.getElementsByName("sex")
        // 循环遍历对象中的值
        for(i = 0 ; i < obj.length ; i++){
            if(obj[i].checked){         //checked属性表示该值被选中
                sex = obj[i].value;
            }
        }
        var home = form1.province.value;
        if(username == "" || password == ""){
            alert("用户名或密码不能为空！！！")
        }else{
            document.write("用户名为："+username+"&nbsp;&nbsp;"+"密码为："+password+"<p>"+
            "性别："+sex+"&nbsp;&nbsp;"+"居住省份："+home)
        }
        }
        //设置鼠标事件
        var div_one = document.getElementById("one")
        div_one.onmouseover = function(){
            div_one.style.backgroundColor="lightblue"
        }
        div_one.onmouseout = function(){
            div_one.style.backgroundColor="aqua"
        }
        //设置获取焦点事件
        var name_text = document.getElementById("name")
        name_text.onfocus = function(){
            name_text.style.borderColor="blue"
        }
        
        var password_text = document.getElementById("passd")
        password_text.onfocus = function(){
            password_text.style.borderColor="blue"
        }
    </script>

通过ID找到表单，用变量form1存储。通过form1去获取表单中属性的值（form1.name.value---获取用户输入的用户名信息；form1.passd.value---获取输入密码的值；form1.province.value---获取下拉列表属性的值）

var form1 = document.getElementById("form_one")
var username = form1.name.value;
var password = form1.passd.value;
var home = form1.province.value;

注意获取单选按钮的值：

使用value获取单选按钮的值时默认值是：on,此时需要为每个单选按钮这只value的属性值使用对象存储按钮的值：

//获取单选按钮的值
  var sex = null;
//使用对象存储单选按钮中的值
  var obj = document.getElementsByName("sex")

使用循环去遍历对象中的值（使用checked表示被选中并获取选中属性的值赋值给sex）：

for(i = 0 ; i < obj.length ; i++){
       if(obj[i].checked){         //checked属性表示该值被选中
             sex = obj[i].value;
            }
        }

输出结果：

if(username == "" || password == ""){
        alert("用户名或密码不能为空！！！")
    }else{
        document.write("用户名为："+username+"&nbsp;&nbsp;"+"密码为："+password+"<p>"+
        "性别："+sex+"&nbsp;&nbsp;"+"居住省份："+home)
    }

事件处理：

onmouseover:鼠标移动至标签时的效果（改变背景色为：lightblue）

onmouseout:鼠标移出时的效果

var div_one = document.getElementById("one")
div_one.onmouseover = function(){
div_one.style.backgroundColor="lightblue"
     }
div_one.onmouseout = function(){
        div_one.style.backgroundColor="aqua"
     }

效果图：

获取数据效果图：