首页 > 编程语言 > 详细

JavaWeb学习日记----XML

时间:2019-04-03 00:51:03      阅读:133      评论:0      收藏:0      [点我收藏+]

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>

 

当用户名输入框未获得焦点(鼠标)时,文本框默认显示"请输入用户名"

技术分享图片

当输入框获得焦点时,文本框显示如下

技术分享图片

当输入框再次失去焦点时,又会显示默认文本:

技术分享图片

以上就是JavaWeb学习日记第一天内容.

JavaWeb学习日记----XML

原文:https://www.cnblogs.com/fxxk/p/10646367.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!