HOW TO MAKE A REGISTER FORM USING HTML, CSS, JAVASCRIPT

7 min readAug 5, 2023

Introduction: In the realm of web development, user registration forms play a crucial role in enabling user access to various online services and platforms. A well-designed registration form provides a seamless user experience and contributes to a website’s overall aesthetics. In this tutorial, we will walk you through the process of creating an attractive and functional registration form using HTML, JavaScript, and CSS.

Prerequisites:

Basic understanding of HTML, JavaScript, and CSS.
A text editor or integrated development environment (IDE) of your choice.

Step 1: Setting Up the HTML Structure: Let’s start by creating the basic HTML structure for our registration form. Open your preferred text editor and create a new HTML file named “registration.html.”

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <script src="app.js" defer></script>
 <title>Register</title>
</head>
<body>
 <div class="container">
 <form action="" id="form">
 <h1>Register</h1>
 <div class="input-group">
 <label for="username">Username</label>
 <input type="text" id="username" name="username">
 <div class="error"></div>
 </div>
 <div class="input-group">
 <label for="email">Email</label>
 <input type="text" id="email" name="email" >
 <div class="error"></div>
 </div>
 <div class="input-group">
 <label for="password">Password</label>
 <input type="password" id="password" name="password">
 <div class="error"></div>
 </div>
 <div class="input-group">
 <label for="cpassword">Confirm Password</label>
 <input type="password" id="cpassword" name="cpassword">
 <div class="error"></div>
 </div>
 <button type="submit">Register</button>
 </form>
 </div>
</body>
</html>

<!DOCTYPE html>: This is the doctype declaration, which specifies the version of HTML being used.
<html lang="en">: This is the opening tag for the HTML document. The lang attribute specifies the language of the document, in this case, English.
<head>: This is the opening tag for the head section of the HTML document. The head section contains meta-information about the document, such as the character encoding, viewport settings, and links to external resources.
<meta charset="UTF-8">: This meta tag specifies the character encoding for the document, which is UTF-8 in this case.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag specifies the compatibility mode for Internet Explorer.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties for responsive design, ensuring that the webpage is displayed properly on different devices.
<link rel="stylesheet" href="style.css">: This link tag is used to link an external CSS stylesheet to the HTML document. The href attribute specifies the path to the CSS file.
<script src="app.js" defer></script>: This script tag is used to link an external JavaScript file to the HTML document. The src attribute specifies the path to the JavaScript file, and the defer attribute indicates that the script should be executed after the HTML document has been parsed.
<title>Register</title>: This is the title tag, which specifies the title of the HTML document that will be displayed in the browser's title bar or tab.
<body>: This is the opening tag for the body section of the HTML document. The body section contains the visible content of the webpage.
<div class="container">: This div element with the class "container" is used to group the form elements together.
<form action="" id="form">: This form element is used to create a form. The action attribute specifies the URL to which the form data will be submitted, and the id attribute provides a unique identifier for the form.
<h1>Register</h1>: This h1 element is used to display the heading "Register" on the webpage.
<div class="input-group">: This div element with the class "input-group" is used to group each input field and its associated label and error message together.
<label for="username">Username</label>: This label element is used to create a label for the username input field. The for attribute specifies which input field the label is associated with.
<input type="text" id="username" name="username">: This input element is used to create a text input field for the username. The type attribute specifies the type of input field, the id attribute provides a unique identifier for the input field, and the name attribute specifies the name of the input field.
<div class="error"></div>: This div element with the class "error" is used to display an error message for the username input field.
The same structure is repeated for the email, password, and confirm password input fields.
<button type="submit">Register</button>: This button element is used to create a submit button for the form.
</form>: This is the closing tag for the form element.
</div>: This is the closing tag for the div element with the class "container".
</body>: This is the closing tag for the body section of the HTML document.
</html>: This is the closing tag for the HTML document.

Step 2: Styling with CSS: Now let’s create the CSS file to style our registration form. Save this file as “styles.css” in the same directory as your HTML file.

body{
    background: rgb(34,193,195);
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(121,32,153,1) 86%);
    background-attachment: fixed;
    margin:0;
    font-family: 'Poppins', sans-serif; 
}

#form{
    width:400px;
    margin:20vh auto 0 auto;
    background-color: whitesmoke;
    border-radius: 5px;
    padding:30px;
}

h1{
    text-align: center;
    color:#792099;
}

#form button{
    background-color: #792099;
    color:white;
    border: 1px solid #792099;
    border-radius: 5px;
    padding:10px;
    margin:20px 0px;
    cursor:pointer;
    font-size:20px;
    width:100%;
}

.input-group{
    display:flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.input-group input{
    border-radius: 5px;
    font-size:20px;
    margin-top:5px;
    padding:10px;
    border:1px solid rgb(34,193,195) ;
}

.input-group input:focus{
    outline:0;
}

.input-group .error{
    color:rgb(242, 18, 18);
    font-size:16px;
    margin-top: 5px;
}

.input-group.success input{
    border-color: #0cc477;
}

.input-group.error input{
    border-color:rgb(206, 67, 67);
}

This stylesheet defines various styles for elements such as the background, form layout, headings, input fields, buttons, and error messages. The styles use a combination of colors, gradients, margins, padding, and other properties to create a visually appealing form. Let’s break down the different parts of your stylesheet:

Background Styles:

The background color is defined as a linear gradient from a teal-like color to a shade of purple.
The background-attachment is set to “fixed,” which keeps the background stationary while scrolling.

2. Form Container (#form):

The form is centered both horizontally and vertically on the page.
It has a white background with rounded corners.
It has padding to create space between the content and the container edges.

3. Heading Styles (h1):

The heading (h1) is centered and has a color that corresponds to a shade of purple.

4. Button Styles (#form button):

The submit button has a purple background with white text.
It has rounded corners, padding, and a border.
The cursor changes to a pointer when hovering over the button.
The font size is relatively large.
The button occupies the full width of its container.

5. Input Group Styles (.input-group):

Input groups are displayed as columns and have a margin at the bottom for spacing.
Input fields have rounded corners, a larger font size, and padding.
The default input field border color matches the initial background color.
When focused, input fields lose the outline.
Error messages have a red color and a smaller font size, appearing below the input fields.

6. Success and Error Styles (.input-group.success and .input-group.error):

Input fields in a group with the “success” class have a green border color.
Input fields in a group with the “error” class have a red border color.

Overall, this stylesheet creates an elegant and visually appealing form with careful attention to spacing, color coordination, and responsive design. It seems to be designed for use with the “Poppins” font and features a color scheme dominated by shades of teal and purple.

Step 3: Adding Functionality with JavaScript: Finally, let’s enhance our registration form with some JavaScript functionality. Save this file as “script.js” in the same directory as your HTML file.

const form = document.querySelector('#form')
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const cpassword = document.querySelector('#cpassword');

form.addEventListener('submit',(e)=>{
    
    if(!validateInputs()){
        e.preventDefault();
    }
})

function validateInputs(){
    const usernameVal = username.value.trim()
    const emailVal = email.value.trim();
    const passwordVal = password.value.trim();
    const cpasswordVal = cpassword.value.trim();
    let success = true

    if(usernameVal===''){
        success=false;
        setError(username,'Username is required')
    }
    else{
        setSuccess(username)
    }

    if(emailVal===''){
        success = false;
        setError(email,'Email is required')
    }
    else if(!validateEmail(emailVal)){
        success = false;
        setError(email,'Please enter a valid email')
    }
    else{
        setSuccess(email)
    }

    if(passwordVal === ''){
        success= false;
        setError(password,'Password is required')
    }
    else if(passwordVal.length<8){
        success = false;
        setError(password,'Password must be atleast 8 characters long')
    }
    else{
        setSuccess(password)
    }

    if(cpasswordVal === ''){
        success = false;
        setError(cpassword,'Confirm password is required')
    }
    else if(cpasswordVal!==passwordVal){
        success = false;
        setError(cpassword,'Password does not match')
    }
    else{
        setSuccess(cpassword)
    }

    return success;

}
//element - password, msg- pwd is reqd
function setError(element,message){
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('.error')

    errorElement.innerText = message;
    inputGroup.classList.add('error')
    inputGroup.classList.remove('success')
}

function setSuccess(element){
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('.error')

    errorElement.innerText = '';
    inputGroup.classList.add('success')
    inputGroup.classList.remove('error')
}

const validateEmail = (email) => {
    return String(email)
      .toLowerCase()
      .match(
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      );
  };

The validateInputs() function starts by getting the value of each input field and trimming any whitespace. Then, it checks if each input is empty or invalid according to specific criteria.

2. If an input is invalid, the setError() function is called to display an error message and add the "error" class to the input field's parent element. If an input is valid, the setSuccess() function is called to remove any error message and add the "success" class to the input field's parent element. Finally, the function returns true if all inputs are valid, and false otherwise.

3. The setError() function takes an input element and an error message as arguments. It selects the input field's parent element and the error message element using the parentElement and querySelector() methods, respectively. Then, it sets the error message text and adds the "error" class to the input field's parent element while removing the "success" class.

4. The setSuccess() function takes an input element as an argument. It selects the input field's parent element and the error message element using the parentElement and querySelector() methods, respectively. Then, it removes any error message and adds the "success" class to the input field's parent element while removing the "error" class.

5. The validateEmail() function is a regular expression that checks if an email address is valid. Overall, this JavaScript code adds form validation to the registration form created in the HTML code. It ensures that each input field is filled out correctly before the form is submitted.

The final register form looks like this:

Congratulations! We’ve successfully created a stylish and functional registration form using HTML, JavaScript, and CSS. This story covered the basic setup of the form, styling with CSS, and adding a simple form submission functionality using JavaScript.

HOW TO MAKE A REGISTER FORM USING HTML, CSS, JAVASCRIPT

Step 1: Setting Up the HTML Structure: Let’s start by creating the basic HTML structure for our registration form. Open your preferred text editor and create a new HTML file named “registration.html.”

Step 2: Styling with CSS: Now let’s create the CSS file to style our registration form. Save this file as “styles.css” in the same directory as your HTML file.

Step 3: Adding Functionality with JavaScript: Finally, let’s enhance our registration form with some JavaScript functionality. Save this file as “script.js” in the same directory as your HTML file.

Congratulations! We’ve successfully created a stylish and functional registration form using HTML, JavaScript, and CSS. This story covered the basic setup of the form, styling with CSS, and adding a simple form submission functionality using JavaScript.

Written by Brindadevi