Create Registration Form Using HTML And CSS

Its features:

• You can attach more information lines as needed.


• You can change the model color via CSS if you want.


• To move the form to the right or left of the page, use "float: left" or "float: right".


• You can use different type font styles as you wish.

Try to create like yourself by following the codes below :

Step 1) Add to head : <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/ all.css"integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
Step 2) Add to html : <h2>Create Registration Form With HTML And CSS</h2> <div class="fifteen"> <div class="main-block"> <h1>Registration</h1> <form action="/"> <hr> <div class="account-type"> <input type="radio" value="none" id="radioOne" name="account" checked/> <label for="radioOne" class="radio">Personal</label> <input type="radio" value="none" id="radioTwo" name="account" /> <label for="radioTwo" class="radio">Company</label> </div> <hr> <label id="icon" for="name"><i class="fas fa-envelope"></i></label> <input type="text" name="name" id="name" placeholder="Email" required/> <label id="icon" for="name"><i class="fas fa-user"></i></label> <input type="text" name="name" id="name" placeholder="Name" required/> <label id="icon" for="name"><i class="fas fa-unlock-alt"></i></label> <input type="password" name="name" id="name" placeholder="Password" required/> <hr> <div class="gender"> <input type="radio" value="none" id="male" name="gender" checked/> <label for="male" class="radio">Male</label> <input type="radio" value="none" id="female" name="gender" /> <label for="female" class="radio">Female</label> </div> <hr> <div class="btn-block"> <p>By clicking Register, you agree on our <a href="https://asma64.com"> Privacy Policy for Someone.com</a>.</p> <button type="submit" href="/">Submit</button> </div> </form> </div> </div>
Step 3) Add to css : .fifteen{ display: flex; justify-content: center; height: 100%; float: } .fifteen, div, h1, form, input, p { padding: 0; margin: 0; outline: none; font-family: Roboto, Arial, sans-serif; font-size: 16px; } h1 { padding: 10px 0; font-size: 32px; font-weight: 300; text-align: center; } p { font-size: 12px; } hr { color: white; opacity: 0.3; } .main-block { max-width: 340px; min-height: 460px; padding: 10px 0; margin: auto; border-radius: 5px; border: solid 10px #ccc; box-shadow: 1px 2px 5px rgba(0,0,0,.31); background: #3cae85; } form { margin: 0 30px; } .account-type, .gender { margin: 15px 0; } input[type=radio] { display: none; } label#icon { margin: 0; border-radius: 5px 0 0 5px; } label.radio { position: relative; display: inline-block; padding-top: 4px; margin-right: 20px; text-indent: 30px; overflow: visible; cursor: pointer; } label.radio:before { content: ""; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #6a5a5b; } label.radio:after { content: ""; position: absolute; width: 9px; height: 4px; top: 8px; left: 4px; border: 3px solid #fff; border-top: none; border-right: none; transform: rotate(-45deg); opacity: 0; } input[type=radio]:checked + label:after { opacity: 1; } input[type=text], input[type=password] { width: calc(100% - 57px); height: 36px; margin: 13px 0 0 -5px; padding-left: 10px; border-radius: 0 5px 5px 0; border: solid 1px #cbc9c9; box-shadow: 1px 2px 5px rgba(0,0,0,.09); background-image: linear-gradient(#bbb, #ddd, #bbb); } input[type=password] { margin-bottom: 15px; } #icon { display: inline-block; padding: 9.3px 15px; box-shadow: 1px 2px 5px rgba(0,0,0,.09); background-image: linear-gradient(#9c6b5a, #b67f6d, #9c6b5a); color: #fff; text-align: center; } .btn-block { margin-top: 10px; text-align: center; } button { width: 100%; padding: 10px 0; margin: 10px auto; border-radius: 5px; border: none; background-image: linear-gradient(#6a5a5b,#9c6b5a,#6a5a5b); font-size: 14px; font-weight: 600; color: #fff; } button:hover { background: #e7a553; }