Create Registration Form only
HTML & CSS
Enrollment or sign-up structure is the program where clients need to fill in their subtleties for getting their own id and secret phrase to pass into the specific site, application, or website page.
We should view the offered picture for our enrollment or hint up structure layout. There are a sum of four information fields where clients need to fill in their subtleties and acknowledge the agreements then they can tap on the register currently button. At the base, there are a few text and connections for clients to divert into the login structure.
Video Tutorial of Registration Form
Registration Form [Source Codes]
To Create a Registration Form with HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title> Registration form </title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="wrapper">
- <h2>Registration</h2>
- <form action="#">
- <div class="input-box">
- <input type="text" placeholder="Enter your name" required>
- </div>
- <div class="input-box">
- <input type="text" placeholder="Enter your email" required>
- </div>
- <div class="input-box">
- <input type="password" placeholder="Create password" required>
- </div>
- <div class="input-box">
- <input type="password" placeholder="Confirm password" required>
- </div>
- <div class="policy">
- <input type="checkbox">
- <h3>I accept all terms & condition</h3>
- </div>
- <div class="input-box button">
- <input type="Submit" value="Register Now">
- </div>
- <div class="text">
- <h3>Already have an account? <a href="#">Login now</a></h3>
- </div>
- </form>
- </div>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: "Open Sans", sans-serif;
- }
- body{
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #282A35;
- }
- .wrapper{
- position: relative;
- max-width: 500px;
- width: 100%;
- background: #f2f2f2;
- padding: 40px;
- border-radius: 8px;
- }
- .wrapper h2{
- position: relative;
- font-size: 30px;
- font-weight: 600;
- color: #606060;
- }
- .wrapper form{
- margin-top: 30px;
- }
- .wrapper form .input-box{
- height: 55px;
- margin: 18px 0;
- }
- form .input-box input{
- height: 100%;
- width: 100%;
- outline: none;
- padding: 0 17px;
- font-size: 18px;
- font-weight: 400;
- color: #333;
- border: 1.5px solid #C7BEBE;
- border-bottom-width: 2.5px;
- border-radius: 8px;
- transition: all 0.3s ease;
- }
- .input-box input:focus,
- .input-box input:valid{
- border-color: #fff;
- }
- form .policy{
- display: flex;
- align-items: center;
- }
- form h3{
- color: #707070;
- font-size: 14px;
- font-weight: 500;
- margin-left: 10px;
- }
- .input-box.button input{
- color: #fff;
- letter-spacing: 1px;
- border: none;
- background: #209BEE;
- cursor: pointer;
- }
- .input-box.button input:hover{
- background: #0e4bf1;
- }
- form .text h3{
- color: #333;
- width: 100%;
- text-align: center;
- }
- form .text h3 a{
- color: #209BEE;
- text-decoration: none;
- }
- form .text h3 a:hover{
- text-decoration: underline;
- }
If you face any difficulties while creating your Registration Form or your code is not working as expected, you can download the source code files by clicking on the download button.