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.
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.
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 and ends with .
The visible part of the HTML document is between
and </body.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.
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("");
}
In this CSS code we have styled the tag defined in HTML code. Set the alignment and size for text positioning of the text field and text area. Setting the height & width for the table. Let us look at the Output.
Summary:
We have created an Registration Form. 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.
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 Himanshu Singh
Top comments (0)