Login Form Example 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">
#textfield{
margin: 0px;
height: 20px;
border: solid 1px #4d90fe;
border-radius:2px;
background-color: #ccc;
}
#textfield:focus
{
border: 1px solid #4d90fe;
background-color: white;
}
#button{
height: 25px;
color: whitesmoke;
background-color: #4d90fe;
border-radius:2px;
}
label{
color: darkcyan;
}
</style>
</head>
<body>
<table>
<tr>
<td><label>User id</label></td><td><input type="text" name="uid" value="" id="textfield" /></td>
</tr>
<tr>
<td><label>Password</label></td><td><input type="password" name="psw" value="" id="textfield" /></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Sign in" id="button" /></td>
</tr>
</table>
</body>
</html>
output :
code :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#textfield{
margin: 0px;
height: 20px;
border: solid 1px #4d90fe;
border-radius:2px;
background-color: #ccc;
}
#textfield:focus
{
border: 1px solid #4d90fe;
background-color: white;
}
#button{
height: 25px;
color: whitesmoke;
background-color: #4d90fe;
border-radius:2px;
}
label{
color: darkcyan;
}
</style>
</head>
<body>
<table>
<tr>
<td><label>User id</label></td><td><input type="text" name="uid" value="" id="textfield" /></td>
</tr>
<tr>
<td><label>Password</label></td><td><input type="password" name="psw" value="" id="textfield" /></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Sign in" id="button" /></td>
</tr>
</table>
</body>
</html>
output :
After clicking on text field, it will changes to like below
figure.
super
ReplyDelete