How To Create a Login Form in HTML CSS with Source Code

Login Form in HTML CSS with Source Code
Create a Login Form in HTML and CSS with Source Code

Create a Login Form in HTML and CSS with Source Code

Hello Everyone. I posted a tutorial on how to create a Login Form with HTML and CSS. To make some follow up with my login page tutorial, I decided to create another tutorial on how to create a login Login Form with HTML and CSS Also. in this tutorial, you will also learn how to use HTML and CSS Coding.

index.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<br />
<br />

<div class="login-card">
<div class="log_head">
<h1>LOGIN</h1>
<img src="lock.png" alt="lock" class="lock" />
</div>

<div class="log_body">
<form action="#" method="get">
 <table width="200" border="0" align="center">
  <tr>
    <td><input value="User Name" type="text" name="loginid" class="log_user" ></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input value="Password" type="password" name="pass" class="log_Pass"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <td><input name="remember" type="checkbox" value="Remember Me"> Keep me logged in</td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  </tr>
  <tr>
   <td><input type="submit" name="login" class="login-submit" value="SIGN IN"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td>Don't have an account ? <a href="register.html" rel="register">Sign Up</a></td>
  </tr>
</table>

</form> 
</div>

</div>
</body>
</html>

Style.css

.login-card {
  
  width: 400px;
  background-color: #7E7E7E;
  margin: 0px auto ;
  border-radius: 9px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  min-height:440px;
 
}

.log_head{ background:#4DC889; width:400px; height:120px; border-radius:9px 9px 0 0px; }

.login-card h1 {
  text-align: center;
  font-family:open Sans;
  color:#FFFFFF;
  font-weight:700px;
  font-size:20px;
  line-height:27px;
  padding-top: 24px;
  
}

.lock{ padding-left:181px; width:30px; height:37px; padding-top:10px;}

.log_body{ padding:40px 20px 20px 20px;}

.log_user{ background:#FEFEFE; color:#999999; border-radius: 10px; width:349px; height:31px; padding:5px; font-family:open Sans; font-weight:700px; font-size:15px; border:none; }

.log_Pass{background:#FEFEFE; color:#999999; border-radius: 10px; width:349px; height:31px; padding:5px; font-family:open Sans; font-weight:700px; font-size:15px; border:none;}


.login-submit{ background:#4DC889; border:none; border-radius: 10px; width:359px; height:36px; cursor:pointer; font-family:open Sans; font-weight:700px; font-size:15px; color:#FFFFFF; }

.log_body a{ text-decoration:none; color:#78EEB2; font-family:open Sans; font-weight:900px; font-size:15px; line-height:21px;}

You are understand more CSS and HTML coding. See this video

You need this my login form script. Please download

You can see more

20 Responsive Free Login Form Template

Saurav Sen

Saurav Sen

Hi, I am a professional blogger and web developer. So I also share experiences with web development tutorials and blogging tips and including writing about HTML, CSS, JavaScript, Jquery, Ajax, PHP, and MySQL.