JavaWeb学习日记----表单提交方式
1.表单提交方式
(1) 使用input控件中的submit提交
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="get">
用户：<input type="text" name="user" id="user"/><br/>
密码：<input type="password" name="password" id="password"/><br/>
<input type="submit"/>
<input type="reset"/>
</form>
</body>
</html>
结果：
上图是通过get方法使用input控件中的submit的表单提交方式
(2)使用button提交表单
步骤：
通过ID获取form标签
设置action(要提交的页面)
调用submit()方法提交form表单
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function submit1(){
var myForm = document.getElementById('myform');//获取到form
myForm.action='#';
myForm.method='get';
myForm.submit();
}
</script>
</head>
<body>
<form action="#" method="get" id="myform">
用户：<input type="text" name="user" id="user"/><br/>
密码：<input type="password" name="password" id="password"/><br/>
<input type="button" value="我是提交按钮" onclick="submit1();"/>
<input type="reset"/>
</form>
</body>
</html>
结果：
如上所示,在button中添加鼠标点击事件，通过JavaScript中获得form对象，调用submit()方法实现表单的提交
(3)使用超链接提交
格式： <a href='' 要提交的页面 ？ 参数的键值对''><a/>
<a href="# ? user=admin,password=admin">点我提交</a>
结果：
补充知识点：
以后的学习中可能会遇到的事件：
onfocus:得到焦点
onblur:失去焦点
通过上面两个事件可以实现文本框内默认文本不消失的效果
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function getmouse(){
var username = document.getElementById('user');
username.value="";
}
function losemouse() {
var username= document.getElementById('user');
username.value='请输入用户名';
}
</script>
</head>
<body>
<form action="#" method="get" id="myform">
用户：<input type="text" name="user" id="user" value="请输入用户名" onfocus="getmouse();" onblur="losemouse();"/><br/>
密码：<input type="password" name="password" id="password" /><br/>
<input type="button" value="我是提交按钮" onclick="submit1();"/>
<input type="reset"/>
</form>
</body>
</html>
当用户名输入框未获得焦点(鼠标）时,文本框默认显示"请输入用户名"
当输入框获得焦点时，文本框显示如下
当输入框再次失去焦点时，又会显示默认文本：
日期：2019-04-04
时间：22:24:36
以上就是JavaWeb学习日记第一天内容.
JavaWeb学习日记----表单提交方式的更多相关文章
- html表单提交方式
xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...
- form表单提交方式
form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交 ...
- php开发面试题---2、php常用面试题二（表单提交方式中的get和post有什么区别）
php开发面试题---2.php常用面试题二(表单提交方式中的get和post有什么区别) 一.总结 一句话总结: 数据位置:get参数在url里面,post在主体里面 数据大小:get几kb,pos ...
- nodejs学习之表单提交(1)
nodejs作为一门后端语言,接触的最多的是它的框架,但是它本身的api我觉得更是非学不可,所有才有了这篇文章 表单提交是最基本的也是最实用的入门实例 HTML: <!DOCTYPE html& ...
- ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传
最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...
- jQuery最简单的表单提交方式
第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selecto ...
- 学习java前端 两种form表单提交方式
第一种:原生方式 注意点:button标签的style为submit <form action="/trans/doTrans.do" method="post&q ...
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- MCV 的几种表单提交方式
一,MVC HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} 其中actionName ...
随机推荐
- 【转载】ARCHIVE_LAG_TARGET参数的作用（定时切换redo）
(一) 设置archive_lag_target参数1. 一旦设置了archive_lag_target初始化参数,数据库将会周期性的检查实例的当前重做日志.如果遇到下列情况,实例将会切换 ...
- Java并发编程实战
代码中比较容易出现bug的场景: 不一致的同步,直接调用Thread.run,未被释放的锁,空的同步块,双重检查加锁,在构造函数中启动一个线程,notify或notifyAll通知错误,Object. ...
- JavaScript中常见的10个BUG及其修复方法
如今网站几乎100%使用JavaScript.JavaScript看上去是一门十分简单的语言,然而事实并不如此.它有很多容易被弄错的细节,一不注意就导致BUG. 1. 错误的对this进行引用 在闭包 ...
- 微信自用高性能通用key-value组件MMKV已开源！
1.MMKV简介 腾讯微信团队于2018年9月底宣布开源 MMKV ,这是基于 mmap 内存映射的 key-value 组件,底层序列化/反序列化使用 protobuf 实现,主打高性能和稳定性.近 ...
- Apache Lucene全局搜索引擎入门教程
Lucene简介 Lucent:Apache软件基金会Jakarta项目组的一个子项目,Lucene提供了一个简单却强大的应用程式接口,能够做全文索引和搜寻.在Java开发环境里Lucene是一个成熟 ...
- DFA算法实现关键字查找（正则原理入门）
前言:一直都这样认为“正则表达式是一个很有用的技能”,从一开始的磕磕绊绊的使用和摸索,到后来可以得心应手,这个过程离不来平时的不断学习和思考
- Java核心技术及面试指南 线性表方面的面试题总结以及答案
3.2.7.1 请用ArrayList实现Stack以及Queue的功能. public class ArrayListStack extends ArrayList implements Stack ...
- Kubernetes 基于 Metrics Server 与 HPA 的使用
在 Kubernetes 中可以手动通过 kubectl scale 命令或通过修改 replicas 数量,可以实现 Pod 的扩容或缩容.Kubernetes 中还提供了 HPA(Horizont ...
- python 分享一个通过 (key1.key2.key3) 形式获取嵌套字典值的方法
最近在做接口自动化测试,响应的内容大多数是多层嵌套的json数据,如果一层层的去剥,效率不高,脚本繁重,所以写了一个可以通过(key1.key2.key3)形式获取嵌套字典值的方法,如有不对或者需要优 ...
- solr(五): centos中, 整合 tomcat&solr
前言 虽然windows下, tomcat和solr整合起来灰常的方便, 但是, 一般像这种东西, 都很少部署在windows中, 更多的是部署到linux中去. 其实, 步骤是一样的, 这里, 我在 ...