Javascript /HTML /CSS Code : Username and Password

 <!DOCTYPE HTML>

<HTML> 

<head>

<style>

<style>


    


    body {


    font-size: 16px;


    background: #f9f9f9;


    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;


}


div{ padding:10px;}


h2 {


    text-align: center;


    text-decoration: underline;


}

button{padding:10px;}


form {


    width: 300px;


    background: #fff;


    padding: 15px 40px 40px;


    border: 1px solid #ccc;


    margin: 50px auto 0;


    border-radius: 5px;


}


label {


    display: block;


    margin-bottom: 5px


}


label i {


    color: #999;


    font-size: 80%;


}


input, select {


    border: 1px solid #ccc;


    padding: 10px;


    display: block;


    width: 100%;


    box-sizing: border-box;


    border-radius: 2px;


}


.row {


    padding-bottom: 10px;


}


.form-inline {


    border: 1px solid #ccc;


    padding: 8px 10px 4px;


    border-radius: 2px;


}


.form-inline label, .form-inline input {


    display: inline-block;


    width: auto;


    padding-right: 15px;


}


.error {


    color: red;


    font-size: 90%;


}


input[type="button"], input[type="reset"] {


    font-size: 110%;


    font-weight: 80;


    background: #006dcc;


    border-color: #016BC1;


    box-shadow: 0 3px 0 #0165b6;


    color: #fff;


    margin-top: 10px;


    cursor: pointer;

    

    padding:10px;


}


input[type="submit"]:hover {


    background: #0165b6;


}


    


  </style>


</style>


<script language="javascript">

<!--//

/*This Script allows people to enter by using a form that asks for a

UserID and Password*/

function pasuser(form) {

if (form.id.value=="JavaScript") { 

if (form.pass.value=="JS") {              

location="https://javascriptcodeprograms.blogspot.com/"; 

} else {

alert("Invalid Password")

}

} else {  alert("Invalid UserID")

}

}

//-->

</script>


</head>


<body>


<form  name="form" >

<div> Login Area  </div>

<div>  <input  id="id"  name="id" type="text" placeholder="Username"> </div>

<div>  <input id="pass" name="pass" type="password"  placeholder="Username"> </div>


<div><input type="button" value="Login" onClick="pasuser(this.form)">

<input type="Reset"></form> 


</body>

</html>

Login Area

Comments

Post a Comment

Popular posts from this blog

Javascript Code using getElementById and If Else Statement

  <!DOCTYPE html> <html> <head> <title> Form Elements and Attributes </title> <style> //format and styles div { margin-bottom: 10px; } label { display: inline-block; width: 200px; } fieldset { background: #e1eff2; } legend { padding: 20px 0; font-size: 20px; } </style> <body> <body> <h1> Determine Age Group </h1> <p> Enter your details : </p> <fieldset> <label> Enter your name </label> <input type =" text " onfocus =" this.value='' " name =" fname " id =" fname " value ="" /> <br> <!-- create input text box for name --> <label> Enter your age </label> <input type =" number " onfocus =" this.value='' " name =" age " i...
Read more

Window Screen Properties

 <!DOCTYPE html> <html> <body> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <p id="demo4"></p> <p id="demo5"></p> <script> document.getElementById("demo").innerHTML =  " screen width is " + screen.Width; document.getElementById("demo1").innerHTML =  "Available screen width is " + screen.availWidth; document.getElementById("demo2").innerHTML =  " screen height is " + screen.height; document.getElementById("demo3").innerHTML =  "Available screen height is " + screen.availHeight; document.getElementById("demo4").innerHTML =  " screen Depth is " + screen.colorDepth; document.getElementById("demo5").innerHTML =  "screen pixelDepth is " + screen.pixelDepth; </script> </body> <...
Read more