DEV Community

loading...
Cover image for HTML Transparent Form

HTML Transparent Form

rutikab12 profile image Rutik Bhoyar ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And now we are ready with our transparent html form.
Alt Text

Hope it will help you.

Discussion (0)

pic
Editor guide