Update:- New tutorial added in HTML section. How to Create Responsive Login Page in HTML without Bootstrap?

How to create signup form in HTML?

View Live Demo

Create signup form with step by step learning method. That helps to you learn HTML and CSS language together. How to create signup page in html? just follow the below step by step learning method.

If you found any difficulty in this tutorial, then you can ask any question by posting comment in comment box.

signup form

Step 1.

Open Notepad or Adobe Dreamweaver or any other Html editor. I am using Dreamweaver. I will suggest to you, use Notepad editor for better practise.

Step 2.

Copy the below complete HTML code and paste it in your editor. 


  <!DOCTYPE html>
  <html>
  <head>
  <title>Welcome To Registration Form</title>
  </head>

	<body>
	<!-- Main div code -->
	<div id="main">
	<div class="h-tag">
	<h2>Create Your Account</h2>
	</div>
	<!-- create account div -->
	<div class="login">
	<table cellspacing="2" align="center" cellpadding="8" border="0">
	<tr>
	<td align="right">Enter Name :</td>
	<td><input type="text" placeholder="Enter user here" class="tb" /></td>
	</tr>
	<tr>
	<td align="right">Enter Email ID :</td>
	<td><input type="text" placeholder="Enter Email ID here" class="tb" /></td>
	</tr>
	<tr>
	<td align="right">Enter Username :</td>
	<td><input type="text" placeholder="Enter Username here" class="tb" /></td>
	</tr>
	<tr>
	<td align="right">Enter Password :</td>
	<td><input type="password" placeholder="Enter Password here" class="tb" /></td>
	</tr>
	<tr>
	<td align="right">Enter Confirm Password :</td>
	<td><input type="password" placeholder="Enter Password here" class="tb" /></td>
	</tr>
	<tr>
	<td></td>
	<td>
	<input type="reset" value="Clear Form" id="res" class="btn" />
	<input type="submit" value="Create Account" class="btn" /></td>
	</tr>
	</table>
	</div>
	<!-- create account box ending here.. -->
	</div>
	<!-- Main div ending here... -->
	</body>
	</html>

Step 3.

Now apply the CSS to all Elements for better presentation. First create CSS <style> .. </style> tag in between <head> .. </head> tag like below. 


    <head>
    <style type="text/css">
    
    all css code come here....
    
    </style>
    </head>

Now copy the below CSS code and paste it in between <style> .. </style> tag. 


    /* body css for whole page */
    body
    {
	    margin:0px;
	    background-color:#f26724;
	    background-image:url(image/background.jpg);
	    color:#f9fcf5;
	    font-family:Arial, Helvetica, sans-serif;
    }
    
    #main{width:600px; height:auto; overflow:hidden; padding-bottom:20px; margin-left:auto; margin-right:auto; 
    border-radius:5px; padding-left:10px; margin-top:100px; border-top:3px double #f1f1f1; 
    border-bottom:3px double #f1f1f1; padding-top:20px;
    }
    
    #main table{font-family:"Comic Sans MS", cursive;}
    /* css code for textbox */
    #main .tb{height:28px; width:230px; border:1px solid #f26724; color:#fd7838; font-weight:bold; border-left:5px solid #f7f7f7; opacity:0.9;}
    
    #main .tb:focus{height:28px; border:1px solid #f26724; outline:none; border-left:5px solid #f7f7f7;}

    /* css code for button*/
    #main .btn{width:150px; height:32px; outline:none;  color:#f7f7f7; font-weight:bold; border:0px solid #f26724; 
    text-shadow: 0px 0.5px 0.5px #fff; border-radius: 2px; font-weight: 600; color: #f26724; letter-spacing: 1px; 
    font-size:14px; background-color:#f1f1f1; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
  
    #main .btn:hover{
	background-color:#f26724; outline:none;  border-radius: 2px; color:#f1f1f1; border:1px solid #f1f1f1;
    -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; 
	}

Step 4. Final Step

Now save your page with any name with .html extension. Like registration-page.html. After saving the file, open the file by double clicking on it and see your final output.

View Live Demo
PREVIOUS
NEXT

Post Your Comment

↑