lovecoding
/
W250511


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inp1">
    <button id="btn">按钮</button>
    <select  id="school">
        <option value="heida">黑龙江大学</option>
        <option value="jiada">佳木斯大学</option>
        <option value="hgc">黑工程</option>
    </select>

    <input type="checkbox" id="ck1">
    <!-- label 标签  用于绑定表单元素  for属性用于绑定表单元素的id -->
    <label for="ck1">同意</label>

    <form action="xxx.php">
        <input type="text" name="username" placeholder="请输入用户名" value="xxx">
        <input type="range" max="100" min="0" value="10">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
    <script>
        var oInp = document.getElementById("inp1");
        var oBtn = document.getElementById("btn");
        var oSchool = document.getElementById("school");
        var oCk1 = document.getElementById("ck1");

        oBtn.onclick = function(){
            // 获取文本框中的内容
            // var val = oInp.value;
            // console.log(val);
            // 给文本框赋值
            // oInp.value = "123";
        }

        // 表单事件
        // 表单输入事件
        oInp.oninput = function(){
            console.log(this.value);
        }
        // 表单失去焦点事件
        oInp.onblur = function(){
            console.log("失去焦点");
        }
        // 表单获得焦点事件
        oInp.onfocus = function(){
            console.log("获得焦点");
        }

        // 下拉列表事件
        // 下拉列表改变事件
        oSchool.onchange = function(){
            console.log(this.value);
        }

        // 复选框事件
        // 复选框改变事件
        oCk1.onchange = function(){
            console.log(this.checked);
        }
    </script>
</body>
</html>