用html设计一个含有表单的页面，并在表单上放一个文本框，当鼠标在表单上移动时，把相对于表单的鼠标坐标的显示在文本框中

时间: 2024-02-25 09:56:32 浏览: 61

在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码

在一个网页表单(form)中，通常我们通过设置不同的提交按钮(submit或button)来实现将数据提交至不同的处理页面。然而，在某些特定情况下，我们可能需要仅使用一个提交按钮(submit或button)来将表单数据同时提交到两个不同的处理页面。这种方式在需要将相同的数据同步到不同系统或服务时特别有用。 ### 知识点一：HTML 表单（form）基础 1. **定义**： - `<form>` 是 HTML 中用于创建表单的元素，用于收集用户输入的信息。 2. **属性**： - `action`：规定当提交表单时数据发送到的服务器端脚本文件路径。 - `method`：规定提交表单时所使用的 HTTP 方法，如 `GET` 或 `POST`。 - `target`：规定提交表单后在哪个窗口或框架打开返回的文档。默认为 `_self`（即当前窗口）。 3. **子元素**： - `<input>`：用于创建文本框、复选框、单选按钮等。 - `<textarea>`：用于创建多行文本输入字段。 - `<select>`：用于创建下拉列表。 4. **提交按钮**： - `<input type="submit">`：提交表单的按钮。 - `<button type="submit">`：具有相同功能的按钮元素。 ### 知识点二：JavaScript 控制表单提交在提供的示例代码中，通过 JavaScript 来控制表单提交到不同的目标地址。这种方法的关键在于利用 JavaScript 动态改变表单的 `action` 和 `target` 属性，从而实现单个提交按钮控制表单数据提交到多个处理页面。 #### 示例代码分析 ```html <form onsubmit="aa(this);">  <input type="text" name="" value="test" />  <input type="submit" value="提交" />  </form> <iframe src="" name="fA" frameborder="1" scrolling="no"></iframe>  <iframe src="" name="fB" frameborder="1" scrolling="no"></iframe>  <script type="text/javascript"> function aa(oForm){ // 定义 aa 函数 oForm.action = "http://bbs.51js.com"; // 设置 action 地址 oForm.target = "fA"; // 设置 target 为 fA oForm.submit(); // 提交表单 oForm.action = "http://www.iecn.net/bbs/"; // 修改 action 地址 oForm.target = "fB"; // 修改 target 为 fB oForm.submit(); // 再次提交表单 return false; // 阻止表单默认提交行为 } </script> ``` #### 代码解释 1. **HTML 部分**： - `<form onsubmit="aa(this);">`：定义了一个表单，并在提交时触发 JavaScript 函数 `aa`。 - `<iframe>`：定义了两个用于接收提交结果的 iframe 框架。 2. **JavaScript 部分**： - `function aa(oForm)`：定义了函数 `aa`，接受一个参数 `oForm`，即表单对象。 - `oForm.action` 和 `oForm.target`：通过动态修改这两个属性，使得表单可以提交到不同的 URL，并且在不同的 iframe 中显示结果。 - `oForm.submit()`：提交表单。 - `return false`：阻止表单的默认提交行为，确保能够连续提交两次。 ### 总结通过上述分析，我们可以看到如何在一个表单中使用单个提交按钮将表单数据提交到两个不同的处理页面。这种方法虽然不常见，但在某些场景下非常实用，比如需要将用户提交的数据同时记录在两个不同的数据库或日志系统中时。需要注意的是，这种方法可能涉及到跨域问题，因此在实际应用时还需考虑安全性及兼容性等问题。

好的，以下是示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单页面</title> <script> function showCoords(event) { var x = event.clientX; var y = event.clientY; var coords = "X坐标: " + x + ", Y坐标: " + y; document.getElementById("coords").value = coords; } </script> </head> <body> <form onmousemove="showCoords(event)"> <label for="coords">鼠标坐标:</label> <input type="text" id="coords" name="coords" readonly> </form> </body> </html> ``` 这段代码创建了一个包含表单和文本框的页面。在表单上移动鼠标时，JavaScript函数`showCoords(event)`会被调用。该函数获取鼠标相对于文档的坐标，并将坐标信息显示在文本框中。注意，文本框是只读的，以防止用户手动输入数据。

阅读全文

用html设计一个含有表单的页面，并在表单上放一个文本框，当鼠标在表单上移动时，把相对于表单的鼠标坐标的显示在文本框中

相关推荐

HTML5实现又一个联系人表单文本框响应鼠标事件效果(无js).zip

JavaScript使表单中的内容显示在屏幕上的方法

2.设计一个含有表单的页面，并在表单上放一个文本框，当鼠 标在表单上移动时,把相对于表单的鼠标坐标的显示在文本框中。

表单提交后如何在同一个html页面上回显

ai用javaweb做一个html表单，实现对表单元素的操作或进行表单验证，鼠标移动图片会放大放小

django的form表单将上一个文本框中的数据显示在下一个文本框

在PHP 中的表单控件中，创建一个表单，包含文本框、密码框和 提交按钮。

在Visual FoxPro 6.0中如何设计一个用户友好的表单界面，并确保其与数据库紧密集成？

自己独立设计并实现一个接收客户端表单数据的Servlet，并从（作业一的）表单中接收文本框和密码框中的内容并显示在生成的网页上。

在JSP页面中放置一个文本框和一个的复选框如图1所示，表单处理页面通过EL获取表单信息。

怎么在html上加入一个可供输入的文本框

如何在Dreamweaver中设计一个包含文本框、密码框、单选按钮和复选框的表单，并确保其能够与数据库交互处理用户信息？

在Dreamweaver中如何设计一个包含文本框、密码框、单选按钮和复选框的表单，并确保其能够与数据库交互处理用户信息？

如何在Visual FoxPro 6.0中创建一个带有动态数据绑定的表单，并实现菜单导航？

创建一个JSP页面包含一个表单，表单包含用户名和密码两个文本框，点击提交按钮后请求提交到parameterServlet,在Servlet中接收Jsp中表单传来的数据，并把数据输出到网页上

制作一个页面页面上有两个文本框和提交按钮，在文本框中输入信息后，用鼠标单击提交按钮，将显示文本框中输入的内容

可以在表单中用div标签同时为多个文本框长度定义

添加表格内容用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示

在Adobe Acrobat中如何设计一个包含数字签名功能的安全PDF表单？请提供详细步骤和注意事项。

最新推荐

Servlet的5种方式实现表单提交（注册小功能），后台获取表单数据实例

Jquery中ajax提交表单几种方法(get、post两种方法)

vue实现form表单与table表格的数据关联功能示例

layui当点击文本框时弹出选择框,显示选择内容的例子

Tobit与Probit模型Stata实现代码-最新发布.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

2.设计一个含有表单的页面，并在表单上放一个文本框，当鼠标在表单上移动时,把相对于表单的鼠标坐标的显示在文本框中。

在PHP 中的表单控件中，创建一个表单，包含文本框、密码框和提交按钮。