A good looking login form [HTML/CSS]

A good looking login form [HTML/CSS] - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: A good looking login form [HTML/CSS] (/showthread.php?tid=7087)

A good looking login form [HTML/CSS] - Fragma - 05-16-2010

Ok heres a quick tutorial on how to create a decent looking login form in HTML and using CSS. For an example.. http://www.nmapforum.webege.com/Home.html

HTML

Code:
<html>

<body>

<form action="">

<input value="Username" type="text/css" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Username':this.value;" value="Username" /><br />

<input value="********" type="text/css"  onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'********':this.value;" value="********" />

</form>

</body>

</html>

The above code will create a username and password field. In this example I have set the value to Username & ********. When you click on the text, the input field will clear, and if you click away from the inputs without typing anything, the values will show again.

CSS

Code:
<style type="text/css">

<!--

INPUT {

background: #000000 url(images/whatever.jpg);

color: white;

border: 0px;

font-family: arial, verdana, ms sans serif;

font-weight: regular;

font-size: 12pt

}

 -->

</style>

Customize the CSS to your liking and place it anywhere within the body..
This will allow you to pretty much have full control on what your login form will look like..

Thanks,
The Major

RE: A good looking login form [HTML/CSS] - Thomas - 05-16-2010

Nice share, I liked how with the CSS you could make it look almost any way you want it to.

RE: A good looking login form [HTML/CSS] - Rozzy - 05-16-2010

Very nice guide. Would this be able to be bridged with like, MyBB? Like if it used the same database for users.

RE: A good looking login form [HTML/CSS] - Control - 05-16-2010

Um how do i make it work ?