DEV Community

Cover image for HTML Transparent Form
Rutik Bhoyar
Rutik Bhoyar

Posted on

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).


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

function myFunction() {

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 (

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


    /*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;

    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;

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

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

    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.

Top comments (0)