Build Registration Form in HTML with Validation

Today we come up with another awesome registration form which design in HTML with validation. Whether you have a static website or dynamic, The beautiful looking signup template page always needed.

This kind of form is really necessary for web designer interface. It is a special form with a unique design idea. You can free download with all the source code including HTML & CSS.

Basically, We are going to build a full page template for user registration. It’s an idea of how to make an awesome looking template for the user to sign up.

We make a two-tone background color to make it nice and simple. The left side has some common text and the right side have a form with all its important fields.

The form is developed with the technology of pure HTML and CSS. It is responsive and works well on the mobile device.

The user registration form can have different sorts of thing. You can add it to permit the visitor to create their profile on your website. Allow them some extra advantage on site consisting of publishing article, download files and more.

It relies on website motive. By way of designing a  user signup form template and make it scale to in shape the browser window, the shape templates frequently have to include responsive design too looks excellent.

Create HTML for Registration Form with Validation

First of all, We will do two-tone background color. Next, we will divide our page into two sections. The first section includes the heading and some text, and another one will have form.

Have a look HTML snap.

<div class="signupForm">
    <div class="wrapper">
    <div class="wrapleft">
        <h1>Register</h1>
        <span>Join Us</span>
    </div>
    <div class="wrapright">
        <form method="post" action="">
            <div class="wrapInput">
                <input type="text" name="username" value="Add username" required />
                <label for="username">Username</label>
            </div>
            <div class="wrapInput">
                <input type="email" name="email" value="Your Email" required />
                <label for="email">Email</label>
            </div>
            <div class="wrapInput">
                <input type="password" name="password" value="type password" required />
                <label for="password">Password</label>
            </div>
            <div class="wrapInput">
                <input type="password" name="password2" value="re-type password" required />
                <label for="password2">Confirm Password</label>
            </div>
            <div class="wrapInput">
                <input type="submit" name="submit" value="Submit" />
            </div> 
        </form>
    </div>
    </div>
</div>         

The CSS Styling

We try to keep CSS of form to be simple and easy to understand. We have added some border and colors to input fields and try to make them look nicely.

.signupForm input[type="text"], 
.signupForm input[type="password"],
.signupForm input[type="email"] {
    border: 1px solid #8f0222;
    color: #8f0222;
    height: 35px;
    padding: 5px;
    width: 96%;
}
.signupForm input[type="text"]:hover, 
.signupForm input[type="password"]:hover,
.signupForm input[type="email"]:hover {
    background:#EFDC8C;
}
.signupForm  label {
  position: relative;
  display: inline-block;
  float: right;
  width: 100%;
  color: #CCD2B7;
  font-weight: bold;
  font-size: 1.05em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.signupForm input[type="submit"]{
	 position: relative;
	display: block;
	padding: 0.7em 0.8em;
	margin: .3em 0 1em auto;
	width: 30%;
	vertical-align: middle;
	color: #000;
	font-size: 16px;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
	text-align: center;
	letter-spacing: 1px;
	background: #EFDC8C;
	border: 0;
	border-bottom: 2px solid #C9B976;
	cursor: pointer;
	transition: all 0.15s ease;
}
.signupForm input[type="submit"]:hover{
	background:#f1e767;
}

This is we done with the form. Hope you get more idea from this CSS Tutorial and try to implement in a more good looking way.