Create a Login form in HTML -CSS

The HTML <form> is used to collect user input.

An HTML form contains so many form elements.

Form elements are different types of input elements, like text fields, radio buttons ,checkboxes, submit buttons, select box and much more.

The <input> Element

The <input> element is one of the most important form element in HTML.

There are several <input> element can be displayed in several ways, depending on the type attribute.

How to use:

  • Open text editor like Notepad or any other.
  • Copy HTML code and paste into the text editor.
  • Save file as anyname.html or anyname.htm
  • Create new document.
  • Copy and paste CSS code into text editor.
  • Save file as login.css

HTML CODE :

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="login.css">
	<title></title>
</head>
<body>
<div class="login">
    <input type="text" placeholder="Username" id="username">  
  <input type="password" placeholder="password" id="password">  
  <a href="#" class="forgot">forgot password?</a>
  <input type="submit" value="Sign In">
</div>
<div class="shadow"></div>

</body>
</html>

Adding a CSS – login.css

/* makcode.in Simple CSS login form */

.login { 
	height:110px;
	width:190px;
	margin:auto;
	border:1px #CCC solid;
	padding:10px;
}

.login input { 
	padding:5px;
	margin:5px
 }

Leave a Reply

Your email address will not be published. Required fields are marked *