In this post, we are going to see how to create a Registration form in HTML. As everyone knows HTML is a basic markup language to create the structure of the webpage. No matter whichever language is used to make a webpage interactive but a basic design of a webpage inevitably demands HTML.

So, forms are used to gather the data of a user of a website. Creating a Registration Form in HTML is an easy and simple job. However, further Webpage can be stylized using CSS. Now, let us see the step by step process of creating a Registration Form in HTML:

Create an Input Field Boxes

<!DOCTYPE html>
<html>
<head>
	<title>Registration Form in HTML</title>
</head>
<body>
<form>
<input type="text" placeholder="Enter Your Name">
</form>
</body>
</html>

Explanation: To create a form in HTML, <form> tag is used and all the codes for the form are written within this tag. Inside the <form> tag, <input> tag with a type attribute with value ‘text’ is used to create an input box. The placeholder attribute is used to indicate the specific type of data such as Name, Email, Mobile number, Password, etc., to be entered in the input box.

<input type="email" placeholder="Enter your Email Address">
<input type="mobile" placeholder="Enter your Mobile Number">
<input type="password" placeholder="Enter your Password">


Explanation: Different input type attribute values  are used to create different types of input boxes such as for Email address, 'email' for Mobile number 'mobile' for Password 'password' and many more.

Create a Radio Button

<input type="radio" id="male" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" value="female">
<label for="male">Female</label><br>
<input type="radio" id="other" value="other">
<label for="male">Other</label><br>

Explanation: For Radio Buttons input type with value 'radio' is used and a certain value is assigned. A <label> tag is used to assign a label to the Radio button.

Create a Dropdown list of Options

label for="Colors">Choose a Color:</label>

<select id="Colors">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>

Explanation: <select> tag is used with <option> tag to create a dropdown list. The value attribute is given to the <option> element.

See also: What is an array in javascript?

Create a Submit Button

<input type="submit" value="Submit">

Complete Codes for Registration Form in HTML

<!DOCTYPE html>
 <html> 
 <head> 
 	<title>Registration Form in HTML</title> 
 	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 </head> 
 <body> 
 	<form class="text-center"> 
 	<h3><b>Registration Form in HTML</h3></p>
 	Name: &nbsp;<input type="text" placeholder="Enter Your Name"><br><br>
        Email: &nbsp;<input type="email" placeholder="Enter your Email Address"> <br><br>
        Mobile: &nbsp;<input type="mobile" placeholder="Enter your Mobile Number"><br><br>
        Password:&nbsp;<input type="password" placeholder="Enter your Password"><br><br>
<label for="Gender">Gender:</label><br>
<input type="radio" id="male" value="male"> 
<label for="male">Male</label><br> 
<input type="radio" id="female" value="female"> <label for="male">Female</label><br>
 <input type="radio" id="other" value="other"> <label for="male">Other</label><br><br>

<label for="Colors">Choose a Color:</label> 
<select id="Colors">
   <option value="red">Red</option>
   <option value="blue">Blue</option>
<option value="green">Green</option> 
<option value="yellow">Yellow</option> </select><br><br>
<input type="submit" value="Submit">
</form>
</body> 
</html>

Example:

Registration form in HTML

Similarly, you Create a Login Form in HTML

Important: If you are viewing this post in the Mobile device, kindly horizontally slide the code snippets to view the full code snippets, or rather you can option ‘Extern’ to open the code snippets in the new tab. You may copy the complete code snippets for your use.

I hope, this article Helps.

Thanks for Visiting. “Mistakes are obvious”, so ‘please feel free to make us know in the Comment section if you find any error in this post.

More from this Blog:

Avatar

By Rahulwebdev

Hello! I am Rahul Raj. A tech blogger and an enthusiastic web developer. Sharing my skills through my blog. Keen to learn various Programming Languages. " Programming is Poetry".