Telegram Group Join Now
Hello coders, A very warm welcome to Code With Random. Today we’ll create a Registration form. Now, this project we are very familiar with this because this is been introduced when we get to know about <form> tag. The form is basically a section of the document that contains markup, contents & some special elements such as radio buttons, checkboxes, menus & text areas.
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | No |
And basically, we have seen Registration forms while we are new to some sites. Earlier we use to build this using inline CSS. Now we’ll create two separate files for HTML and CSS.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Simple Student Registration Form Using HTML & CSS Source Code
ADVERTISEMENT
Let us see the coding part.
HTML Code For Registration Form:-
The Hyper Text Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is the used only for making the layout of the website.
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Portfolio Website using HTML and CSS (Source Code)
Inside the body tag we are adding the website’s main content that we can clearly see on the output screen/browser.Inside the form tag we need to add different input tags.Select tag to select the months.
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Home</title>
<link rel="stylesheet" href="Styles.css" />
</head>
<body>
<div id="bg">
<center></center>
<br />
<b
><u> <h1>STUDENT REGISTRATION FORM</h1></u>
</b>
<div id="form">
<form method="get" action="submit.html">
<table id="table">
<tr>
<td>FIRST NAME:</td>
<td>
<input
type="text"
name="username"
size="30"
maxlength="30"
placeholder="Enter first name"
/>
(max 30 characters A-Z and a-z)
</td>
</tr>
<tr>
<td>LAST NAME:</td>
<td>
<input
type="text"
name="username"
size="30"
maxlength="30"
placeholder="Enter last name"
/>
(max 30 characters A-Z and a-z)
</td>
</tr>
<tr>
<td>DATE OF BIRTH:</td>
<td>
<input
type="number"
name="day"
size="2"
maxlength="2"
placeholder="Day"
min="1"
max="31"
/>
<select name="month">
<option value="month">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<input
type="text"
name="year"
size="5"
maxlength="4"
placeholder="Year"
min="1991"
max="2005"
/>
</td>
</tr>
<tr>
<td>EMAIL ID:</td>
<td>
<input
id="email"
type="email"
name="email"
size="30"
maxlength="100"
/>
</td>
</tr>
<tr>
<td>MOBILE NO:</td>
<td>
<input
type="tel"
name="number"
size="30"
maxlength="12"
placeholder="Enter Mobile no"
/>
(10 digits number)
</td>
</tr>
<tr>
<td>GENDER:</td>
<td>
<input
id="female"
type="radio"
name="gender"
value="f"
/>
<label for="female">Female</label>
<input
id="male"
type="radio"
name="gender"
value="m"
/>
<label for="male">Male</label>
</td>
</tr>
<tr>
<td>ADDRESS:</td>
<td>
<textarea rows="4" cols="40" id="comments">
</textarea>
</td>
</tr>
<tr>
<td>CITY:</td>
<td>
<input
type="text"
name="city"
size="30"
maxlength="30"
placeholder="Enter your city name"
/>
</td>
</tr>
<tr>
<td>PIN CODE:</td>
<td>
<input
type="text"
name="pin"
size="30"
maxlength="30"
placeholder="Enter pin code"
/>
(6 digits number)
</td>
</tr>
<tr>
<td>STATE:</td>
<td>
<input
type="text"
name="state"
size="30"
maxlength="30"
placeholder="Enter your state name"
/>
</td>
</tr>
<tr>
<td>COUNTRY:</td>
<td>
<input
type="text"
name="COUNTRY"
size="30"
maxlength="30"
placeholder="Enter your city name"
/>
</td>
</tr>
<tr>
<td>HOBBIES</td>
<td>
<input
type="checkbox"
name="Singing"
value="Singing"
/>
Singing
<input
type="checkbox"
name="HOBBIES"
value="dancing"
/>
Dancing
<input
type="checkbox"
name="HOBBIES"
value="Drawing"
/>
Drawing
<input
type="checkbox"
name="HOBBIES"
value="Sketching"
/>
Sketching <br />
<input
type="checkbox"
name="HOBBIES"
value="Others"
/>
Others<input
type="text"
name="HOBBIES"
size="30"
maxlength="30"
placeholder="Enter any other hobby"
/>
</td>
</tr>
<tr>
<td>QUALIFICATION</td>
<td>
<table width="600px" , height="100px">
<tr>
<th>S.N0</th>
<th>Examination</th>
<th>Board</th>
<th>Percentage</th>
<th>Year of Passing</th>
</tr>
<tr>
<td>1.</td>
<th>Class X</th>
<td>
<input
type="text"
name="state"
size="20"
maxlength="20"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
</tr>
<tr>
<td>2.</td>
<th>Class XII</th>
<td>
<input
type="text"
name="state"
size="20"
maxlength="20"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
</tr>
<tr>
<td>3.</td>
<th>Graduation</th>
<td>
<input
type="text"
name="state"
size="20"
maxlength="20"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
</tr>
<tr>
<td>4.</td>
<th>Masters</th>
<td>
<input
type="text"
name="state"
size="20"
maxlength="20"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
<td>
<input
type="text"
name="state"
size="15"
maxlength="10"
/>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>(10 char max)</td>
<td>(upto to decimal)</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>COURSES:</td>
<td>
<input
id="BCA"
type="radio"
name="COURSES"
value="BCA"
/>
<label for="BCA">BCA</label>
<input
id="B.Com"
type="radio"
name="COURSES"
value="B.Com"
/>
<label for="B.Com">B.Com</label>
<input
id="B.Sc"
type="radio"
name="COURSES"
value="B.Sc"
/>
<label for="B.Sc">B.Sc</label>
<input
id="B.A"
type="radio"
name="COURSES"
value="B.A"
/>
<label for="B.A">B.A</label>
</td>
</tr>
<tr>
<td>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
</html>
In this HTML Code we have describe all the attributes of forms we created text field, text area, radio button, checkbox, button and form method. Let us see the HTML Output of the Registration form before writing CSS.
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
CSS Code For Registration Form:-
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. Here we are using the basic concepts of the CSS like border-box , positioning, CSS class and id selectors.
We are going to add blue as bg color and a padding of 40px and setting its position as absolute.
#bg {
background-color: blue;
border: 2px solid whitesmoke;
padding: 40px;
position: absolute;
margin-left: 340px;
margin-top: 10px;
height: 1200px;
width: 780px;
line-height: 0px;
}
h1 {
color: lightsalmon;
text-align: center;
padding: 0px;
font-size: 30px;
}
#form {
background-color: lightsalmon;
border: 2px solid black;
padding: 40px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
height: 950px;
width: 700px;
line-height: 0px;
}
#table {
height: 950px;
width: 700px;
text-align: justify;
color: white;
font-weight: bold;
font-style: normal;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
th {
text-align: center;
}
td {
padding: 2px;
justify-content: left;
}
tr {
padding: 30px;
width: 200px;
border-collapse: separate;
text-align: left;
}
#submit_p1 {
text-align: center;
font-weight: bolder;
font-size: xx-large;
color: lawngreen;
}
#submit_p2 {
text-align: center;
font-size: xx-large;
font-weight: bold;
color: purple;
}
a {
text-align: center;
font-size: xx-large;
font-weight: bold;
color: slateblue;
}
input,
select {
color: #5a5854;
background-color: #f2f2f2;
padding: 4px 4px 4px 2px;
border-radius: 10px;
margin-bottom: 1px;
}
input:focus {
background-color: #ffffff;
border: 2px solid #b1e1e4;
border-spacing: 2px 2px 2px 2px;
}
input#email {
background-image: url("images/user-logo.png");
background-repeat: no-repeat;
background-position: 1px;
background-size: 35px 35px;
padding: 4px;
margin-bottom: 10px;
}
input#twitter {
background-image: url("");
}
Final Output Of Registration Form Using Html and Css:
Summary:
We have created an HTML file. In that we have defined form tag and it method. Then we have called some special features such as text field, text area, checkbox, radio button etc. Then we have styled this thing in CSS file.
Build a Quiz App With HTML ,CSS and JavaScript
Given the position for text field, text area. Setting the width and the height for table. If you loved it do comment it boost our motivation to bring new projects for you guys. If you face any difficulty while performing let us know with the help of comment section.
Happy Coding
Written by @Harsh_9 & Himanshu Singh
Which code editor do you use for this Registration Form coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
No! this is Not a a responsive project
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
