html+JQueryのログイン例-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

html+JQueryのログイン例

May 16, 2018 am 10:10 AM

例ログイン

この記事では、HTML と JQuery を使用してログイン Web ページを作成する例を主に紹介します。興味のある方はぜひ参考にしてください。

コードは次のとおりです:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;login&lt;/title&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../pagejs/bootstrap.min.js&quot; &gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../pagejs/jquery-2.1.4.min.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../pagecss/bootstrap.min.css&quot;/&gt;

    &lt;script type=&quot;text/javascript&quot;&gt;
        function showmsg(msgdata) {
            $(&quot;#msginfo&quot;).hide();
            $(&quot;#msginfo&quot;).html(&quot;&lt;b&gt;&quot; + msgdata + &quot;&lt;/b&gt;&quot;);
            $(&quot;#msginfo&quot;).show(1000);
        }

        $().ready(function() {
            $(&quot;#login&quot;).click(function() {
                var user = $(&quot;#inputEmail&quot;).val();                var pwd = $(&quot;#inputPassword&quot;).val();                if (user == &quot;&quot; || pwd == &quot;&quot;) {
                    showmsg(&quot;please input email and password&quot;);                    return;
                }

                $.post(&quot;login.do&quot;, {
                    email:user,
                    pwd:pwd
                },                function(data, status){
                    if (data == &quot;loginok&quot;) {
                        location.href = &quot;welcome.jsp&quot;;
                    } else {
                        showmsg(data);
                    }
                });
            });
        })    &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p class=&quot;container&quot;&gt;
    &lt;p class=&quot;row clearfix&quot;&gt;
        &lt;p class=&quot;col-md-12 column&quot;&gt;
            &lt;ul class=&quot;breadcrumb&quot;&gt;
                &lt;li&gt;
                    &lt;a href=&quot;../index.html&quot;&gt;Home&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;active&quot;&gt;
                    LOGIN                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/p&gt;
    &lt;/p&gt;&lt;/p&gt;&lt;p class=&quot;container&quot;&gt;
    &lt;p class=&quot;row clearfix&quot;&gt;
        &lt;p class=&quot;col-md-2 column&quot;&gt;
            &lt;p style=&quot;height:100px;clear:both&quot;&gt;&lt;/p&gt;
            &lt;img alt=&quot;140x140&quot; src=&quot;../image/icon.jpg&quot; class=&quot;img-circle&quot; style=&quot;width:160px;height:160px&quot; /&gt;
        &lt;/p&gt;
        &lt;p class=&quot;col-md-6 column&quot;&gt;
            &lt;p class=&quot;page-header&quot;&gt;
                &lt;h1&gt;
                    Welcome to Sp4 System                &lt;/h1&gt;
            &lt;/p&gt;
            &lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot; id=&quot;login_form&quot; action=&quot;login.do&quot; method=&quot;post&quot;&gt;
                &lt;p class=&quot;form-group&quot;&gt;
                    &lt;label for=&quot;inputEmail&quot; class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
                    &lt;p class=&quot;col-sm-10&quot;&gt;
                        &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;inputEmail&quot; name=&quot;email&quot; /&gt;
                    &lt;/p&gt;
                &lt;/p&gt;
                &lt;p class=&quot;form-group&quot;&gt;
                    &lt;label for=&quot;inputPassword&quot; class=&quot;col-sm-2 control-label&quot;&gt;Password&lt;/label&gt;
                    &lt;p class=&quot;col-sm-10&quot;&gt;
                        &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;inputPassword&quot; name=&quot;pwd&quot; /&gt;
                    &lt;/p&gt;
                &lt;/p&gt;
                &lt;p class=&quot;form-group&quot;&gt;
                    &lt;p class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
                        &lt;p class=&quot;checkbox&quot;&gt;
                            &lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Remember me&lt;/label&gt;
                        &lt;/p&gt;
                    &lt;/p&gt;
                &lt;/p&gt;
                &lt;p class=&quot;form-group&quot;&gt;
                    &lt;p class=&quot;col-sm-offset-2 col-sm-2&quot;&gt;
                        &lt;button id=&quot;login&quot; type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Sign in&lt;/button&gt;
                    &lt;/p&gt;
                    &lt;p class=&quot;col-sm-8&quot;&gt;
                        &lt;h4 id=&quot;msginfo&quot;&gt;&lt;/h4&gt;
                    &lt;/p&gt;
                &lt;/p&gt;
            &lt;/form&gt;


        &lt;/p&gt;
        &lt;p class=&quot;col-md-4 column&quot;&gt;
        &lt;/p&gt;
    &lt;/p&gt;&lt;/p&gt;&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー