HTML/CSS

Form Design Using CSS and HTML

By Andrew R
01-Jun-08
Views: 101227

Every web application that collects information from the user should have an interface which the user can understand easily and interact with it. If the interface is easy for the user to understand, the information supplied by the user will be more accurate. This tutorial will guide you in designing HTML forms, which are easy to design and easy for the user to understand.

(Designing Login Form) (Page 6 of 6)

Lets now move to Login form design. Login form is easy to design, look at the form below with its markup. Two variations of this form are also shown.

Here are two variations of this form Login 2 Login 3

Here is all the markup to design the above form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

.label{

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:11px;

    color:#0066FF;

}

.tableBorder{

    border:solid 1px #0066FF;

    margin-top:100px;

}

.message{

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:14px;

    font-weight:bold;

    color:#0066FF;

}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Login to Website</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table cellpadding="2px" cellspacing="1px" bgcolor="#F4F5F7" width="400px" class="tableBorder" align="center">

    <tr>

        <td colspan="2" bgcolor="#0066FF">&nbsp;</td>

    </tr>

    <tr>

        <td colspan="2" class="label">&nbsp;</td>

    </tr>

    <tr>

        <td align="center" colspan="2">

            <img src="images/locked.png" border="0" align="absbottom"/>&nbsp;

            <span class="message">Login to the Admin Panel</span>

        </td>

    </tr>                   

    <tr>

        <td colspan="2" class="label">&nbsp;</td>

    </tr>

    <tr>

        <td class="label" align="right" width="40%">Username:</td>

        <td align="left" width="60%"><input type="text" name="username" maxlength="20"/></td>

    </tr>

    <tr>

        <td class="label" align="right">Password:</td>

        <td align="left"><input type="password" name="password" maxlength="20" /></td>

    </tr>

    <tr>

        <td class="label" align="right">&nbsp;</td>

        <td align="left"><input type="submit" value="Login" /></td>

    </tr>                   

    <tr>

        <td colspan="2" class="label">&nbsp;</td>

    </tr>                   

</table>

</body>

</html>

This little PHP script can be used to create a copy of MySql Database. The script is very fast and it requires the source and target databases to be under the same MySql user account. . Read More Backup/Copy a MySql Database Using PHP

Comments

realist
[14-Aug-2008]

thanks

kc makwana
[14-Dec-2008]

Nice presentation of CSS desing basics,also got readymade forms,from which we can produce variety of forms by modifying css property,very much time saving forms tuturial. thanks.

handoyo
[13-Feb-2009]

Thanks for the tutorial..Anyway,how to handle the input focus thing so it can work on IE??

cipek1981
[27-Apr-2009]

nice login form

ahad
[27-Jun-2009]

hello thanxs its a gud design...

Mat
[13-Jul-2009]

Very nice forms all these. Thank you very much for posting them

Alex
[13-Jul-2009]

Thanks for sharing this

James
[13-Jul-2009]

Very nice forms

George
[14-Jul-2009]

Very nice forms, change the css and create a new form

sathyasarathy
[17-Sep-2009]

#10

nice designs...thank u.

ahmed
[20-Jan-2010]

#11

thanks . nice forms, go on

fyrose
[21-Jan-2010]

#12

It is very good for the freshers who learn html.Tonnes & Tonnes of thanks....................................................................................

Ramesh
[06-Jun-2010]

#13

very nice work thks for the author and their codes

chirag
[22-Jun-2010]

#14

Nice presentation

sapphiera
[31-Jul-2010]

#15

thanks..very usefull

rajim laymond
[10-Nov-2010]

#16

nice css login form

thank you very much for sharing

tomix
[12-May-2011]

#17

excelent examples, thank you so much.

Emma
[10-Aug-2011]

#18

Great design login forms, it helped me alot. Thank you so much.

ibad
[22-Dec-2011]

#19

its very good......... thanks......

jen
[25-Mar-2012]

#20

thank you very much :)

Rajkumar
[04-May-2012]

#21

very attractive login forms and css designs...

Devendier
[08-May-2012]

#22

I love this tutor. Thanks a lot Andrew. :)

suny
[16-Dec-2012]

#23

nice work

Keyword:
Category:
	Advance Search >>