JavaWeb学习日记----XML

程序员文章站 2022-07-11 11:32:17

1.表单提交方式 (1) 使用input控件中的submit提交代码如下：结果：上图是通过get方法使用input控件中的submit的表单提交方式 (2)使用button提交表单步骤：通过ID获取form标签设置action(要提交的页面) 调用submit()方法提交form表单代 ......

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>

结果：

JavaWeb学习日记----XML

上图是通过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>

结果：

JavaWeb学习日记----XML

如上所示,在button中添加鼠标点击事件，通过javascript中获得form对象，调用submit()方法实现表单的提交

(3)使用超链接提交

　　格式： <a href='' 要提交的页面？参数的键值对''><a/>

<a href="# ? user=admin,password=admin">点我提交</a>

结果：

JavaWeb学习日记----XML

补充知识点：

以后的学习中可能会遇到的事件：

　　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学习日记----XML