Create Stylish Sign-Up Form with HTML & CSS

Published by StudyMuch on January 18, 2022January 18, 2022

HTML TUTORIAL NO:23

Create Stylish Sign-Up Form with HTML & CSS

Sigh Up Form In HTML

In this tutorial learn and make a beautiful and stylish Login and Sigh Up Form with the uses of HTML and CSS.

HTML Form can be used to collect data from user and Login and Sigh Up form is also collecting the user data in server for login any website and Software Application.

Now we make a beautiful and stylish Login and Sign-Up form with HTML and styling through CSS, we can make them look attractive.

Sign Up Form

First, we create Sign Up Form, we create in Sign Up form input type, input data from the user are Name, Username, E-mail and Password.

HTML Code of Sign-Up Form

<!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">
    <title>Sign Up <Form></Form></title>
</head>
<body>
<p style="text-align: center;"><b>Sign Up</b></p>
        <form action="action.html">
            <div class="form-container">
            <div class="form-s">
 <i class="material-icon">person</i>
 <input type="text" required
name="name" placeholder="Name">
            </div>
            <div class="form-s">
 <i class="material-icon">face</i>
  <input type="text" required
name="username" placeholder="Username">
            </div>
          <div class="form-s">
  <i class="material-icon">email</i>
  <input type="email" required
name="useremail" placeholder="Email">
            </div>
            <div class="form-s">
  <i class="material-icon">lock</i>
  <input type="password" required
name="password" placeholder="Password ">
            </div>
            <div class="form-s">
             <input
type="submit" value="Sign Up">
            </div>
            </div>
        </form>
</body>
</html>

CSS Code of Sign-Up Form

Here we see the HTML Sign-Up Form Styling with CSS Stylesheet.

/*Stylesheet of Sign Up Form*/
*{box-sizing:border-box;}
        html, body {
         margin: 0;
         padding: 0;}
        p{
            color: darkgreen;
            font-size: 30px;
        }
        .form-container{ margin: 20px;
            padding: 15px;
            background: rgb(7, 25, 87);
            color: rgb(3, 30, 61);
            box-shadow: 5px 10px 20px black;
            border-bottom-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            border-top-left-radius: 20px;
        }
        .form-s{
            display: flex;
            margin-bottom: 15px;
        }
        .form-s > i{
            min-width: 40px;
            padding: 10px;
            text-align: center;
            background: rgb(243, 243, 182);
            color: rgb(6, 92, 39);
            border: 1px
solid rgb(250, 250, 183);
            border-bottom-left-radius: 20px;
            border-top-left-radius:20px ;
        }
        .form-s:hover > i{
         background: #0076ff;
         color: white;}
        .form-s > input[type="text"], .form-s >
         input[type="email"] , 
       .form-s > input[type="password"]{
         outline: none;
         border: none;
         padding: 10px;
         border: 1px
solid rgb(247, 247, 247);
         border-top-right-radius: 20px;
         border-bottom-right-radius: 20px;
         width: 100%;
         }
         .form-s > input[type="submit"]
         {
            border:none;
         border-radius: 20px;
         outline:none;
         width: 75%;
         margin: 0auto;
         font-size: 105%;
         padding: 8px
         color: #0076ff;
         background: white;
         transition-duration: .5s;         
         }
         .form-s > input[type="submit"]:hover{
             color: white;
             background: #048d1b;
             border: 1px
solid white;
             font-weight: bold;
             }
             .material-icon{
                font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Before the Run code don’t forget to link together HTML coding and CSS coding. Here you can see the out of above programming HTML and CSS both, output is a attractive and stylish Sign-Up Form.

Mobile view of Sign-Up Form.

Desktop View of Sign-Up Form, it is responsive Sign-Up form.

In This tutorial we learn coding and output of HTML and CSS Sign UP Form, stylish and attractive Sign-Up Form, you can be also creating this type of Sign-Up form and advance of this Form. In Next Tutorial we learn Login Form. Learn coding of Login Form-

Read Also-

Learn and Create Login Form with HTML & CSS.
Learn HTML YouTube Video with examples.
HTML Table with programming Example.
Learn HTML Form all Input Type.
Learn HTML Audio with Example.
Learn HTML Dropdown List.

13 Comments

steels · May 17, 2022 at 7:36 pm

Admiring tһe persistence уоu put into your blog and dｅtailed information you providе.

It’s great to come acr᧐ss a blog every once in a while
that iѕn’t the same out of date reһashed mаterial.
Grеat read! I’ve saved your site and I’m
including your RSS feeds to my Google aｃcount.

zoritoler imol · July 1, 2022 at 6:08 am

It’s appropriate time to make some plans for the long run and it’s time to be happy. I have read this submit and if I could I desire to suggest you few interesting issues or tips. Maybe you could write subsequent articles referring to this article. I wish to read more things about it!

Richardvurne · July 28, 2022 at 4:30 pm

I am not sure where you’re getting your info, but good topic. I needs to spend some time learning more or understanding more.
Thanks for great info I was looking for this information for my mission.

gralion torile · August 6, 2022 at 10:08 am

Howdy! I just want to give a huge thumbs up for the good information you have got right here on this post. I might be coming back to your blog for extra soon.

zoritoler imol · September 23, 2022 at 2:16 am

My brother recommended I might like this blog. He was totally right. This post actually made my day. You can not imagine just how much time I had spent for this info! Thanks!

Rozella · November 29, 2022 at 4:18 am

Thank you for the ɡood writеup. It in fact wwas a
amusemｅnt account it. Loоk advanced to faг added agreeable from you!
However, how could wee communicate?

doxycyclinevurne · December 2, 2022 at 10:30 am

I’m not sure where you’re getting your information, but good topic. I needs to spend some time learning more or understanding more.
Thanks for magnificent information I was looking for this info for my mission.

ampicillinvurne · December 12, 2022 at 1:50 pm

I am not sure where you’re getting your information, but good topic. I needs to spend some time learning more or understanding more.
Thanks for magnificent information I was looking for this info for my mission.

animexxx · February 28, 2023 at 12:30 pm

Hi there, I enjoy reading all օf your article
post. I wanted to write a little comment tօ support you.

โดจิน · March 5, 2023 at 10:35 am

What’ѕ up colleagᥙes, pleasant piece ᧐f wｒiting
and good urging commented here, I am really enjoying by these.

eimi fukada · March 13, 2023 at 9:18 am

Verʏ good post. I am dealing with a few of
these issues aѕ well..

โดจิน · March 15, 2023 at 9:48 am

I aⅼways used to read post in news рapers ƅut now as I am a user of internet so from now I am using net for articles օr reviews, thanks to web.

doujin · March 21, 2023 at 6:18 pm

I’m really enjߋying the desіgn and ⅼayout of your website.
It’s a very еasy on the eyes whіch makes it much more enjoyabⅼe for me
to cⲟme here and visit more often. Did you hire out a deveⅼoⲣer to
create your theme? Exceptional work!

Create Stylish Sign-Up Form with HTML & CSS