How to create Sign Up form in HTML using HTML and CSS

By
For creating Sign Up form I use VS Code Editor to edit the codes.
Download link for VS Code: Click Here to download

I have used the external CSS Method so the files can be differentiate here.

 First open editor and create new file for writing:
<!DOCTYPE html>
<html>
    <head>
        <title>Sign Up Form</title>
<link rel="stylesheet" href="style.css">
</head>
    <body background="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" text="white">
        <form action="" method="">
            <div class="Container">
                <div class="login-box">
                    <div class="centered">
                        <label id="L1" for="uname">Username</label>
                        <br>
                        <input type="username" name="uname" maxlength=25 placeholder="Enter Username" required>
                        <br><br>
                        <label id="L2" for="pass">Password</label>
                        <br>
                        <input type="password" name="pass" maxlength=15 placeholder="Enter Password" required>
                        <br><br>
                        <label id="L3" for="mobile">Mobile No.</label>
                        <br>
                        <input type="number" name="mobile" maxlength=11 placeholder="Enter Mobile No." required>
                        <br><br>
                        <button type="submit" value="submit" id="B1">Submit..</button>
                        <br><br>
                        <span class="acc">Already have an account? <a href="#">Sign In</a></span>
                    </div>
                </div>
            </div>
        </form>
</body>
</html>

Now the CSS file that is linked to the HTML file is below here: The file name is "style.css". You can change name of it but also change it in the html file.

#L1{font-size:20px}
#L2{font-size:20px}
#L3{font-size:20px}
#B1{height:40px; width: 90px; position:relative; left:15%}
   .login-box
     {
         width:250px;
         height:320px;
         background: rgba(0, 0, 0, 0.322);
         color:#fff;
         top:45%;
         left:50%;
         position:absolute;
         transform:translate(-50%, -50%);
         box-sizing: border-box;
     }
   .centered
     {
         position:relative;
         top:45%;
         left:60%;
         transform: translate(-50%, -50%);
     }
   .acc
     {
         font-size: 15px;
     }

 # is used to define the element using ID and the .class name is used to define element using their class.

Watch youtube video of the above HTML code: Click Here to Watch . 

Comments

Post a Comment

Popular posts from this blog

What is AI

By
Image
            AI(Artificial Intelligence)  Humans are evolving day by day and has made progress in the field of computer science. The concept of AI was given by Kaplan and Haenlein. It was first founded in the year 1956. Till the date AI has improved a lot. They think to use the AI means Artificial Intelligence as natural intelligence. You would have seen many things like AI camera , AI refrigerator, AI vehicles, etc. In AI the system works on the learning and problem solving. AI uses the artificial system power and make the things beautiful. AI needs a good processor and Processing speed. If the sensor senses the thing and make same thing like that is AI. AI includes many things like machine intelligence, natural intelligence, congnitive intelligence, emotional intelligence, social intelligence, etc. Every other system has other intelligence system. The AI is working on its own. It senses its own things, it recognize the things and make...
Read more

What is Lunar Library??

By
Image
Till the date mankind has made very progress in every field and has progressed itself a lot. But if we think that if the world face any disaster or if anything happens like the time of dinosaurs. Every thing submerge into the land and everything lost. The researchers has made a Lunar Library in which all the data of every thing which is made by human till the date is stored. The Lunar Library is a nano chips which has made of Nickel element and is 40 micron small. It is going to be launched by Arch Mission Foundation on moon. This foundation is going to launch this chips to the surface of the moon and is going to store all the data on moon. The Lunar Library has 30 million page Archive or human and human civilization. All this data is stored in 25 Chips of 100 grams. That can resembles the 120mm DVD. There are 60000 thousand analog images containing in it. This all the work is done under Israel Government. This space craft will launch in the month of April 2019. All this wo...
Read more

Google Smart Glass

By
Image
Google has invented many products and from that products Google smart glass is also one of the great product. This was Publicly launched in the year 2013. This glass has many functions and the content which is to be shown is projected to the glass. It has an optical head mounted display which is designed as pair of eyeglasses. It was developed by Google X. The mission was ubiquitous computer. It can be get connected to smartphone and use it as hands free. The glasses can be connected with internet and it can communicate with us with natural language. Google has started to make the prototype of this product and first Google's founder Sergey Bran had wore the prototype of that first time. It has a heads up display and it was  weighted 3.5kg. The eyeglasses were too heavy if we want to wear it on our eyes. The Google glass has 5MP camera and it can shoot videos on 720p. It has 2GB of RAM and 16GB of internal memory. This glass was working on its own operating system which was Gla...
Read more