Simple Sign In Form using html and css

The first and foremost graphical interface for any application is a login form or sign up form. It is very important that we make sign in forms attractive. You can create them easily with html and css.

Here is one simple example login in form using html and css

Simple sign in form with username and password

The html part :

<div id = "signUpForm" class = "center">
    <div id = "avatarHolder" class= "center">
      <img class = "avatar" src = "http://imagizer.imageshack.us/v2/100x100q90/837/ota1.jpg" />
    </div>
   
    <div id = "form" class = "center">
        <input id = "email"  placeholder= "Email"/>
        <input id = "password" type = "password"  placeholder = "password"/>
        <button id = "signIn">Sign in </button>
    </div>
</div>

The CSS style part

#signUpForm {
    width : 100%;
    max-width : 300px;
    height : auto;
    background-color : #ddd;
    padding: 20px;
    box-shadow : 0 3px 4px #aaa;
}
#avatarHolder {
    width : 90px;
}
.avatar {
    height : 90px;
    border : 1px solid #bbb;
    width : 90px;
    border-radius : 90px;
}
#form {
    width : 200px;
   padding: 10px;
}
#form input {
    line-height : 2;
    width : 100%;
    border-radius : 5px;
    border-style : none;
}
#form button {
  background-image:linear-gradient(#6D94BF, #446E9B 50%, #3E648D);
  border:1px solid #345578;
  padding:8px 12px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  color : #FFF;
  width : 100%;
  border-radius : 5px;
  margin-top: 10px;
}

.center {
    margin-left : auto;
    margin-right : auto;
}

Place the html part between the body tags and place the css in your css file or in between style tags and your html should look like as shown in the picture above


There is fiddle available for this html sign-in form here