Skip to main content

Form using HTML and CSS , javscript responsive and animated

 Form using HTML and CSS , javascript Responsive and animated


Dear student if you practice with source so it will very simple way to learn coding .
here you will get web developing code like javascript ,html ,css,
and also java programming language .
 

Please  share this side,s link to your  friends and your relative.

you can preview of this source code  on clicking  video play_bottom.

Please see this video on full resolution.



Try now this source code through copy and paste

Note :Here picture of top will not show in your PC you can select any other 

here because this will not save in your PC


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0px;
            margin: 0px;
        }
        
        body {
            background-image: url("chess_pieces_fighting_board_88519_1280x720.jpg");
            background-position: center;
            background-size: cover;
            height: 100vh;
        }
        
        form {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 400px;
            width: 350px;
            text-align: center;
            border-radius: 15px;
            box-shadow: white 0px 0px 3px, red 0px 0px 3px, red 
0px 0px 3px, red 0px 0px 3px, red 0px 0px 3px, red 0px 0px 3px, red 3px 3px 3px;
            background-color: black;
            opacity: 0.78;
        }
        
        input[type="text"] {
            background-color: black;
            color: #ddd;
            font-weight: bold;
            margin-top: 20px;
            padding: 5px 5px 5px 5px;
            border-radius: 15px;
            font-stretch: ultra-expanded;
            width: 190px;
            text-align: center;
            border: none;
            transition: width 0.6s ease-in-out;
            box-shadow: white 0 0 5px, aqua 0 0 5px, aqua 0 0 5px, 
aqua 0 0 5px, aqua 0 0 5px, aqua 0 0 5px, aqua 0 0 5px, aqua 0 0 5px;
        }
        
        input[type="email"] {
            background-color: black;
            color: #ddd;
            font-weight: bold;
            box-shadow: white 0 0 6px, rgb(102, 4, 4)
 0 0 6px, rgb(102, 4, 4) 0 0 6px, rgb(102, 4, 4) 0 0 6px,
 rgb(102, 4, 4) 0 0 6px, rgb(102, 4, 4) 0 0 6px, rgb(102, 4, 4) 0 0 6px;
            margin-top: 20px;
            padding: 5px 5px 5px 5px;
            border-radius: 15px;
            font-stretch: ultra-expanded;
            width: 190px;
            transition: width 0.6s ease-in-out;
            border: none;
            text-align: center;
        }
        
        input[type="password"] {
            box-shadow: white 0 0 5px, green 0 0 5px, green 0 0 5px, green 0 0 5px, green 0 0 5px, green 0 0 5px, green 0 0 5px;
            text-align: center;
            background-color: black;
            color: #ddd;
            padding: 5px 5px 5px 5px;
            border-radius: 15px;
            transition: width 0.6s ease-in-out;
            margin-top: 20px;
            font-weight: bolder;
            width: 190px;
        }
        
        input[type="password"]:focus {
            width: 240px;
        }
        
        input[type="email"]:focus {
            width: 240px;
        }
        
        input[type="text"]:focus {
            width: 240px;
        }
        
        input[type="submit"] {
            background-color: black;
            width: 190px;
            padding: 5px 5px 5px 5px;
            border-radius: 15px;
            margin-top: 30px;
            font-weight: bolder;
            color: white;
            letter-spacing: 3px;
            border: none;
            box-shadow: white 0 0 5px, red 0 0 5px, red 0 0 5px,
 red 0 0 5px, red 0 0 5px, red 0 0 5px, red 0 0 5px, red 0 0 5px;
        }
        
        input[type="submit"]:hover {
            background-color: red;
            font-weight: bolder;
            letter-spacing: 3px;
            transition: background 0.4s ease-in-out;
        }
        
        input[type="checkbox"] {
            color: white;
            margin-top: 10px;
            margin-right: 35px;
            background-color: blue;
        }
        
        #heading {
            font-size: 40px;
            margin-left: -75px;
            margin-top: 70px;
            color: white;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <form>
        <div id="inp">
            <div id="heading" contenteditable="true" spellcheck="true">Login</div>
            <input type="text" placeholder="Name" name="user_name" required><br>
            <input type="email" placeholder="Email" name="user_email" required><br>
            <input type="password" id="Password" placeholder="Password" min="6" max="6" name="user_password" onclick="value=''" required><br>
            <input type="checkbox" name="show_me_password" onclick="myFunction()">
            <label style="color: white; margin-left: -29px;">Show me password</label>
            <br>
            <input type="submit" name="user_form_submit" value="DONE"
 onclick="done()">

        </div>
        <script>
            function myFunction() {
                var x = document.getElementById("Password");
                if (x.type === "password") {
                    x.type = "text";
                } else {
                    x.type = "password";
                }

            }

            function done() {
                alert("Your form submited, Thank for this");
            }
        </script>




    </form>

</body>

</html>
Labels:

Comments

Post a Comment

Popular posts from this blog

Top 10 Data Analysis Tools For Your Business with Review Rated

  Top 10 Data Analysis Tools For Your Business with   Review and Rated            Data analysis  is one of the most backbone of the any success business now a days . you can not predict a success business without data analysis.  indirect or direct every business involve in Data analysis.  every business organization  want to make his own approach in the whole market through this Data analysis .  Example : what will demand of any product in Future    according to previous selling product or on demand  products  that why every business organization or business needs Data analysis . Here we will see that top 10 ten Data analysis Tools for your any business and if you are student and you are  interest to learn Data analysis and you need any free data analysis tool for exercise so don't  worry you will get two free tools with download link at the last of this all tools in this web page . There are ...
Post a Comment
Read more

Function in Python programming language

  Function in Python? In Python, a function is a group of related statements that performs a specific task. Functions help break our program into smaller and modular chunks. As our program grows larger and larger, functions make it more organized and manageable. Furthermore, it avoids repetition and makes the code reusable. Syntax of Functio n def function_name ( parameters ): """ docstring """ statement(s) Above shown is a function definition that consists of the following components. Keyword  def  that marks the start of the function header. A function name to uniquely identify the function. Function naming follows the same rules of writing identifiers in Python. Parameters (arguments) through which we pass values to a function. They are optional. A colon (:) to mark the end of the function header. Optional documentation string (docstring) to describe what the function does. One or more valid python statements that make up the function body. Stateme...
Post a Comment
Read more

Fahrenheit temperature and Kelvin changing in Celsius temperature with text in speech

Fahrenheit temperature and Kelvin changing in Celsius temperature with out in speech If you want of this source code in java language so click on it Get  How to speech of output : first we need to  import gtts and playsound package in python our code editer because in this program we want to speech of every output . then we will save of this variable with  obj.save( "any_name.mp3" )    and we also want to speech of this. after saving of this. we write like this  playsound( "any_name.mp3" )   for speech of obj.save. It is only for Text speech you can also use of this code-source for text -speech  #librery which by we can change text in speech in present of internt your system from gtts import gTTS #import playsound for play text speech from playsound import playsound #syntax of this is variable_name=gTTS(text="your text ", lang='language' ,slow=True or False) obj=gTTS( text = "text here for speeching ok my dear " , lang = '...
Post a Comment
Read more