All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Registration Form Design In Html And CSS With Code

Last Updated : Mar 11, 2024

Registration Form Design In Html And CSS With Code

In this tutorial we will show you the solution of registration form design in HTML and CSS with, as we know css used to style html elements, here we used internal style method to show demo.

We added gradient background on body of html webpage then we defined square shape transparent box with register form details of ‘Email ID, Password and submit button’.

Using css styles we designed our register form with responsive layout.

Step By Step Guide On Registration Form Design In HTML And CSS With Code :-

We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.

In our program we defined register form with ‘mail id, password and submit’ input fields.

This form developed with responsively so it layout can’t break at any size and form is designed using css.

The div tags defined for align form to the center of page and another div tag defined for insert all input fields with proper alignments.

<!DOCTYPE html>
<html>
    <head>
        <title>REGISTER FORM</title>
        <style>
            body{
                margin: 0;
                padding: 0;
                background-image: linear-gradient(to top left,rgb(114, 248, 241),rgb(236, 133, 247),rgb(140, 140, 252));
                height: 40rem;
                background-repeat: no-repeat;
            }
            .formbg{
                width: 600px;
                height: 400px;
                overflow: hidden;
            }
            .middle{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .form{
                width: 500%;
                height: 100%;
                background-color: rgba(254, 250, 250, 0.21);
            }
            input:not(:last-child){
                background-color: transparent;
                border: 0;
                padding: 8px 1rem;
                border-bottom: 1px solid rgb(112, 111, 111);
            }
            input:last-child{
                cursor: pointer;
                padding: 8px 1rem;
                background-color: #fff;
                border: 0;
                border-radius: 20px;
            }
            .in1,.in2,.in3{
                display: block;
                left: 50%;
                position: absolute;
                transform: translate(-50%,-50%);
            }
            h1{ position: absolute;
                left: 35%;
                color: #fff;
            }
            .in1{
                top: 40%;
            }
            .in2{
                top: 55%;
            }
            .in3{
                top: 75%;
            }
</style>
    </head>
    <body>
       <div class="formbg middle">
        <div class="form">
                <h1>REGISTER</h1>
                <input type="text" placeholder="Mail ID" class="in1" required>
                <input type="text" placeholder="Password" class="in2" required>
                <input type="submit" value="Submit" class="in3">
        </div>
       </div>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Within <style> tag we defined block of styles. First we sets body ‘padding and margin’ to value ‘0’ then added gradient color to the body background. It consist of three colors and height sets to ‘40rem’,using ‘no-repeat’ avoids repeated background.
  5. Using div ‘formbg’ with styles ‘width-600px,height-400px and overflow-hidden’ sets registration form layout. Class ‘middle’ with styles ‘position:absolute;top:50%;left:50%;transform:translate: translate(-50%,-50%);’ used to align form body to the center of webpage properly.
  6. The div with class ‘form’ used to set ‘width to 500%, height to 100% and background-color to white shade with low opacity’.
  7. Pseudo class ‘input:not(:last-child)’ used to for allow all input fields except last input. The input fields of ‘email,password’ background set to ‘transparent color’, ‘border to ‘0’ so border removed from input fields’, border sets at bottom only with grey color by ‘border-bottom: 1px solid rgb(112, 111, 111);’.
  8. The pseudo class ‘input:last-child’ refers last input field of ‘submit’ button and styles ‘cursor: pointer;’ used to make cursor with ‘pointer symbol’, background color sets to ‘#fff’, border removed by ‘border:0;’ and ‘border-radius:20px; used to make curve edges up to ‘20px’ size’.
  9. The classes ‘.in1,.in2,.in3’ together used to sets common styles for them. Within that we defined ‘display: block;’ style used to make each input field separately, ‘left: 50%;’ aligned commonly from left 50%, ‘position: absolute;’ needs to set as absolute because we aligning input fields on ‘absolute’ form. Those are aligned inputs to center of form.
  10. The <h1> tag alignment from left to ‘35%’ and it color sets to ‘#fff’. When sets element position to ‘absolute’ all elements will aligned one on another one so we have to set each one position direction. So we sets each inputs ‘.in1,.in2,.in3’ separately from top to value respectively.
  11. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  12. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  13. Here we defined two <div> tags form proper alignment of form and within that we defined input fields and <h1> tag with text ‘Register’ then those are styled by as we seen at point 4.
  14. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how create responsive registration form using html and css.

When we load our program we can see responsive background with form.

In form we one heading and two input fields ‘mail id and password’ with creative design.

When we resize window screen size to any size our background and form will responsively appeared so we can open this website on any device.

Using css try to explore more creative webpage layout design with your own thoughts.

I hope this tutorial on registration form design in HTML and CSS with code helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪