表单的自定义按钮提交

最新推荐文章于 2024-05-16 01:51:20 发布

a_lonely_dancer

最新推荐文章于 2024-05-16 01:51:20 发布

阅读量6.5k

点赞数 1

分类专栏： HTML&JAVASCRIPT 文章标签：表单

本文链接：https://blog.csdn.net/a_lonely_dancer/article/details/52436997

版权

HTML&JAVASCRIPT 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

大家都知道了表单的自带submit按钮提交但是是否知道自定义按钮提交呢？还有超链接提交方式呢？？
下面我就为大家直接开撸：
1、表单提交方式
* 使用submit提交
<form>
    .....
    <input type="submit" />
</form>

* 使用button提交表单
    - 代码
    //实现提交方法
    function form1() {
        //获取form
        var form1 = document.getElementById("form1");
        //设置action
        form1.action = "hello.html";
        //提交form表单
        form1.submit();
    }

* 使用超链接提交
    - 代码
    <a href="hello.html?username=123456">使用超链接提交</a>

* onclick：鼠标点击事件
  onchange：改变内容（一般和select一起使用）

  onfocus:得到焦点  (ie5、某些版本的ie6)
  onblur:失去焦点

<html>
    <head>
        <title>表单的提交方式</title>
    </head>
    <body>
        <form id="tosub">
            用户名：<input type="text" id="usernameid" name="username" value="请输入用户名"  onfocus="clearInput();" onblur="reSet();"/><br/>
            <input type="button" value="提交" onclick="tosubmit();"/>
            <a href="HelloWorld.html?username=domarvel">点击链接提交</a>
        </form>
        <script type="text/javascript">
            var userInput=document.getElementById("usernameid");
            var formsub=document.getElementById("tosub");
            function tosubmit(){
                formsub.action="HelloWorld.html";
                formsub.submit();
            }
            function clearInput(){
                if(userInput.value=="请输入用户名")
                    userInput.value="";
            }
            function reSet(){
                if(userInput.value==""){
                    userInput.value="请输入用户名";
                }
            }
        </script>
    </body>
</html>

a_lonely_dancer

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
表单的自定义按钮提交

大家都知道了表单的自带submit按钮提交但是是否知道自定义按钮提交呢？还有超链接提交方式呢？？下面我就为大家直接开撸：1、表单提交方式* 使用submit提交<form> ..... <input type="submit" /></form>* 使用button提交表单 - 代码 //实现提交方法 function form1() {
复制链接

扫一扫