ad

Saturday, October 28, 2023

how to create login forms

 


  

simple  Customer Login Form Using HTML


Customer Login Form

Customer login form

PROGRAM : Customer Login  form :-


                 CODE  THIS PROGRAME 


<html>  
<head>  
<meta name="viewport" content="
width=device-width, initial-scale=1">  
<title> Login Page </title>  
<style>  
Body {  
  font-family: Calibri, Helvetica, sans-serif;  
  background-color: pink ;  
}  

body {
  background-image:url ="https://drive
.google.com/file/d/1RMKNDIdqJSs4PTAZO6p47
VmC_MXWsplC/view?usp=drivesdk" ("background6.jpg");
}

button {  
       background-color: 357Ec7;
       width: 100%;  
        color: black ;  
        padding: 15px;  
        margin: 10px 0px;  
        border: none;  
        cursor: pointer;  
         }  
 form {  
        border: 3px solid #f1f1f1;  
    }  
 input[type=text], input[type=password]
 {  
        width: 100%;  
        margin: 8px 0;  
        padding: 12px 20px;  
        display: inline-block;  
        border: 2px solid   #F660AB;  
        box-sizing: border-box;  
    }  
 button:hover {  
        opacity: 0.7;  
    }  
  .cancelbtn {  
        width: auto;  
        padding: 10px 18px;  
        margin: 10px 5px;  
    }  
       
     
 .container {  
        padding: 25px;  
        background-color: FCDFFF;  
    }  
</style>  
</head>    
<body>    
    <center> <h1> Customer  Login Form </h1>
</center>  
    <form>  
        <div class="container">  
            <label>Username : </label>  
            <input type="text" placeholder=
"Enter Username" name="username" required>
            <label>Password : </label>  
            <input type="password" placeholder=
"Enter Password" name="password" required>
             <button type="submit"> <input
type="submit"
              onclick="check(this.form)"
name="btn_submit"
             value="Login"></button>
            <input type="checkbox"
checked="checked"> Remember me  
            <button type="button"
class="cancelbtn"> Cancel</button>  
            Forgot <a href="#"> password? </a>  
        </div>  
    </form>    
</body>    
<script type="text/javascript">
         var message="Right Click Disabled!";
               function rtclickcheck(keyp)  {
        if (navigator.appName == "Netscape"  &&
                           keyp.which == 3)  {
                              alert(message);
                               return false;
                      }
      if (navigator.appVersion.indexOf("MSIE")
 != -1 && event .button == 2)  {
                               alert(message);
                           return false;
                      }
}
         document.onmousedown = rtclickcheck;
         function check(form)  {
   

if  (form.username.value ==  "admin"
&& form.password.value == "123")  {
       window.open("https:https://
www.tripadvisor.in/Attraction_Review-g12456442
-d2293365-Reviews-Kas_Plateau-Kas_Satara_Distric
t_Maharashtra.html ")
      } else  {
        alert("Username or Password Doesn't
Match!");
   }
}
</script>
</html>

Thursday, October 26, 2023

How to create simple login form use HTML and CSS



Creating Sample Login Form Using HTML

 Login Form


Login form

What is a login form?

 

     Almost every website and application uses login credentials. The login form uses the user's credentials to verify access rights. It usually consists of a username or email and a password. However, more fields can be added to make the site more    secure.


PROGRAM :CODE

Login form







<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Raleway, sans-serif;
}

body {
    background: linear-gradient(90deg, #c1bbf3);        
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.screen {      
    background: linear-gradient(90deg,  #a09af8);      
    position: relative;
    height: 600px;
    width: 360px;  
    box-shadow: 0px 0px 24px #5C5696;
}

.screen__content {
    z-index: 1;
    position: relative;
    height: 100%;
}

.screen__background {      
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);  
}

.screen__background__shape {
    transform: rotate(45deg);
    position: absolute;
}

.screen__background__shape1 {
    height: 520px;
    width: 520px;
    background: #FFF;  
    top: -50px;
    right: 120px;  
    border-radius: 0 72px 0 0;
}

.screen__background__shape2 {
    height: 220px;
    width: 220px;
    background: #6C63AC;    
    top: -172px;
    right: 0;  
    border-radius: 32px;
}

.screen__background__shape3 {
    height: 540px;
    width: 190px;
    background: linear-gradient(270deg, #5D54A4, #6A679E);
    top: -24px;
    right: 0;  
    border-radius: 32px;
}

.screen__background__shape4 {
    height: 400px;
    width: 200px;
    background: #aba7fa;    
    top: 420px;
    right: 50px;    
    border-radius: 60px;
}

.login {
    width: 320px;
    padding: 30px;
    padding-top: 156px;
}

.login__field {
    padding: 20px 0px;  
    position: relative;
}

.login__icon {
    position: absolute;
    top: 30px;
    color: #7875B5;
}

.login__input {
    border: none;
    border-bottom: 2px solid #D1D1D4;
    background: none;
    padding: 10px;
    padding-left: 24px;
    font-weight: 700;
    width: 75%;
    transition: .2s;
}

.login__input:active,
.login__input:focus,
.login__input:hover {
    outline: none;
    border-bottom-color: #6A679E;
}

.login__submit {
    background: #fff;
    font-size: 14px;
    margin-top: 30px;
    padding: 16px 20px;
    border-radius: 26px;
    border: 1px solid #D4D3E8;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    width: 100%;
    color: #4C489D;
    box-shadow: 0px 2px 2px  rgb(40, 205, 205);
    cursor: pointer;
    transition: .2s;
}

.login__submit:active,
.login__submit:focus,
.login__submit:hover {
    border-color: #6A679E;
    outline: none;
}

.button__icon {
    font-size: 24px;
    margin-left: auto;
    color: #7875B5;
}

.social-login {
    position: absolute;
    height: 140px;
    width: 160px;
    text-align: center;
    bottom: 0px;
    right: 0px;
    color: #fff;
}

.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-login__icon {
    padding: 20px 10px;
    color: #fff;
    text-decoration: none;  
    text-shadow: 0px 0px 8px #7875B5;
}

.social-login__icon:hover {
    transform: scale(1.5);  
}
  </style>
</head>
<body>
   

    <div class="container">
        <div class="screen">
            <div class="screen__content">
                <form class="login">
                    <div class="login__field">
                       
                        <span class="button_
_text "><h2>Login Form </h2></span><br><br>
                        <i class="login__icon
fas fa-user"></i>
                        <input type="text"
class="login__input" placeholder="User name
/ Email">
                    </div>
                    <div class="login__field">
                        <i class="login__icon
fas fa-lock"></i>
                        <input type="password"
class="login__input" placeholder="Password">
                    </div>
                    <button class="button
login__submit">
                        <span class="button_
_text">Log In Now</span>
                        <i class="button__icon
fas fa-chevron-right"></i>
                    </button>              
                </form>
                <div class="social-login">
                   
                    <div class="social-icons">
                        <a href="#" class="
social-login__icon fab fa-instagram"></a>
                        <a href="#" class="
social-login__icon fab fa-facebook"></a>
                        <a href="#" class="
social-login__icon fab fa-twitter"></a>
                    </div>
                </div>
            </div>
            <div class="screen__background">
                <span class="screen__background
__shape screen__background__shape4"></span>
                <span class="screen__background
__shape screen__background__shape3"></span>      
                <span class="screen__background
__shape screen__background__shape2"></span>
                <span class="screen__background
__shape screen__background__shape1"></span>
            </div>      
        </div>
    </div>

</body>
</html>

Login form 

OUTPUT 










Related Post 

👌👇👇👍

objects in javascript

php cookies

application of javascript turorial

Wednesday, October 25, 2023

How to create Login form

 


Creating Sample Login Form Using HTML

 Login Form


login form




  1]   What is login form?

 

Almost every website and application uses login credentials. The login form uses the user's credentials to verify access rights. It usually consists of a username or email and a password. However, you can add more fields to make your site more secure.

  

  2]  What is login ID & password?

An access certificate is a unique identifier (such as a username and password) that allows a user to identify themselves and log in to an online account. Failure to use secure passwords can render network security software and tools such as firewalls and VPNs ineffective.

Example 

Source CODE

Login form



<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<title> Login Page </title>  
<style>  
Body {  
  font-family: Calibri, Helvetica, sans-serif;  
  background-color:;  
}  
button {  
       background-color: #4CAF50;  
       width: 100%;  
        color: blue;  
        padding: 15px;  
        margin: 10px 0px;  
        border: none;  
        cursor: pointer;  
         }  
 form {  
        border: 3px solid #f1f1f1;  
    }  
 input[type=text], input[type=password] {  
        width: 100%;  
        margin: 8px 0;  
        padding: 12px 20px;  
        display: inline-block;  
        border: 2px solid violet;   ;  
        box-sizing: border-box;  
    }  
 button:hover {  
        opacity: 0.7;  
    }  
  .cancelbtn {  
        width: auto;  
        padding: 10px 18px;  
        margin: 10px 5px;  
    }  
       
     
 .container {  
        padding: 25px;  
        background-color: lightblue;  
    }  
</style>  
</head>    
<body>    
    <center> <h1> Login Form </h1> </center>  
    <form>  
        <div class="container">  
            <label>Username : </label>  
            <input type="text" placeholder="Enter Username" name="username" required>  
            <label>Password : </label>  
            <input type="password" placeholder="Enter Password" name="password" required>  
            <button type="submit"><b>Login</b></button>  
            <input type="checkbox" checked="checked"> Remember me  
            <button type="button" class="cancelbtn"> Cancel</button>  
            Forgot <a href="#"> password? </a>  
        </div>  
    </form>
    </body>
    </html>

Related Post 
👇👇👌👍

features of javascript

php program print square number pattern