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. mysql5.6版本的优化

    1. 目标 l 了解什么是优化 l 掌握优化查询的方法 l 掌握优化数据库结构的方法 l 掌握优化MySQL服务器的方法 2. 什么是优化? l 合理安排资源.调整系统参数使MySQL运行更快.更节省 ...

  2. WordPress图片或文字添加水印插件:Easy Watermark

    Easy Watermark可以在上传到WordPress媒体库时自动为图像添加水印.您也可以手动为现有图像添加水印(一次全部或每个图像).水印可以是图像,文本或两者. 插件功能 图像水印可以是jpg ...

  3. Javascript高级编程学习笔记（48）—— HTML5

    HTML变动最大的版本应该就是HTML5了,这里就介绍一些 HTML5新增的DOM相关的API 与类相关的扩充 HTML4在普及后有一个十分重要的变化,即class属性使用的场景越来越多 所以HTML ...

  4. 最大黑区域-DFS

    最大黑区域 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Practic ...

  5. SQL参数放在where前后的区别

    本博客记录一个细节,在使用sql left join时候,参数放在left join后面当条件,还是放在where后的区别 给出两条SQL: tt.book_type = 'TIPS_TYPE',放在 ...

  6. fixed Oracle SQL报错 #ORA-01460: 转换请求无法实施或不合理

    最近遇到一个oracle错误,之前并没有遇到过,并不是select in超过1000个导致的,通过网上资料说是oracle版本导致,也有的说是oracle SQL过长导致. 然后通过自己实践应该说是o ...

  7. 《你不知道的JavaScript（上卷）》读书笔记

    第一次尝试用思维导图记笔记,感觉还不错~~~不过还是改不了我读书笔记写成抄书笔记的毛病 =.= 因为开始学JS的时候,一般浏览器就已经支持ES6了,所以比较喜欢使用ES6语法,let,=>等,文 ...

  8. odoo开发笔记 -- 应用服务器&数据库服务器分开部署

    app+db在一台服务器: odoo.conf配置文件: db_host = False db_maxconn = 64 db_name = False db_password = 123456db_ ...

  9. Java提高（5）---map集合排序

    map集合排序 这篇文章讲的不仅仅是map排序,比如把对象按某一属性排序,它都可以解决这些问题. 比如,有N个对象,每个对象有个属性就是成绩,成绩分:优秀,良好,合格.那我们如何按照成绩的好坏进行排序 ...

  10. redis 系列3 数据结构之简单动态字符串 SDS

    一.  SDS概述 Redis 没有直接使用C语言传统的字符串表示,而是自己构建了一种名为简单动态字符串(simple dynamic string, SDS)的抽象类型,并将SDS用作Redis的默 ...