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学习日记----表单提交方式的更多相关文章

  1. html表单提交方式

    xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...

  2. form表单提交方式

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交 ...

  3. php开发面试题---2、php常用面试题二(表单提交方式中的get和post有什么区别)

    php开发面试题---2.php常用面试题二(表单提交方式中的get和post有什么区别) 一.总结 一句话总结: 数据位置:get参数在url里面,post在主体里面 数据大小:get几kb,pos ...

  4. nodejs学习之表单提交(1)

    nodejs作为一门后端语言,接触的最多的是它的框架,但是它本身的api我觉得更是非学不可,所有才有了这篇文章 表单提交是最基本的也是最实用的入门实例 HTML: <!DOCTYPE html& ...

  5. ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

    最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...

  6. jQuery最简单的表单提交方式

    第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selecto ...

  7. 学习java前端 两种form表单提交方式

    第一种:原生方式 注意点:button标签的style为submit <form action="/trans/doTrans.do" method="post&q ...

  8. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  9. MCV 的几种表单提交方式

    一,MVC  HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){}   其中actionName ...

随机推荐

  1. Entity Framework 自动生成代码 如何用继承

    分部类 用接口

  2. Windows 10 IoT Core 17115 for Insider 版本更新

    今天,微软发布了Windows 10 IoT Core 17115 for Insider 版本更新,本次更新只修正了一些Bug,没有发布新的特性. 一些已知的问题如下: F5 driver depl ...

  3. 53_并发编程-线程-GIL锁

    一.GIL - 全局解释器锁   有了GIL的存在,同一时刻同一进程中只有一个线程被执行:由于线程不能使用cpu多核,可以开多个进程实现线程的并发,因为每个进程都会含有一个线程,每个进程都有自己的GI ...

  4. Java集合排序(面试必考点之一)

    集合是Java面试必考知识点,而集合的排序也是非常重要的,工作中经常用到,那么这个知识点也是必须要掌握的,下面是我曾经面试时被面试官问的问题: 根据API可知,Java集合的工具类Collection ...

  5. OpenProject 分类专栏说明

    OpenProject 顾名思义 开源项目. 一.为何创建 OpenProject 专栏 主要是因为GitHub上收藏的项目越来越多,想在GitHub上查找一些收藏的内容,开始变得比较费时,为了简化搜 ...

  6. JDK 在 Linux 上安装的详细过程

    1.下载JDK Linux上一般会安装Open JDK,如果有系统预装了OpenJDK的话需要先卸载掉OpenJDK, 卸载过程可以参考这里:https://www.cnblogs.com/sxdcg ...

  7. Handshake failed due to invalid Upgrade header: null 解决方案

    Handshake failed due to invalid Upgrade header: null 解决方案 解决方案,在 Nginx ,location 中添加以下代码: proxy_set_ ...

  8. git gc和fsck的用法

    一.保证git良好的性能 在大的仓库中, git靠压缩历史信息来节约磁盘和内存空间. 压缩操作并不是自动进行的, 你需要手动执行 git gc: $ git gc 压缩操作比较耗时, 你运行git g ...

  9. Docker - 参考信息

    初见 从 0 开始了解 Docker 可能是把Docker的概念讲的最清楚的一篇文章 Docker新手指南 8 个基本的 Docker 容器管理命令 Docker 核心技术与实现原理 在线教程 Doc ...

  10. eos开发(二)使用cleos命令行客户端操作EOS(钱包wallet基础操作)

    不知道下边这一段英文你们是不是能看懂,如果看不懂那就算了,我就是转过来随便看看的. 总之你记住nodeos.cleos和keosd这三个工程十分重要就行了,回头咱们的研究都从这三个工程杀进去. EOS ...