Registration Form UI Design using HTML and CSS

Hello Developers, We offer you an exceptional Registration Form UI Design snippet, meticulously crafted to present your information with style and efficiency. Our snippet is a testament to precision, utilizing HTML and CSS to create a visually appealing and functional registration form. With our snippet, you can effortlessly incorporate all essential fields, from user credentials to personal information, ensuring a smooth and user-friendly registration process. A well-designed registration form elevates the aesthetics of your website and provides a seamless start to the user experience.Responsive and adaptable, our Registration Form UI Design snippet guarantees optimal display across all devices, whether it's a desktop, laptop, tablet, or smartphone.By utilizing our HTML & CSS Registration Form UI Design snippet, you're not just gathering information – you're showcasing your commitment to professionalism and contemporary web design. It's your chance to shine and engage with the world. Experience the difference with our Registration Form UI Design snippet and redefine your online presence today!

How to make Registration Form UI Design using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <title>Responsive Registration form Using HTML & CSS</title> <meta content="Responsive Registration card Using HTML & CSSt. Made by learningrobo.com" name="description"></meta> <meta content="learningrobo.com" name="author"></meta> <meta content="form,responsive,learningrobo.com,html & css projects,project,registration form" name="keywords"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <link href="#" rel="icon" type="image/x-icon"></link> <meta charset="UTF-8"></meta> <link href="styles.css" rel="stylesheet"></link> <script crossorigin="anonymous" src="https://kit.fontawesome.com/5d72166fb5.js"></script> </head> <body>  <div class="container"> <div class="p1"> <header>REGISTRATION FORM</header> <form action="#" class="form"> <div class="column"> <div class="input-box"> <label for="#">Full Name</label> <input placeholder="Enter your name" required="" type="text" /> </div> <div class="input-box"> <label for="#">Date of Birth</label> <input id="date" name="date" required="" type="date" /> </div> <div class="input-box"> <label for="#">Email</label> <input placeholder="Enter your e-mail" required="" type="number" /> </div> </div> <div class="column"> <div class="input-box"> <label for="#">Mobile Number</label> <input placeholder="### ### ####" required="" type="text" /> </div> <div class="input-box"> <label for="#">Gender</label> <div class="select-box"> <select> <option>Gender</option> <option>Male</option> <option>Female</option> </select> </div> </div> <div class="input-box"> <label for="#">Occupation</label> <input placeholder="Enter Occupation" required="" type="text" /> </div> </div> <br /> <header>Identity Details</header> <br /> <div class="column"> <div class="input-box"> <label for="#">ID Type</label> <input placeholder="Eg: laptop" required="" type="text" /> </div> <div class="input-box"> <label for="#">ID Number</label> <input placeholder="Eg: 292991820" required="" type="text" /> </div> <div class="input-box"> <label for="#">Authority of Issue</label> <input placeholder="Enter issue Department" required="" type="text" /> </div> </div> <div class="column"> <div class="input-box"> <label for="#">Issue date</label> <input id="date" name="date" required="" type="date" /> </div> <div class="input-box"> <label for="#">Issue State</label> <input placeholder="Eg:Tamil Nadu" required="" type="text" /> </div> <div class="input-box"> <label for="#">Expiry Date</label> <input id="date" name="date" type="date" /> </div> </div> <button>SUBMIT</button> </form> </div> </div> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/">learningrobo</a></div>  </body> </html>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    box-sizing: border-box;
}
.container{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
body{
    min-height: 100vh;
    background: linear-gradient(to top right , rgb(222, 143, 143) ,rgb(248, 50, 50));
}
.p1{
    position: relative;
    max-width: 1000px;
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    width: 100%;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    margin: auto;
}
.p1 header{
    font-size: 1.5em;
    color: #fffcfc;
    font-weight: 500;
}
.p1 .form{
    margin-top: 30px;
}
.p1 .input-box{
    width: 100%;
    margin-top: 20px;
}
.input-box label{
    color: #ff0000;
}
.form :where(.input-box input,.select-box){
    position: relative;
    height: 50px;
    width: 100%;
    outline: none;
    font-size: 1rem;
    color: #746969;
    margin-top: 8px;
    border: 1px solid #020202;
    border-radius: 6px;
    padding: 0  15px;
}
.input-box input:focus{
    box-shadow: 0 1px 0  rgba(0,0,0,0.1);
}
input[type=text]:hover{
    box-shadow: 0 0 5pt 0.5pt #D3D3D3;
  }
  input[type=text]:focus {
    box-shadow: 0 0 5pt 2pt #D3D3D3;
    outline-width: 0px;
  }
.form .column{
    display: flex;
    column-gap: 15px;
}
.address :where(input,.select-box){
    margin-top: 20px;
}
.select-box select{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    color: #707070;
    font-size: 1rem;
    border-radius: 6px;
}
.form button{
    height: 45px;
    width: 30%;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: rgb(245, 119, 119);
    color: rgb(255, 255, 255);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.form button:hover{
    transform: scale(1.04);
    box-shadow: -3px -3px 7px #3b413e,3px 3px 5px #636778;
    background: red;
}
.credit a {
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
  
.credit {
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:#000;
    font-size:20px;
} 
@media screen and (max-width:600px) {
    .form .column{
        flex-wrap: wrap;
    }
}

We hope you would like this Registration Form UI Design using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Registration Form UI Design using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.

Registration Form UI Design using HTML and CSS

Explore

Post a Comment

Learning robo

UI & UX Front-end Developement

Skills

Learning robo

tools grid

Responsive Review Section using HTML & CSS

Responsive Birthday Card Design using HTML & CSS

How to create a Stunning Personal Profile Card with Tables using HTML and CSS

Contact Form

Registration Form UI Design using HTML and CSS

Explore

You might like

Post a Comment

tools grid

Contact Form