< / eXtreme Coding >: Give a better look to your login forms

Note: This tutorial it's not for beginners but it's for people already with some knowledge of HTML and CSS.

So instead of creating a regular login form like this:

Code:

<html>

<head>

</head>

<INPUT type="text" name="username" size="25"><br>

Password:<br>

<INPUT type="password" name="password" size="25"><br><INPUT type="submit" value="Send">

</form>

</body>

</html>

You can add some stuff that will make your login form look a lot more professional and nice like this:

Code:

<html>
<head>
<style>
input:focus {
outline: none;
}/*This CSS propriety takes out that yellow border that apears when you select the input box with your mouse*/
#login_div{
font-family: Impact, fantasy;
font-size: 13px;
color: #66665E;/*font color*/
letter-spacing:2px;
}
.login_form{
background-color:#EDEDED;
border-type:solid; /*configure border*/
border-width:3px; /*configure border*/
border-color:#3088bc; /*configure border*/
font-family: Impact, fantasy;/*font type*/
font-size: 13px;
color: #66665E;/*font color*/
letter-spacing:2px;/*space between letters*/
-moz-border-radius: 7px 7px / 7px 7px;/*configure the rounded corners*/
border-radius: 7px 7px / 7px 7px;/*configure the rounded corners*/
}
</style>
</head>
<body>
<div id="login_div">
<form action="" method="post">
 User:<br>
<INPUT type="text" name="username" size="25" class="login_form"><br>
 Password:<br>
<INPUT type="password" name="password" size="25" class="login_form"><br>
<INPUT TYPE="image" SRC="submit.png" ALT="Submit Form" style="margin-top:4px;margin-left:2px;">
</form>
</div>
</body>
</html>

I hope it helped.

< / eXtreme Coding >

Monday, October 3, 2011

Give a better look to your login forms

No comments:

Post a Comment