Skip to content
Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Animation
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • How To
  • Resources
  • Contact us
Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Animation
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • How To
  • Resources
  • Contact us

Create Beautiful Looking Registration Form in HTML

by Ashfaq Ahmed
Registration Form in HTML
Demo Download

In this tutorial, we are going to tell you how you can create Registration Form using HTML and CSS3. We will create two Registration forms —  the first one is simple — and another one has Icons with each input field.

The icons we have used are font icons. These registration forms are simple, clean and attractive.

These registration forms are simple, clean code and unique in design. You can be utilized it into your website and customize it as you need.

If you are looking for more forms collection, then this 40+ beautiful sign-up forms is the best collection I found on the internet. They posted a lot of forms free and premium as well.

The signup forms used on websites to allow the site visitors to create an account and build their profile. It depends on upon you what benefit you will give to the users who register on your website.

Some site used such form to provide more access to the user such as download files or post article etc. Anyway, Let’s have a look, how we can create them.

How to Create Registration Form in HTML

Let’s start with registration form HTML code. Both forms code added inside the div class name cclogin.

For simple form, we have added class simple next to cclogin and for icon style form , we have added class icons next to cclogin.

The input fields of the form are inside the p tag. let’s have a look block of HTML code.

Let’s add some placeholders

<p><input type="text" name="Username" value="" placeholder="Username"></p>
<p><input type="password" name="password" value="" placeholder="Choose your password"></p>
<p><input type="password" name="cpassword" value="" placeholder="Confirm password"></p>
<p><input type="text" name="Email" value="" placeholder="Email"></p>

But if you see the demo, I have to make the first name and last name fields small and fit them into one row. To make them like that we have added half class into p the tag.

<p class="half"><input type="text" name="fname" value="" placeholder="First Name"></p>
<p class="half last"><input type="text" name="lname" value="" placeholder="Last Name"></p>

As I said you before that, another Form is icon style form. In this form, we have used a similar technique which we have previously used in Simple HTML5 Contact Form As you know we are using font icon so we have added it to span tag.

<p>
<span class="cclogin-addon"><i class="fa fa-user fa-2x fa-spin"></i></span>
<input type="text" name="Username" value="" placeholder="Username">
</p>

Forms Styling with CSS

First of all, we will take a look at style-sheet of icons. For icons, we have used  CSS :before selector.

.fa-user:before {
content: "\f007";
}
.fa-key:before {
content: "\f084";
}
.fa-envelope:before {
content: "\f0e0";
}

Let’s see styling of the fields

.cclogin input[type="text"],
.cclogin input[type="password"],
.cclogin select{
padding:10px;
width:100%;
border:none;
height:50px;	
line-height:50px;
color:#757575;
}

The form fields without icons have 100% width, but for the fields without have 92% width, this is because we require space to add icons before the input fields.

To make the fields small, we just have added class .half into p the tag and set it’s width to 48%. For second field we have added .last class next to .half class so we can make the margin-right:0%; in the CSS.

.cclogin .half {
float: left;
width: 48%;
margin-right:4%
}
.cclogin .half.last{
margin-right:0%;	
}

The icons used in the demo are from the Font Awesome set by Davegandy and they are licensed under the CC BY 3.0 license. Hope you enjoy this CSS3 user register Form. Leave the comment to let us know.

You Might Be Interested In:

You might also like

  • Create a Comment Box in HTML and CSS
    Comment Box in HTML & CSS Code
  • Responsive Automatic Image Slider with CSS
    Responsive Automatic Image Slider with CSS
  • HTML Expand Collapse Text without JavaScript
    HTML Expand Collapse Text without JavaScript
  • Responsive Accordion using Pure CSS
    Responsive Accordion using Pure CSS
  • Pure CSS Slideshow Autoplay without Javascript
    Pure CSS Slideshow Autoplay without JavaScript
  • Pure CSS Responsive Vertical Tabs
    Pure CSS Responsive Vertical Tabs
  • CSS Percentage Circle
    Pure CSS Percentage Circle With Animation
  • HTML Image Zoom on Click using JavaScript
    HTML Image Zoom on Click using JavaScript
  • Horizontal News Ticker using Pure CSS
    Horizontal News Ticker using Pure CSS
  • Pure CSS 3D Coverflow Image Slider
    Pure CSS 3D Coverflow Image Slider

Popular Topics

CSS Overlay Image Slider Slide Animation CSS Gallery Progress Bar Flip Animation Sticky Header Parallax Background
  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions
© 2025 Codeconvey.com - All rights reserved.