HTML form表单提交方法案例详解

form表单提交方式总结一下:

一、利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                 }
                 return true;
         }
</script>
<form action="login.do?act=login" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>
           <input type=submit name="submit1" value="登陆" onclick="return check(this.form)">
</form>

二、利用button按钮实现提交,当点击button按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址,由于button按钮不具备自动提交的功能,所以由JavaScript实现提交。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="login.do?act=login" name="myform" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>
    <input type=button name="submit1" value="登陆" onclick="check(this.form)">
</form>

三、利用submit按钮实现提交,当点击submit按钮时,先触发onsubmit事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>
    <input type=submit name="submit1" value="登陆">
</form> 

以上就是form表单常用的三种提交方式,有不明白的地方,欢迎qq交流:317856821

到此这篇关于HTML form表单提交方法案例详解的文章就介绍到这了,更多相关HTML form表单提交内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

    本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作.分享给大家供大家参考,具体如下: FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"

  • transform实现HTML5 video标签视频比例拉伸实例详解

    曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video的显示区域拉伸,但是里面的视频还是保持原始比例,怎么调都没用: 因为当我横向拉伸时: 当我纵向拉伸时: 2016-09-21 11:15:40 更新: 感谢 @RileyRen 提醒,原来还有object-fit这一属性,把它设置为fill就满足需求了,泪奔~,这篇文章就当看个笑话吧,哎,不过可以看看我家喵星人的处

  • C#通过html调用WinForm的方法

    本文实例讲述了C#通过html调用WinForm的方法.分享给大家供大家参考,具体如下: 完整测试代码: Form1.cs: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace test { [Syst

  • html form表单基础入门案例讲解

    目录 一,表格标签 –1,概述 –2,总结 二,表单标签 –1,测试 –2,总结 –3,form提交数据 三,form表单的练习 四,CSS -1,概述 -2,语法 -3,入门案例 五,选择器 总结 一,表格标签 向网页中加入表格 –1,概述 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 表格标签</title> </head&g

  • PHP使用HTML5 FormData对象提交表单操作示例

    本文实例讲述了PHP使用HTML5 FormData对象提交表单操作.分享给大家供大家参考,具体如下: 这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的. 创建: 参数是一个form节点对象 var fm = document.getElementById('formid'); var fd = new FormData(fm); 优点: (1)在以往的ajax做post请求时,当提交的

  • Java Web使用Html5 FormData实现多文件上传功能

    前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法来实现多文件上传),又加上是在移动端做的,所以就打算采用html5的FormData实现多文件上传 首先html页面定义有两种: Html1 <form enctype="multipart/form-data" id="formfile"> <inp

  • HTML的form表单和django的form表单

    django的表单系统,分2种 基于django.forms.Form的所有表单类的父类 基于django.forms.ModelForm,可以和模型类绑定的Form 直接用原生的form表单,也可以直接用,较麻烦, django的form表单,也可用可不要, 在views里创建一个类,继承了forms.Form ,每个字段就是一个输入框, #----- #django 的form表单 from django import forms class MyForm(forms.Form): #for

  • Asp.net webForm设置允许表单提交Html的方法

    1.在表单需要提交Html的页面头部加入  ValidateRequest="false" <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" %> 2.webConfig 的  <system.web> 节点下配置 <httpRuntime requestValidationMode="2.0&qu

  • HTML form表单提交方法案例详解

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址. <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); for

  • vue 动态表单开发方法案例详解

    本文实例讲述了vue 动态表单开发方法.分享给大家供大家参考,具体如下: 概要 动态表单指的是我们的表单不是通过vue 组件一个个编写的,我们的表单是根据后端生成的vue模板,在前端通过vue构建出来的.主要的思路是,在后端生成vue的模板,前端通过ajax的方式加载后端的表单模板,权限数据和表单数据,在前端使用vue进行构建出来. 表单渲染过程. 实现步骤 1.在前端开发表单组件,比如用户组件,文本输入组件. 在平台中我们可以看到我们开发的组件. 组件的开发在第三篇有介绍. 我们定义的组件和后

  • JavaWeb实现表单提交的示例详解

    目录 register.html RegisterServlet.java 修改web.xml,添加如下code 重新配置服务器 先点击左侧图标 再点击Redeploy,重新部署Tomcat服务器 访问表单页面 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <ht

  • layui lay-verify form表单自定义验证规则详解

    官方文档详见:https://www.layui.com/doc/modules/form.html#verify 虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: <input type="text" lay-verify="digital" placeholder="请输入数字"> <button type="but

  • CodeIgniter表单验证方法实例详解

    本文实例讲述了CodeIgniter表单验证方法.分享给大家供大家参考,具体如下: 1.在D:\CodeIgniter\system\application\views目录下写一个视图文件myform.php <html> <head> <title>My Form</title> </head> <body> <?php echo $this->validation->error_string;?> <

  • javascript验证form表单数据的案例详解

    直接po截图和代码 下面是CheckFormDemo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证表单的案例</title> <link rel="stylesheet" type="text/css" href="../css/body.css" rel=&q

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

  • php实现跨域提交form表单的方法【2种方法】

    本文实例讲述了php实现跨域提交form表单的方法.分享给大家供大家参考,具体如下: 有时我们为了网站安全考虑,我们不允许直接跨域提交form表单数据,如果我们自己有这个需求呢?下面我们来介绍两种跨域的方法解决直接跨域问题. 下面我们来看看两种php跨域提交form的方法 一.通过php curl function curlPost($url,$params) { $postData = ''; foreach($params as $k => $v) { $postData .= $k . '

  • yii form 表单提交之前JS在提交按钮的验证方法

    很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证,我这边设置的方法是在提交按钮上设置监听器,如果部分内容为空(比如多选按钮没有选择),那么提示出错信息.主要目的是页面不用提交后刷新,进入controller的对应函数之后再判断出错.显示rules()验证规则函数的错误信息. 这里为了验证是否选择某个单选按钮,对提交的按钮onclick设置监听,具体如下 <Button onclick = "return fun()&qu

随机推荐