HTML5寫的簡單登入頁面

阿新 • • 發佈：2019-02-15

整體效果圖：
這裡寫圖片描述
主要程式碼：


<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="utf-8">
    <title>
        歡迎來到登入介面
    </title> 
     <meta name="viewport"content="width=device-width,initial-scale=1.0">
     <meta name="description"content="" 
>
     <meta name="author"content="">
     <!---CSS-->
     <link rel="stylesheet" type="text/css" href="css/supersized.css">
     <link rel="stylesheet" type="text/css" href="css/login.css">
     <link rel="stylesheet" href="css/bootstrap.min.css">

     <script src="js/jquery-1.8.2.min.js" 
></script>
     <script type="text/javascript"src="js/jquery.form.js"></script>
     <script type="text/javascript"src="js/tooltips.js"></script>
     <script type="text/javascript"src="js/login.js"></script>
<body>
  <div class="page-container">
  <div 
 class="main_box">
  <div class="login_box">
  <div class="login_logo">
    <label for="j_loginname"class="t">
    <h2>
    <font color="red">
        歡迎使用登入系統
    </font>
    </h2>
    </label>
  </div>
  <div class="login_form">
    <form action="index.html"id="login_form"method="post">
        <div class="form-group">
                        <label for="j_username" class="t">郵　箱：</label> 
                        <input id="email" value="" name="email" type="text" class="form-control x319 in" 
                        autocomplete="off">
                    </div>
        <div class="form-group">
                        <label for="j_password" class="t">密　碼：</label> 
                        <input id="password" value="" name="password" type="password" 
                        class="password form-control x319 in">
                    </div>
                    <div class="form-group">
                        <label for="j_captcha" class="t">驗證碼：</label>
                         <input id="j_captcha" name="j_captcha" type="text" class="form-control x164 in">
                        <img id="captcha_img" alt="點選更換" title="點選更換" src="images/captcha.jpeg" class="m">
                    </div>
                    <div class="form-group">
                        <label class="t"></label>
                        <label for="j_remember" class="m">
                        <input id="j_remember" type="checkbox" value="true">&nbsp;記住登陸賬號!</label>
                    </div>
                    </div>
                    <div class="form-group space">
                        <label class="t"></label>　　　
                        <button type="button"id="submit_btn" 
                        class="btn btn-primary btn-lg">&nbsp;登&nbsp;錄&nbsp </button>
                        <input type="reset" value="&nbsp;&nbsp;&nbsp;&nbsp;重&nbsp;置&nbsp;" class="btn btn-default btn-lg">
                    </div>

    </form>
  </div>    
  </div>
  </div>
  </div>
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<script src="js/scripts.js"></script>
<div style="text-align:center;">
<p>來源:<a href="http://www.mycodes.net/" target="_blank"></a></p>
</div>  

</body>
</head>
</html>

javasript中的程式碼

// JavaScript Document
//支援Enter鍵登入
        document.onkeydown = function(e){
            if($(".bac").length==0)
            {
                if(!e) e = window.event;
                if((e.keyCode || e.which) == 13){
                    var obtnLogin=document.getElementById("submit_btn")
                    obtnLogin.focus();
                }
            }
        }

        $(function(){
            //提交表單
            $('#submit_btn').click(function(){
                show_loading();
                var myReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //郵件正則
                if($('#email').val() == ''){
                    show_err_msg('郵箱還沒填呢！');    
                    $('#email').focus();
                }else if(!myReg.test($('#email').val())){
                    show_err_msg('您的郵箱格式錯咯！');
                    $('#email').focus();
                }else if($('#password').val() == ''){
                    show_err_msg('密碼還沒填呢！');
                    $('#password').focus();
                }else{
                    //ajax提交表單，#login_form為表單的ID。 如：$('#login_form').ajaxSubmit(function(data) { ... });
                    //show_msg('登入成功咯！  正在為您跳轉...','/');    
                }
            });
        });

HTML5寫的簡單登入頁面

整體效果圖：主要程式碼： <!DOCTYPE html> <html lang="en" class="no-js"> <head> <

Axure的快捷鍵，及網頁版簡單登入頁面，安卓圖示

複製快捷鍵： ctrl+滑鼠左鍵拖拽 ctrl+D:複製出來的新元件的XY的值各加10PX; ctrl+C,----》貼上ctrl+V 選中兩個框下拉下面一個，兩個就一樣放大右鍵–》組合中間按一

Android--簡單登入頁面

登入（activity_main.xml ）--->if（名稱==“abc” && pwd=="123"）----->跳轉到登入成功頁面(activity_two.xml) activity_main.xml <?xml version=

html簡單登入頁面程式碼

圖片必須是在Imges下的否則顯示不出來（複製程式碼的話把圖片換成你的圖片就好了）程式碼如下 <html> <head> <title>test</title> </head> <body > &

jsp+servlet實現簡單登入頁面功能Demo

小白新路歷程-1 [轉載請聯絡本人]實現功能：模擬簡單登入功能，登入成功跳轉新頁面，登入失敗在原登入介面提示登入失敗資訊開發環境：eclipseTomcat-8.0預備知識：HTML標籤，Servlet相關知識——請求的轉發與重定向，jsp相關知識，EL表示

用java 實現簡單登入頁面

通過java實現一個簡單登入介面 1.java的影象介面有兩種：awt和swing 2.swing的分類有：容器、獨立元件、佈局。容器： JFrame （窗體類，不能在自身新增容器） JPanel （面板類，可以在自身新增容器）獨立元件： JLabel 標籤類 JTextField 文字輸

django寫使用者登入判定並跳轉制定頁面

1.首先看要設定登陸的介面 book/view.py @user_util.my_login #相當於 select_all=my_login(select_all) def select_all(request): # 查詢所有的書 book_list = Boo

python中的flask框架寫簡單的登入介面

flask框架和css的應用實現的環境： windows環境 eclipse下的pydev pip3 install flask jinja2 步驟一：首先建立一個web.py # -*- coding:utf-8 -*- ''' Created

springboot整合JPA寫一個登入註冊頁面

建立工程需要匯入的部件 application.yml配置檔案 spring: devtools: restart: enabled: false datasource: driver-class-name: com.mysql.cj.jdbc.Dr

用js寫簡單頁面

var username=document.getElementsByClassName("username")[0]; var pwd=document.getElementsByClassName("password")[0]; v

ASP.NET Core 打造一個簡單的圖書館管理系統（三）基本登入頁面以及授權邏輯的建立

前言：　　本系列文章主要為我之前所學知識的一次微小的實踐，以我學校圖書館管理系統為雛形所作。　　本系列文章主要參考資料：　　微軟文件：https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&

用nodejs寫簡單爬蟲抓取https淘寶頁面

2016-09-23 周海漢 2016.9.23 淘寶有很多反爬措施。其中https就是反爬措施之一。一般的支援http協議的爬取失效了。 nodejs 是採用google V8引擎寫成的javascript後臺框架。自從有

簡單的HTML登入頁面

<!doctype html> <html> <head> <meta charset="utf-8"> <title>登陸介面</title> <style>

【html】【一個簡單的使用者登入頁面程式碼】

結果程式碼<!DOCTYPE html> <html> <head> <title>使用者登入.html</title> <meta http-equiv="keywords" cont

Django寫一個裝飾器：從首頁點選詳情頁，如已登入，進詳情頁；如未登入，跳轉至登入頁面，登入成功後，跳轉至詳情頁

有的網站需求，如果使用者未登入，能夠進入首頁，但當點選想要進入詳情頁的時候，就會跳轉到登入頁面，登入完成之後，有的需求需要進入首頁；有的需要進入點選登入之前你的意向頁面第一種：登入之後，進入首頁。第二種：登入之後，進入登入之前你點選想進入的意向頁面那麼，對於第一種，登入之後，進入首

簡單地用swing寫一個登陸頁面

import java.awt.Container; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import j

微信小程式簡單的登入頁面的跳轉

首先設定tapbar 在APP.js裡面設定相關資料使用者的資訊； loginBtnClick:function(){ app.globalData.userInfo={usern

運用HTML5+CSS3做的登入頁面

本文轉載自：http://chenjinfei.blog.51cto.com/2965201/774865 本人小菜一枚，之前也學過一些html/CSS/JavaScript，那時候只是粗略一學，沒有吃透，現在想重拾舊河山，不多說了，步入正題吧程式碼如下： <!

android -簡單註冊登入頁面應用

小白今天寫了一段註冊登入程式碼與大家分享不足請指出首先寫一個javabean package com.my.domain; public class User {private String account;//賬號private String password;//密碼

利用css3+jquery寫具有動畫效果的登入頁面

以下是執行截圖：利用css3屬性@keyframe定義兩個動畫，分別實現車子輪子旋轉、以及車身移動的動畫roll和move！具體程式碼如下： @keyframes roll { 0% { transform:rotate(72deg);

HTML5寫的簡單登入頁面

相關推薦