Login form using html and css styles
code :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/*initially button color*/
#nav{
width: 65px;
height: 25px;
background-color:blue;
color:white;
border: solid #616161 2px;
text-decoration: none;
text-align: center;
font: 7px;
font-weight: bold;
cursor: pointer;
-moz-border-radius: 5px ;
}
/*this is for when you click on that submit button that will be changes*/
#nav:hover{
background-color: white;
color: blue;
border: solid blue 2px;
}
/*initially text field color*/
#textfield
{
width: 130px;
height: 20px;
padding: 2px;
border: solid cornflowerblue 1px;
font: 4px;
-moz-border-radius:5px;
}
/*this is for when you click on that text field that will be changes*/
#textfield:hover{
border: solid blue 1px;
}
label{
color: blue;
}
h1{
color: darkcyan;
font-family: cursive;
}
</style>
</head>
<body>
<center><h1>User Sign In </h1>
<form action="" method="">
<table>
<tr><td><label>Email id </label></td>
<td> <input type="text" name="mailid" value="" id="textfield"/></td></tr>
<tr><td><label>Password</label> </td>
<td><input type="password" name="mailid" value="" id="textfield"/></td></tr>
<tr><td></td>
<td><input type="submit" value="Sign In" id="nav"/></td></tr>
</table>
</form>
</center>
</body>
</html>
output :
This login form created by using HTML with CSS styles.
This login form contains two text fields (for
enter mail id and password) and button. That text fields initially
having light blue color while click on that text fields that color will be
changes to blue color and button
initially having blue color with white text, while click on that button
that will be changes to white color
and button text changes to blue
color. This login form easy to understand and with simple code.
code :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/*initially button color*/
#nav{
width: 65px;
height: 25px;
background-color:blue;
color:white;
border: solid #616161 2px;
text-decoration: none;
text-align: center;
font: 7px;
font-weight: bold;
cursor: pointer;
-moz-border-radius: 5px ;
}
/*this is for when you click on that submit button that will be changes*/
#nav:hover{
background-color: white;
color: blue;
border: solid blue 2px;
}
/*initially text field color*/
#textfield
{
width: 130px;
height: 20px;
padding: 2px;
border: solid cornflowerblue 1px;
font: 4px;
-moz-border-radius:5px;
}
/*this is for when you click on that text field that will be changes*/
#textfield:hover{
border: solid blue 1px;
}
label{
color: blue;
}
h1{
color: darkcyan;
font-family: cursive;
}
</style>
</head>
<body>
<center><h1>User Sign In </h1>
<form action="" method="">
<table>
<tr><td><label>Email id </label></td>
<td> <input type="text" name="mailid" value="" id="textfield"/></td></tr>
<tr><td><label>Password</label> </td>
<td><input type="password" name="mailid" value="" id="textfield"/></td></tr>
<tr><td></td>
<td><input type="submit" value="Sign In" id="nav"/></td></tr>
</table>
</form>
</center>
</body>
</html>
output :
No comments:
Post a Comment