HTML Transparent Form

Every time I used to see any transparent form somewhere in websites , always desired to built one by own. I know there can many budding developers are out there like me to help them here is one simple project for them.

Tags Used
1.The <div> tag defines a division or a section in an HTML document.

2.The <form> tag is used to create an HTML form for user input.

3.The <script> tag is used to embed a client-side script (JavaScript).

HTML CODE

<html>
<head>
    <title>Form Html</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/f7a6f8989f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="myForm" action="#">
<div class="container">
    <h1>Login</h1>
    <div class="box">
        <i class="fa fa-user"></i>
        <input type="text" name="email" id="email" placeholder="Enter Your Name">
    </div>
    <div class="box">
        <i class="fa fa-unlock"></i>
        <input type="password" name="password" id="password" placeholder="Enter Your Password">
    </div>
    <button class="btn" onclick="myFunction()">Submit  </button>

</div>
</form>
<script>
function myFunction() {
  document.getElementById("myForm").submit();
}
</script>

</body>
</html>

Now we will do some CSS stuff as follows. You can choose image of your choice. I will not explain CSS attributes for that you can refer (https://w3schools.com).

*{
    margin: 0;
    padding: 0;
}
@media only screen and (max-width: 1800px){
body{
    background:url('pexels.jpg') no-repeat center center fixed;
    background-size: cover;

}
}

.container{
    /*border:4px solid black;*/
    color: black;
    position: absolute;
    top: 28%;
    left: 20%;

}

.container h1{
    width: 50%;
    display: inline-block;
    font-size: 35px;
    border-bottom: 5px solid purple;
    padding: 12px;
    margin-bottom: 25px;
    text-align: center;
}

.box{
    width: 100%;
    /*border: 2px solid grey;*/
    border-bottom: 2px solid purple;
    margin: 12px 0;
}

.box input{
    background: none;
    width: 90%;
    padding: 10px 0;
    margin:11px 0; 
    font-size: 20px;
    border:none;
    outline:none;
    color:black;      
}

.btn{
    font-size: 15px;
    font-weight: bold;
    color: grey;
    background: none;
    cursor: pointer;
    outline:none;
    padding: 10px 21px;
    margin: 12px 0;
    border-radius: 10px;
}

box i{
    /*padding: 0 12px;*/
    width: 25px;
    float: left;
    text-align: center;
}

.btn:hover{
    opacity: 0.5;
    background: white;
    color: skyblue;
}

And now we are ready with our transparent html form.

Hope it will help you.

Blog

HTML Transparent Form

Rutik Bhoyar

Join Our Newsletter. No Spam, Only the good stuff.

Related