java web 表单提交_JavaWeb学习日记----表单提交方式

客官°小女子只卖身不卖艺 2022-11-02 11:56 325阅读 0赞

1.表单提交方式

(1) 使用input控件中的submit提交

代码如下：

Title用户：  
密码：

结果：

![b7adcc2965a8bbbfc71ccb4e4d444357.png][]

上图是通过get方法使用input控件中的submit的表单提交方式

(2)使用button提交表单

步骤：

通过ID获取form标签

设置action(要提交的页面)

调用submit()方法提交form表单

代码如下：

Title

functionsubmit1()\{

varmyForm =document.getElementById('myform');//获取到form

myForm.action='\#';

myForm.method='get';

myForm.submit();

\}

用户：  
密码：

结果：

![592e711b53edc685fbc4ba518ae8b87b.png][]

如上所示,在button中添加鼠标点击事件，通过JavaScript中获得form对象，调用submit()方法实现表单的提交

(3)使用超链接提交

格式：

点我提交

结果：

![08cf6154030a65b7c08089129fd96163.png][]

补充知识点：

以后的学习中可能会遇到的事件：

onfocus:得到焦点

onblur:失去焦点

通过上面两个事件可以实现文本框内默认文本不消失的效果

示例：

Title

functiongetmouse()\{

varusername =document.getElementById('user');

username.value="";

\}

functionlosemouse() \{

varusername=document.getElementById('user');

username.value='请输入用户名';

\}

用户：  
密码：

当用户名输入框未获得焦点(鼠标)时,文本框默认显示"请输入用户名"

![020f5a9185dd1ad29b4c9ecbe74a5228.png][]

当输入框获得焦点时，文本框显示如下

![3cc739446123f2300bfd9c19d2911250.png][]

当输入框再次失去焦点时，又会显示默认文本：

![09c9ded20f5e9666de0ab5c27724d2ee.png][]

日期：2019-04-04

时间：22:24:36

以上就是JavaWeb学习日记第一天内容.

[b7adcc2965a8bbbfc71ccb4e4d444357.png]: /images/20221024/62318129dedc47f8849ff1b0dae0a26f.png
[592e711b53edc685fbc4ba518ae8b87b.png]: /images/20221024/5dd38942136547f3a97b64b6d67ca60d.png
[08cf6154030a65b7c08089129fd96163.png]: /images/20221024/30a9230bee514de6a034e1a8b93e314a.png
[020f5a9185dd1ad29b4c9ecbe74a5228.png]: /images/20221024/5175147818934eaf9831a8ff0ea3e3e0.png
[3cc739446123f2300bfd9c19d2911250.png]: /images/20221024/01813a52d2054c7fb2beb84be4e7a981.png
[09c9ded20f5e9666de0ab5c27724d2ee.png]: /images/20221024/d3877406ad3f4e1f95dc53bf3d743e92.png

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 java web 表单提交_JavaWeb学习日记----表单提交方式

1.表单提交方式 (1) 使用input控件中的submit提交代码如下： Title用户：密码：结果： ![b7adcc2965a8bbbfc71ccb4

客官°小女子只卖身不卖艺/ 2022年11月02日 11:56/ 0 赞/ 326 阅读

相关 html禁止form表单提交表单提交,onsubmit阻止表单提交

在实际开发中往往会遇到检查表单数据的合法性，如果数据不合法，就不让其提交。 Bootstrap 实例 - 提交表单验证 //---> function checksubm

骑猪看日落/ 2022年10月07日 11:57/ 0 赞/ 448 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

深藏阁楼爱情的钟/ 2022年07月15日 01:42/ 0 赞/ 376 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

谁借莪１个温暖的怀抱￠/ 2022年07月15日 01:42/ 0 赞/ 395 阅读

相关表单重复提交

一、阻止表单重复提交在表单提交页面写上<s:token/> <s:form action="add" method="post"> <s:token />

小鱼儿/ 2022年06月13日 14:23/ 0 赞/ 320 阅读

相关 JavaScript.表单提交方式

表单提交方式 \使用submit提交 <form> ….. <input type=”submit” /> </form> \使用button提交表单

ゝ一纸荒年。/ 2022年06月04日 04:41/ 0 赞/ 252 阅读

相关 java web 表单的重复提交

表单的重复提交 1). 重复提交的情况: ①. 在表单提交到一个 Servlet, 而 Servlet 又通过请求转发的方式响应一个 JSP(HTML) 页面,

港控/mmm°/ 2022年05月26日 00:58/ 0 赞/ 159 阅读

相关 form表单提交方式

form表单提交方式无刷新页面提交表单表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe

ゞ浴缸里的玫瑰/ 2022年05月25日 08:52/ 0 赞/ 290 阅读

相关表单重复提交

防止表单重复提交的原理表单应由一个程序产生，程序在产生表单时： \- 生成一个随机值，并附在表单的一个隐藏输入项中。把随机值存储在session域中。 \

傷城~/ 2022年05月15日 03:52/ 0 赞/ 329 阅读

相关表单提交

form表单提交可以使用以下两种方式 1. input <input class="btn btn-main" type="submit" placeholder

太过爱你忘了你带给我的痛/ 2021年09月28日 22:34/ 0 赞/ 568 阅读