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 ...
随机推荐
- Android-获取Html元素
第一步导包: implementation 'org.jsoup:jsoup:1.10.3' 第二步:需获取解析的Html: <p> <myfont style="colo ...
- IM系统的MQ消息中间件选型：Kafka还是RabbitMQ？
1.前言 在IM这种讲究高并发.高消息吞吐的互联网场景下,MQ消息中间件是个很重要的基础设施,它在IM系统的服务端架构中担当消息中转.消息削峰.消息交换异步化等等角色,当然MQ消息中间件的作用远不止于 ...
- Javascript高级编程学习笔记（68）—— 事件（12）设备事件
设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介 ...
- 吴恩达机器学习笔记8-多变量线性回归(Linear Regression with Multiple Variables)--多维特征
我们探讨了单变量/特征的回归模型,现在我们对房价模型增加更多的特征,例如房间数楼层等,构成一个含有多个变量的模型,模型中的特征为(
- fescar分布式事务（概览）
1. fescar分布式事务(概览) 1.1. 概述 Fescar 是 阿里巴巴 开源的 分布式事务中间件,以 高效 并且对业务0 侵入 的方式,解决 微服务 场景下面临的分布式事务问题. 1.2 ...
- gcc编译参数详解一（-ffunction-sections -fdata-sections）
背景 有时我们的程序会定义一些暂时使用不上的功能和函数,虽然我们不使用这些功能和函数,但它们往往会浪费我们的ROM和RAM的空间.这在使用静态库时,体现的更为严重.有时,我们只使用了静态库仅有的几个功 ...
- IdentityServer4源码颁发token分析及性能优化
IdentityServer4源码地址 IdentityModel源码地址 以下的流程用ResourceOwnerPassword类型获取token作为介绍 分两种获取形式说明 token请求地址为默 ...
- ASP.NET Core微服务+Tabler前端框架搭建个人博客2--系统架构
功能分析 在整个微服务架构的搭建过程中,我们需要做的第一步就是对服务进行拆分,将一个完整的系统模块化,通过对各个模块互联,共同完成一个系统的工作.既然要做到模块化,那么必须明白你的系统的需求到底是什么 ...
- 一道关于：ArrayList、Vector、LinkedList的存储性能和特性 的面试题
ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存操作,所以索引数据快插入数据慢 ...
- Vue-router导航问题
现在的项目,用的是Vue,但当时用的时候,是边学边做的,上手确实比较简单,但是已经用Vue写了一个项目了,但是感觉对Vue的还是不是很深刻,用的都是比较简单的API, 现在回头看看,有些东西,非常的精 ...