当前位置：首页 > article >正文

HTML之JavaScript Form表单事件

article 2025/2/23 23:20:48

HTML之JavaScript Form表单事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function onSubmitEvent(event) {
            /*
                弹窗的三种方式：
                    alert() 信息提示框
                    prompt()信息输入框
                    confirm()信息确认框
            */
            var flag = confirm("1121")
            return flag;
            // event.preventDefault();
        }
        function aa() {
            console.log('触发重置') 
        }
        function focus1() {
            console.log("获得焦点")
        }
        function blur1() {
            console.log("失去焦点")
        }
        function change(value) {
            console.log("内容改变为：" + value)
        }

    </script>
</head>

<body>
    <form action="js中使用JSON.html" onsubmit="return onSubmitEvent(event)" onreset="aa()" method="post"> <!--onsubmit表示提交事件，由按钮type为submit触发；onreset为重置表单事件，由按钮type为reset触发-->
        111：<input type="text" name="111" onfocus="focus1()" onblur="blur1()" onchange="change(this.value)" />
        <select name="122">
            <option value="1">qq</option>
        </select>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>

</html>