表单事件就是在表单操作时发生的事件。例如，表单输入前的双击操作，表单提交时密码和确认密码的确认操作等。

表单是一个容器对象，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理。它的应用范围非常广泛，不仅可用于收集信息和反馈意见，还可用于资料检索、网上购物等交互式场景。

表单对象是表单中所包含的用于不同目的的控件，比如文本框、密码框、按钮、复选框等。
# 8.7.1  表单和表单对象
1. 定义表单

我们使用<form>标签定义表单，语法如下。
```    
<form id="formid" name="myForm" method="post"     action="check.php">
   …
</form>
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/cfdec50d18d62fcf0947d0a5b244bd3e.image.webp)
2. 文本框
    
文本框是用于输入单行文本的表单控件，通常用来填写用户名以及简单的回答。使用<input>标签定义单行文本框，实现如下。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/95b6ecc041813ede5ca3865e5178b42c.image.webp)
    
3. 单选按钮
单选按钮是用于从多个项目中选一个项目的表单控件，将<input>标签的type属性设置为radio即可定义单选按钮。语法如下。
 ```   
<input type="radio" value="female" name="gender" checked>女
<input type="radio" value="male" name="gender">男
 ```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e5639aa28137feb7107ce9816735dd89.image.webp)
4. 复选框
    
复选框是用于选择或取消某个项目的表单控件，将<input>标签的type属性设置为checkbox即可定义复选框。语法如下。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/20df4e360fe68344d896168dfb229a81.image.webp)
5. 列表或菜单
    
列表或菜单是用于从多个项目中选择某个项目的表单控件，使用select标签定义列表或菜单。语法如下。
    
    
```
<select name="name" size="3" multiple> 
    <option value="beijing" selected>北京</option>
   <option value="tianjin">天津</option>
   <option value="shanghai" selected>上海</option>
</select>
```
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3e1b168741d82ef30dc4c1ba605e772f.image.webp)
    
6. 按钮
    
HTML支持3种类型的按钮，即普通按钮、提交按钮和重置按钮。单击普通按钮实现某些操作，比如弹出提示、得到信息等；单击提交按钮，能够将表单中的数据提交到服务器；单击重置按钮，能够将表单中所有控件的值设置为初始值。使用input标签定义按钮，通过type属性指定按钮的类型，其中type="button"表示定义普通按钮，type="submit"表示定义提交按钮，type="reset"表示定义重置按钮，语法如下。
    
```
<input type="button" value="问好" name="hello" />
<input type="submit" name="submit" />
<input type="reset" name="reset" />
```
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/56c1d0876977538e50137fad4bb393f8.image.webp)

    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7e990f9b4cce7a693613280cf7509515.image.webp)
  
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ae129ae47dfbda98be0786755e9adc34.image.webp)
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d9d8febb9463d39074d744b381aaf66f.image.webp)
    
  课堂作业：  
根据所学内容，完成如下练习 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/51b6697760b45861af7497931259ba11.image.webp)

效果图如下
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/05b92758ab69834ec3c05f04e0838e28.image.webp)
    通过极域电子教室提交，姓名.html或姓名.txt
# 8.7.2  访问表单和表单元素
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1d66bf15633be354046cfce7027f81ed.image.webp)
```
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机生成指定位数的验证码——访问表单元素</title>
</head>

<body>
    <form name="myform">
        请输入要产生的验证码的位数：
        <input type="text" name="num" id="num">
        <br><br>
        <input type="button" value="生成" id="generate"> &nbsp;&nbsp;
        <input type="button" value="刷新" id="refresh">
        <br><br>
        <div id="result"></div>
    </form>
    <script type="text/javascript">
        var num = document.getElementById("num");
        var result = document.getElementById("result");
        var generate = document.querySelector("#generate");
        var refresh = document.querySelector("#refresh");
        function rad(num) //生成随机数
        {
            var result = "";
            for (i = 0; i < parseInt(num); i++) {
                result = result + (parseInt(Math.random() * 10)).toString();
            }
            return result;
        }
        generate.onclick = function () { //显示
            if (check(num.value))
                result.innerHTML = "产生的验证码是： " + rad(num.value);
            else
                result.innerHTML = "重新输入合法的数字";
        }
        refresh.onclick = function () { //清空
            num.value = "";
        }
        function check(num) //判断是不是数字
        {
            if (isNaN(num)) {
                alert("您输入的是非数字，请输入数字");
                return false;
            }
            if (num < 0) {
                alert("您输入的数字要求大于等于0，请重新输入");
                return false;
            }
            return true;
        }
    </script>
</body>

</html>    
```
1. 通过表单的ID来访问表单
    
首先，我们需要给表单或者表单元素定义id属性，然后使用document. getElementById()方法获取对应的DOM对象，语法如下。
    
2. 通过表单名称来访问表单
    
首先，我们需要给表单或者表单元素定义name属性，然后使用document. getElementsBy Name()方法获取对应的DOM对象，语法如下。
    
3. 通过表单标签名来访问表单
    
在这里，我们不需要定义任何属性，而是直接使用document.getElementsByTagName()方法来获取对应的DOM对象，语法如下。

# 8.7.3  操作表单对象
1. 禁用和启用表单对象
    
表单对象的disabled属性，如果设置为true，代表禁用这个表单对象；设置为false，将启用这个表单对象。具体应用如【例8-8】所示。
    
当我们单击“禁用”按钮时，文本框中的文字变成灰色，即禁用状态，如图8-36所示；当我们单击“启用”按钮时，文本框的文字变成黑色，即可以使用的状态，如图8-37所示。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/82ee33b156d6ae96610cac0ddcd47577.image.webp)

 2. 表单对象获得和失去焦点
    
当我们的页面上有多个文本框时，我们需要在某个文本框上双击，这个文本框就获得了焦点，可以使用表单对象的focus()方法实现同样的效果。同样如果想让某个表单对象失去焦点，那么可以使用blur()方法实现。具体应用如【例8-9】所示。
当我们单击“获得焦点”按钮时，文本框中的文字呈现闪烁状态，如图8-38所示；当我们单击“失去焦点”按钮时，文本框的文字不再闪烁，如图8-39所示。

3. 提交表单

 提交表单是指将用户在表单中填写或选择的内容传送给服务器端的特定程序（由action属性指定），然后由该程序进行具体的处理。将表单数据提交给服务器端的方法有两种。
    
单击表单中的“提交”按钮；第二种方法是调用表单对象的submit()方法。这两种方法基本相同，不同之处在于第一种方法执行事件处理函数onsubmit，并且可能阻止表单提交；
将数据直接提交给服务器。在这里我们使用第一种方法介绍表单的提交，语法如下。


    
4. 重置表单
重置表单是指对用户在表单中填写或选择的内容进行重新设置，要调用表单的reset()方法，语法如下。
 ```   
 myform.reset();
 ```
5. 表单验证
    
     表单验证是指在用户提交表单之前，需要对用户输入的数据进行有效性验证，如果满足有效性要求，则提交表单。例如，在表单注册页面，验证用户输入的身份证号码是否正确、年龄是否符合要求等。
    
     验证表单分为服务器端表单验证和客户端表单验证。
服务器端的表单验证是指在服务器端接收到用户提交数据后进行验证工作
客户端表单验证是指在向服务器端提交表单数据之前进行表单验证工作。使用JavaScript实现客户端验证，可以防止无效数据传送到服务器，减轻服务器的数据处理负担，从而提高系统性能。
    
在表单的onsubmit事件处理函数中进行表单验证，语法如下。



onsubmit事件会在单击表单中的确认按钮时发生。验证函数根据表单对象的值返回true或false，若返回true则表单被提交，否则表单不被提交。
```    
<form name="myform" id="myform" method="post" action="服务器端脚本" onsubmit="return 验证函数">
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d1aacf857c94f3bba89fdb555db4d098.image.webp)

```
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>验证表单合法性——表单验证</title>
</head>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>验证表单文本框提交内容的合法性示例</title>
    <script type="text/javascript">
        function checkFields()//是否为空
        {
            if (fm.txtUserName.value == "") {
                alert("用户名不能为空");
                fm.txtUserName.focus();
                return false;
            }
            if (fm.txtPwd.value == "") {
                alert("密码不能为空");
                fm.txtPwd.focus();
                return false;
            }
            return true;
        }
        function formReset() {
            document.getElementByid("myform").reset();
        }
    </script>
</head>

<body>
    <form name="fm" id="myform" method="get" action="login.php" onsubmit="return
checkFields()" onreset="formReset()">
        <p align="center">用户名：
            <input type="text" name="txtUserName" size="20">
        </p>
        <p align="center">密码：
            <input type="password" name="txtPwd" size="20">
        </p>
        <p align="center"">
<input type=" submit" value="登录">
            <input type="reset" value="重置">
        </p>
    </form>
</body>

</html>
```
## 课堂练习
根据课堂所学内容，实现一个用户登录界面，要求如下：
                                          
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a49e6b408605ac3ff7528882fff93429.image.webp)

1.假设账户为“abcdef”,密码为“123456”
                                          
2.要求输入2次密码，且2次密码都一致
                                          
3.进入到页面时会显示一个4次验证码，验证码可以按“刷新”按钮重新生成
                                          
4.账号、密码、验证码全部符合，显示登录成功！否则显示失败
                                          
5.给出具体失败信息，比如“用户名不能为空”，“用户名错误”，“两次密码不一致”，等，并给出对应的聚焦
         
                                          
```
                                          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-align: center;
        }
    </style>
</head>
<body >
    <form action="" name="form" id="form" >
        <p>用户名：<input type="text" name="username" id="username"></p>
        <p>密码：<input type="password" name="password1" id="password1"></p>
        <p>确认密码：<input type="password" name="password2" id="password2"></p>
        <p>验证码：<input type="text" name="valid" id="valid">
            <input type="button" value="刷新" onclick="valid()">
        </p>
        <p>
            <input type="button" value="登录" onclick="checkFields()">
            <input type="reset" value="重置">
        </p>
        <p id="result"></p>
    </form>

    <script>
        var mes = "";
        var result = document.getElementById("result");
        function checkFields(){
            console.log("test1");
            if(form.username.value == ""){
                mes = "用户名不能为空！";
                form.username.focus();
            }
            else if (form.password1.value == ""){
                mes = "密码不能为空";
                form.password1.focus();
            }
            else if(form.username.value != "abcdef"){
                mes = "用户名错误！";
                form.username.focus();
            }
            else if(form.password1.value != "123456"){
                mes = "密码错误！";
                form.password1.focus();
            }
            else if(form.password1.value != form.password2.value){
                mes = "两次密码不一致！";
                form.password2.focus();
            }else
                mes = "恭喜你！登录成功！";
            result.innerHTML = mes;          
            
        }



        // function formReset(){
        //     document.getElementById("form").reset();
        // }

        // function rad(4){
        //     var result = "";
        //     for(i=0;i<parseInt(num);i++){
        //         result = result+(parseInt(Math.random()*10)).toString();
        //     }
        //     console.log("result",result);
        //     return result;
        // }

        // function check(4){
        //     if(isNaN(num)){
        //         alert("您输入的不是数字，请输入数字1");
        //         return false;
        //     }
        //     if(num<0){
        //         alert("您输入的数字小于0，请重新输入！");
        //         return false;
        //     }
        //     return true;
        // }

        // function valid(){
        //     if(check(num.value))
        //         result.innerHTML = "产生的验证码是："+rad(num.value);
        //     else
        //         result.innerHTML = "重新输入合法的数字！";
        // }

        
    </script>
</body>
</html>
```
课堂作业 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b6032a1448e3458667d1275cd2489aed.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b7e807e34adbd65146ad81ead572dda2.image.webp)

8.7 处理表单事件

JavaScript可以对页面内容（文本）进行复制、剪切、粘贴等编辑操作，可以通过JavaScript的相关操作事件完成此类操作。

JavaScript对文本的复制、剪切和粘贴操作提供了相应的绑定事件，具体事件如表8-9所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/22ada19294c6b69593bec2b7b2b739ec.image.webp)

```
<!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>
    <form action="" name="form1" >
        用户名：<input type="text" name="username" id="" size="20" value="请输入用户名"><br>
        密码：<input type="password" name="password" id="" size="20"><br>
        <input type="submit" value="提交">
    </form>
    <script>
        form1.username.oncopy = function(){
            alert("禁止复制！");
            return false;
        }
        form1.password.onpaste = function(){
            alert("禁止粘贴！");
            return false;
        }
    </script>
</body>
</html>
```

在上述代码中，用户名文本框绑定了oncopy事件驱动程序，密码文本框绑定了onpaste事件驱动程序，实现效果如图8-27和图8-28所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5d17d9cd85d56d3e426d620c3d3d4518.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f803d8df168e042b50dd27211b11c93f.image.webp)

8.6 处理文本编辑事件

页面事件是在页面加载或者改变浏览器大小、位置，以及对页面的滚动条进行操作时触发的事件。与页面相关的事件如表8-8所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d877a8413db059c86c6a33268559b4f0.image.webp)

加载（onload）事件在网页加载完成后触发相应的事件处理程序，它可以在页面加载完成后，对页面中的表格样式、字体、背景颜色进行设置。

1. body元素绑定onload事件

      body元素绑定onload事件后，当浏览器中当前HTML文档装载完成就会触发onload事件，页面中的脚本就可以访问页面中的任意元素。根据onload元素的这种特性，可以将需要在页面载入后立即执行的脚本放在onload事件处理函数中，脚本的执行不受onload事件处理函数的定义位置和访问的元素在页面中的先后顺序影响。
      
【例8-3】将onload事件绑定到<body>元素示例。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ca553f6eb81bfa82b815a46434b935dd.image.webp)
2. <window>元素绑定onload事件
可以绑定到<body>元素的一些页面事件（如onload、onunload、onresize和onerror等）也可以绑定到Window对象，效果基本相同，具体应用如【例8-4】所示。
【例8-4】onload事件绑定window元素示例。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/03e125a55a20a72eac6feb611f3b4759.image.webp)
    
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d89460d81cdf5b245cf6612cefcc1fdd.image.webp)
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5a264eb2423a4a3d1f4ebbd459b6e4b1.image.webp)

    
```
    <!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 blow(){
            var img = document.getElementById("img");
            img.width = img.width-100;
        }
    </script>
</head>
<body onload="blow()">
    <div ><img src="img/3.jpeg" alt=""></div>
</body>
</html>
```
在上述代码中，首先通过document.getElementById("img1")得到图片元素img1，然后对img1的width属性进行-100px处理，即缩小图片。最后通过绑定onload事件实现在加载时缩小图片。实现效果如图8-25所示。
    
页面大小（onresize）事件在用户改变浏览器大小时触发事件处理程序，主要用于固定浏览器的大小。
    

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/de7c2cbe5384411622b329ace95ff00b.image.webp)
    
```
    <!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>
    当改变浏览器大小时，弹出提示
    <script>
        function changeSize(){
            alert("你改变了浏览器大小!");
        }
        document.body.onresize = changeSize;
    </script>
</body>
</html>
```

8.5 处理页面事件

MindShow 是一个提供自动化幻灯片设计和内容整合服务的软件，它主要针对需要快速制作专业演示文稿的用户。通过AI生成大纲，mindshow可以快速生成ppt



![image-20240513102722713](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/image-20240513102722713.png)



## 操作过程

制作一份使用MindShow和ChatGPT自动生成PPT的攻略，可以分为以下几个步骤：

（1）准备阶段：

- 确定PPT的主题和内容框架。首先，需要明确演示文稿的目标和内容结构，这一步可以通过ChatGPT来辅助完成，比如生成内容大纲或提供主题建议。
- 收集相关资料和数据。根据确定的主题，收集必要的资料和数据，这些可以是文本、图片、图表等。

（2）使用MindShow制作PPT：

- 创建新的PPT项目。在MindShow中创建一个新的项目，并选择一个合适的模板。
- 添加幻灯片并编辑内容。将收集到的资料按照之前制定的大纲分布到各个幻灯片中。MindShow支持添加文本、图片、视频等多种媒体内容。
- 利用MindShow的自动设计功能。MindShow提供了自动优化幻灯片布局和设计的功能，可以智能调整文字和图片的排版，使得幻灯片更加美观和专业。

（3）利用ChatGPT优化内容：

- 文本内容的生成和校对。使用ChatGPT来生成或完善幻灯片中的文本内容，如引言、总结或详细解释等。
- 生成额外的内容建议。ChatGPT可以帮助你思考可能遗漏的点或者提供新的视角，增加PPT的深度和覆盖面。

（4）最终审查与调整：

- 审核整体设计和内容。仔细检查每一页的设计布局和文本内容，确保信息的准确性和表达的清晰性。
- 进行实际演练。在完成PPT后，进行一到两次的演示练习，以检查时间控制和内容的流畅性，确保正式演示时能够自如表达。

（5）导出与分享：

- 导出PPT。在MindShow中将你的演示文稿导出为PPT或PDF格式，以便于演示和分发。
- 分享和反馈。将你的PPT分享给同事或朋友，获取他们的反馈，以进一步优化和调整内容。

通过这个流程，你可以利用MindShow和ChatGPT的功能，高效且专业地制作出具有吸引力的PPT演示文稿。

## 个人使用情况

尝试过很多平台，综合比较之下这个好用一些，99元开了一年会员 。国外的更好用，但太贵了，大多1个月50元以上会员 

缺点：只能生成大概框架知识，具体内容还得仔细调整

如何利用AI自动生成ppt

如何利用draw.io自动绘图



draw.io绘图+ChatGPT生成绘图代码 

Draw.io可以由在线网站打开，https://app.diagrams.net/

1.Draw.io绘图工具介绍

Draw.io 是一款非常流行的在线绘图工具，且完全免费，支持多种图形元素的绘制和编辑。在软件开发过程中，流程图、UML 图等视觉工具扮演着非常重要的角色，它们可以帮助我们更好地理解和设计复杂的系统和逻辑，通过Draw.io可以方便地绘制出UML、工程图、商业图、流程图、映射图等图片，如图1所示。

![image-20240513093442028](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/image-20240513093442028.png)









可以和大模型结合，由大模型生成代码，人工修改代码或图形，高效画图。

draw.io支持mxGraph的标记语言（Markup Language），用于在draw.io中描述图形模型的结构和属性。mxGraphModel是draw.io内部使用的一种格式，用于保存和加载图形模型数据。

通用图码转换
功能启用

（1）目录 
点击 其他—编辑绘图

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/10f45164ba3c19377284ee99e04bf44d.image.webp)


（2）弹出代码框

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6609fdfad0bb79f5af2e29b7aef64e48.image.webp)


2.AI生成Meimaid代码 

通过ChatGPT等AIGC工具，“请帮我生成XX流程图的Meimaid代码”，将meimaid代码复制过去。

点击“确定”之后，便能生成可视化图像。也可以在生成的图像中进行修改、调整

流程图mermaid语言画图代码相对简单，大模型可以较好的生成。



但缺点也明显：代码生成的mxGraphModel画图代码Bug较多基本无法运行。需要熟悉一些Meimaid语句。常见bug，一是中文符号出错，二是style调整格式这个语句经常出错，可人工修改代码或图像