HTML Code For Registration Form Using Table
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Ashish
In this tutorial we will show you the solution of HTML code for registration form using table, in last article we cover the articles like, how to create registration form with or without CSS, student’s registration from, registration form with validation, registration form with database.
As, we want to say that we cover many articles about registration forms. But in all of them we use directly or indirectly label and inputs. Indirectly means with the help of div.
It means that we did not cover registration form with table. So, today our article is about html code for registration form using table.
Step By Step Guide On HTML Code For Registration Form Using Table :-
Now, here we are going to create a form in html, the form is registration form and inside form all the concepts are done with the help of table.
One more thing here is you can directly create a table with two columns and borders with a submit button.
Or you can create a table without border and in the td’s you can add labels and inputs.
The way may be any but the point is same to create a registration form using table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="inner">
<div class="welcome">
Registration Form
</div>
<div class="registration_options">
<form action="" method="post">
<table class="table">
<tr>
<td>
Enter your name here
</td>
<td>
<input type="text" name="name" id="">
</td>
</tr>
<tr>
<td>
Enter your email id here
</td>
<td>
<input type="email" name="email" id="">
</td>
</tr>
<tr>
<td>
Enter your password here
</td>
<td>
<input type="password" name="pass" id="">
</td>
</tr>
<tr>
<td>
Confirm your password here
</td>
<td>
<input type="text" name="cpass" id="">
</td>
</tr>
</table>
<div class="btn">
<input type="submit" value="Submit" id="save">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Css file: style.css
.main{
height: auto;
width: 100%;
}
.inner{
width: 80%;
height: 580px;
border: 1px solid white;
box-shadow: 0 0 10px black;
margin: 30px auto 30px auto;
}
.welcome{
text-align: center;
padding: 20px;
font-size: 40px;
font-family: cursive;
border-bottom: 1px solid black;
background-color: black;
color: white;
}
.table{
border: none;
text-align: center;
width: 100%;
margin: auto;
margin-top: 100px;
}
.table tr{
text-align: center;
}
.table td{
font-size: 22px;
font-family: cursive;
line-height: 2em;
text-align: center;
}
.table td input{
padding: 2px 55px;
text-align: center;
border: none;
width: 200px;
border-bottom: 2px solid black;
}
.btn{
text-align: center;
}
#save{
font-size: 25px;
background-color: black;
color: white;
padding: 5px 35px 5px 35px ;
border: none;
margin-top: 60px;
}
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page.
- In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, we create a registration form with the help of form tag and method used is post. Under form we create table, and inside table tr is used know as table row.
- In each tr, we create two td. In first td, we create a label whereas in other we create inputs.
- At last a button is created there to submit form data.
- The rest work is done with the help of CSS. CSS used here is external with name style.css. The file is linked to main registration form with the help of link tag. You can see head tag for reference.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that after this article we are able to create an html code for registration using table.
We hope that you understand form and table combination. This is better way to create a form. I hope this tutorial on HTML code for registration form using table helps you.
About Ashish
