HTML之JavaScript Form表单事件

HTML之JavaScript Form表单事件

html 复制代码
<!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>
相关推荐
旧味清欢|2 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾19 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin30 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox43 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员