Posted in HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Login Form</title> <meta name="author" content="azhar" /> <!-- Date: 2011-11-29 --> <link href="login-form.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <h2>Login Form</h2> <table> <tr> <td width="200">Username</td> <td><input type="text" name="username" title="Username" class="form-login" size="30" maxlength="100"/></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" title="Passsword" class="form-login" size="30" maxlength="100"/></td> </tr> <tr> <td></td> <td><input type="submit" value="" class="btn-login"/></td> </tr> </table> </div> </body> </html>Selanjutnya kita buat file CSS sebagai style dari html tersebut. Di sini saya beri nama login-form.css
html{ background-color: #6e6e6e; } body { width: 500px; height: 300px; margin: 150px auto; padding-top: 75px; background: url(images/login-form.png) no-repeat left top; } #wrapper{ padding: 10px 70px 0 70px; font-family: Arial, Helvetica, sans-serif; color: #0d5fac; } #wrapper h2{ font-size: 18px; } .form-login{ padding: 2px 3px; width: 200px; border: 1px solid #0d5fac; border-spacing: 1px; font-size: 16px; color: #0d5fac; } .btn-login{ width: 89px; height: 36px; cursor: pointer; border: none; background: url(images/login-button.png)no-repeat left top; }Simpan, dan kemudian jalankan melalui browser :-)