Introduction
The user interface incorporates the HTML registration form, which includes various input fields for gathering personal details such as gender, contact information, email address, and password. These fields are displayed and validated through CSS as the default styling mechanism.
Approach
- The registration form on the HTML page involves first name, last name, email address, password, and other input fields.
- The use of visual compositions of layout, spacing, colors, borders, and alignment of elements is done better by applying CSS styles to each one of them.
- It brings a constant display with a flexbox that centers the form both horizontally and vertically inside the viewport.
- As a means to make sure that all required fields are completed before submitting the form, the required property has been applied to input fields.
- Upon submission, the form data is sent to the server with a clickable button that is hooked up to CSS .
HTML Structure for the Registration Page
For a clearer understanding, we will delineate the procedure in the following sections.
To start, we will make an html file that will use this basic HTML code as a template. <head> tag opens up, and immediately inside of it, the <title> tag is located. When the title of the present web display is represented in the tab's name, the information kept in the <title> tag will appear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register</title>
</head>
<body></body>
</html>
Let us now add a Top of Form<form> tag inside the <body> element. Bottom of Form We will apply the <form> tag to include our form. Form tags in HTML ensure that any form may be built using them. The action and method of the form are the very primary desirable properties that a form tag has alongside the other attributes. To let the system know where the data should be taken after submission, the action attribute is specified, and we use the URL as a form. Further, to the contrary, the method leftward of the attribute signifies HTTP methods such as GET and POST that should be used to deliver the form data. We are going to insert 2 div tags within the form to standardize the fields. Here is where the title, description, inputs, and the submit button can be found in one division.
This is how the code appears inside the tag:
<form>
<div></div>
<div></div>
</form>
In the following steps, we will operate inside the first div tag. First, let's give our form a title and a description. Write "Register" as the heading for our registration form in a <h1> tag. Next, write "Kindly fill in this form to register" as the description of our form in a <p> tag. <p> tags often are used to create long paragraphs or text descriptions while <h1>, <h2>, <h3>, and <h4> are designed as title or heading tags.
<form>
<div>
<h1>Register</h1>
<p>Fill out the form to register.</p>
</div>
<div></div>
</form>
Output
Let us now include the fields for the password, email address, and username, and another field for typing the password again. These are added in the form of two input tags and labels. The user's information is inserted with <input> tags, while the input fields are labeled with <label> tag. An attribute of that label tag gives the nature of the related entity. Strong texts are bolded now by using the <b> tag within the <label> tag. The primary attributes of the input tag are five.
- The type is a representation of the type of data entered into the input field. It may consist of characters, text, email, passwords, etc. For instance, the user won't be able to enter text into the input box if the type is set to a number.
- placeholder provides the user with a quick indication of the type of data that is expected in the input field. As soon as the user begins entering data, it disappears.
- After the form is submitted, the entity entered in the input field is referred to by its name .
- id , as the name implies, it acts as the element's unique identifier.
- required attribute is a boolean value that indicates if the user must enter data or not. The user must submit data in any fields where needed attributes are indicated inside the input element; otherwise, the webpage will display a default error message. As you can see below, we have made a label and input field pair for entering the username.
<form>
<div>
<h1>Register</h1>
<p> Fill out the form to register.</p>
<!-- label for username -->
<label for="username"><b>Username</b></label>
<!-- input field for username -->
<input
type="text"
placeholder="Enter username."
name="username"
id="username"
required
/>
</div>
<div></div>
</form>
Output
As illustrated in the example below, it is possible to add a tag that matches the input fields for the password, email, and password confirmation.
<form>
<div>
<h1>Register</h1>
<p> Fill out the form to register.</p>
<!-- label and input for username -->
<label for="username"><b>Username</b></label>
<input
type="text"
placeholder="Enter username"
name="username"
id="username"
required
/>
<!-- label and input for email -->
<label for="email"><b>Email</b></label>
<input
type="text"
placeholder="Enter Email"
name="email"
id="email"
required
/>
<!-- label and input for password -->
<label for="pwd"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pwd"
id="pwd"
required
/>
<label for="pwd-repeat"><b>Repeat Password</b></label>
<input
type="password"
placeholder="Repeat Password"
name="pwd-repeat"
id="pwd-repeat"
required
/>
</div>
<div></div>
</form>
Output
Next, illustrated in the code snippet provided below, users who are submitting their information will encounter a submit button within the initial section. This button allows them to send the details they have entered in the registration form.
<form>
<div>
<h1>Register</h1>
<p> Fill out the form to register.</p>
<label for="username"><b>Username</b></label>
<input
type="text"
placeholder="Enter username"
name="username"
id="username"
required
/>
<label for="email"><b>Email</b></label>
<input
type="text"
placeholder="Enter Email"
name="email"
id="email"
required
/>
<label for="pwd"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pwd"
id="pwd"
required
/>
<label for="pwd-repeat"><b>Repeat Password</b></label>
<input
type="password"
placeholder="Repeat Password"
name="pwd-repeat"
id="pwd-repeat"
required
/>
<!-- submit button -->
<button type="submit">Register</button>
</div>
<div></div>
</form>
Output
Finally, we have the option to navigate to the login page through the second division enclosed within the form element. To accomplish this, we can enclose the text within the <a> tag within the <p> tag in the manner shown below:
<form>
<div>
<h1>Register</h1>
<p> Fill out the form to register.</p>
<label for="username"><b>Username</b></label>
<input
type="text"
placeholder="Enter username"
name="username"
id="username"
required
/>
<label for="email"><b>Email</b></label>
<input
type="text"
placeholder="Enter Email"
name="email"
id="email"
required
/>
<label for="pwd"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pwd"
id="pwd"
required
/>
<label for="pwd-repeat"><b>Repeat Password</b></label>
<input
type="password"
placeholder="Repeat Password"
name="pwd-repeat"
id="pwd-repeat"
required
/>
<button type="submit">Register</button>
</div>
<div>
<p>Already have an account? <a href="#">Log in</a>.</p>
</div>
</form>
Output
CSS Styling for the Registration Page
The basic structure of the registration form has been effectively built. Next, we will enhance its appearance by applying CSS styles to improve its visual presentation.
Once a CSS file has been created, it needs to be connected to the corresponding HTML file.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
<title>Register</title>
</head>
<body style="background-color:powderblue;">
</body>
Let us start by adding a few fundamental styles to the form, as indicated below. To add the required styles, choose the <form> tag inside the CSS.
form{
display: flex;
flex-direction: column;
align-items: center;
}
Next, we will assign the class "container" to the initial div tag within the form and implement it. Below is the HTML code snippet presented:
<form>
<div class="container">
<h1>Register</h1>
<p> Fill out the form to register.</p>
<label for="username"><b>Username</b></label>
<input
type="text"
placeholder="Enter username"
name="username"
id="username"
required
/>
<label for="email"><b>Email</b></label>
<input
type="text"
placeholder="Enter Email"
name="email"
id="email"
required
/>
<label for="pwd"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pwd"
id="pwd"
required
/>
<label for="pwd-repeat"><b>Repeat Password</b></label>
<input
type="password"
placeholder="Repeat Password"
name="pwd-repeat"
id="pwd-repeat"
required
/>
<button type="submit">Register</button>
</div>
<div>
<p>Already have an account? <a href="#">Log in</a>.</p>
</div>
</form>
Output
Below are the styles that have been applied to the "container" class for matching purposes. In summary, it takes up 25vw of width and organizes all elements in a vertical row layout.
.container{
display: flex;
flex-direction: column;
width: 25vw;
}
The title and description are aligned at the center of the form, as shown below.
h1, p{
text-align: center;
}
The fundamental design of the form is near completion. As illustrated below, we can proceed by incorporating the necessary fonts and adjusting the spacing for the input fields.
/* font family is added */
body {
font-family: Arial, Helvetica, sans-serif;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
width: 25vw;
}
h1, p {
text-align: center;
}
/* desired spacing for input fields */
input {
margin: 0.25em 0em 1em 0em;
}
Let us make our input fields more attractive now.
input {
margin: 0.25em 0em 1em 0em;
outline: none;
padding: 0.5em;
border: none;
background-color: rgb(225, 225, 225);
border-radius: 0.25em;
color: black;
}
To conclude, it is essential to apply basic styling to our submit button. An example of this styling, with hover effects included, is provided below.
/* styles for button */
button {
padding: 0.75em;
border: none;
outline: none;
background-color: rgb(68, 18, 232);
color: white;
border-radius: 0.25em;
}
/* hover functionality for button */
button:hover {
cursor: pointer;
background-color: rgb(41, 4, 164);
}
At last, the enrollment form has been built.
Output
The final registration form is shown below: