Registration Form in HTML

HTML forms are an essential component found across numerous websites today, serving various purposes like user authentication, registrations, feedback collection, and more. These forms facilitate the collection of valuable data and information from visitors to your site.

HTML forms are constructed using special elements known as ‘controls.’ These controls encompass a range of options such as text areas, radio buttons, checkboxes, and submit buttons, enabling users to input their details effectively. Users can modify the provided information by entering texts, selecting specific items, and performing other relevant actions by interacting with these controls. Once the form is completed, it can be submitted, leading to different outcomes such as data addition, transmission, redirection to another page, or even storage of the details in a database.

HTML forms are an interactive and user-friendly means to engage website visitors. They facilitate seamless communication and data exchange between users and website owners, empowering businesses to gather crucial insights and enhance user experience.

How to Create HTML Form?

Creating HTML forms involves using the

element, which serves as the container for the form content. Along with other HTML elements, such as

,

, and , you can design a fully functional form. Additionally, CSS can be utilized to enhance the appearance and user experience. Note: If you are new to web development and looking to learn how to write basic HTML code, we have an article on designing a web page in HTML. It provides a step-by-step guide to writing HTML code.

The main points discussed in this article for designing a web page in HTML are:

1. How to set up your project?
2. How to start with the HTML structure?
3. How to add content to the body?
4. How to structure your content?
5. How to save your HTML file?
6. How to view your web page?

Following is a basic syntax for an HTML Form.

Syntax:

form elements like submit or reset buttons, input, text area etc.

Example of Registration Form in HTML

Let’s see some examples of registration forms using HTML:

Example 1: Simple Registration Form

Here’s an example of creating a simple HTML registration form.

Code:

<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
p {
text-align: center;
color: #777;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #ccc;
}
a {
color: #337ab7;
text-decoration: none;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.container.signin {
text-align: center;
color: #777;
}
</style>

Register Here

Please fill in the details to create an account with us.

---

Enter Email Password Confirm Password

---

By creating an account you agree to our Terms & Privacy.

Register

Already have an account? Sign in.

Output:

Registration Form: Validations

To ensure users input their email address, we will include a validation code that triggers a pop-up if they attempt to submit the form without completing the email field, regardless of the password and confirmation input.

The keyword ‘required’ with an element indicates that the element must be filled. We will add this keyword to our text field, ‘Email,’ and see the result below;

<input type="text" placeholder="Enter Email" name="email" required>

Similarly, you’ll need to do for Password and Confirm Password fields.

<input type="password" placeholder="Enter Password" name="pwd" required>
<input type="password" placeholder="Confirm Password" name="confirm" required>

Output:

Example 2: Job Application Registration Form

Here’s an example of creating a Job Application Registration Form in HTML.

Code:

<title>Job Application Registration Form</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #72b7f4;
}
h2 {
color: #232729;
text-align: center; /* Center align the title */
}
form {
background-color: #bfddf7;
max-width: 500px;
margin: 0 auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
color: #333333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
background-color: #ffffff; /* Set background color to white */
}
select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
input[type="submit"] {
background-color: #1a73e8;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0059b3;
}
</style>


<h2 id="Job-Application-Registration">Job Application Registration</h2>

Full Name: Email Address: Phone Number: Resume (PDF or Word): Position Applied: Select Position Frontend Developer Backend Developer Graphic Designer

Output:

Example 3: Hotel Registration Form

Here’s an example of creating a Hotel Registration Form in HTML.

Code:

<title>Hotel Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0bd9d;
padding: 20px;
}
form {
max-width: 500px;
margin: 0 auto;
background: linear-gradient(to bottom right, #fff, #f1f1f1);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.form-row {
margin-bottom: 20px;
}
.form-row label {
display: block;
margin-bottom: 5px;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input[type="submit"] {
padding: 10px 20px;
background: linear-gradient(to bottom right, #db4340, #ff6f00);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>


<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Hotel Image"   style="max-width:90%">

Name

Email ID

Phone Number

Number of Guests

Check-in Date

Check-out Date

Room Type Select Room Type Single Double Suite

Output:

The above is the detailed content of Registration Form in HTML. For more information, please follow other related articles on the PHP Chinese website!