This is a simple registration form design only using HTML tags. We have designed the same form using Bootstrap classes. Have a look here.
<html>
<head>
<title>Registration Form</title>
</head>
<style>
table{
border: 1px solid black;
padding: 20px;
}
</style>
<body>
<center>
<form method="post">
<h3>Registration Form</h3>
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Email Id</td>
<td><input type="email" name="emailid" id="emailid" placeholder="Enter your email id"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="number" name="phone" id="phone" placeholder="Enter mobile number"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="date" name="dob" id="dob" ></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" id="male" value="male">Male
<input type="radio" name="gender" id="female" value="female">Female
</td>
</tr>
<tr>
<td>Photo</td>
<td><input type="file" name="phote" id="photo" accept="image/*"></td>
</tr>
<tr>
<td>Country</td>
<td>
<select name="country" id="country">
<option>Select your country</option>
<option>India</option>
<option>Nepal</option>
<option>Srilanka</option>
<option>USA</option>
<option>UK</option>
<option>Canada</option>
</select>
</td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" id="address" placeholder="Enter address" ></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
<td>Already user?<a href="Login.html">Login here</a></td>
</tr>
</table>
</form>
</center>
</body>
</html>
I have tried to implement the maximum number of elements that are being used in the basic registration form.
In the next blog, we will see the implementation of Bootstrap on these basic form designs.
Video Tutorial coming soon...
Hope this blog finds you useful. Thank you.
