Show/Hide a form on button click is a cool effect for web pages. So, in this article, we will show you how to show/hide a form on button click using JavaScript. Read on it now.
How to show/hide a form on button click using JavaScript?
Here are some simple ways that we would recommend to you.
Using display property
The display property allows you to specify the appearance of elements differently from their default settings.
The block value of the display property turns an element into a block element. The block element takes up 100% of the parent width, and we can see the block elements.
The none value of the display property hides the element and all its children from the page. We cannot see and manipulate the element whose display is none.
First, we hide our form with display: none
, then call onclick on the button element and assign it a function to change the form’s display property. If the form’s display is none, we change it to block and vice versa.
<body> <main id="app"> <button class="btn">Show learnshareit form</button> <form style="display: none"> <div class="form-control"> <label>Username</label> <input type="text" placeholder="Your username" /> </div> <div class="form-control"> <label>Password</label> <input type="password" placeholder="Your password" /> </div> </form> </main> <script src="script.js"></script> </body>
// Get the form and the button elements const form = document.querySelector("form"); const btn = document.querySelector(".btn"); // Change the form's display property by clicking the button btn.onclick = function () { if (form.style.display === "none") { // Change the display of the form to block form.style.display = "block"; // Change the text of the button btn.innerText = "Hide learnshareit form"; } else { // Change the display of the form to none form.style.display = "none"; // Change the text of the button btn.innerText = "Show learnshareit form"; } };
Output:

Using visibility property
We can use the visibility property to replace the display property. Compared to the display property, the advantage of the visibility property is that it does not change the surrounding elements, so the form’s visibility will not change our button position. Observe the example below and its output for better understanding.
First, we add the style to the form tag as follows:
<form style="visibility: hidden">
Then use JS to hide/show the form with the visibility property as follows:
// Get the form and the button elements const form = document.querySelector("form"); const btn = document.querySelector(".btn"); // Change the form's visibility by clicking the button btn.onclick = function () { if (form.style.visibility === "hidden") { // Change the visibility of the form to visible form.style.visibility = "visible"; // Change the text of the button btn.innerText = "Hide learnshareit form"; } else { // Change the visibility of the form to hidden form.style.visibility = "hidden"; // Change the text of the button btn.innerText = "Show learnshareit form"; } };
Output:

As you can see, our button no longer moves up and down like the output of the first method.
Using opacity property
Like the visibility property, the opacity does not change the surrounding elements. But we can still manipulate the hidden element with the opacity property because it’s just invisible.
In the HTML file, we hide the form tag with the opacity as follows:
<form style="opacity: 0">
In the js file, we switch back and forth between the 0 and 1 values of the opacity property to hide/show an element. Like this:
// Get the form and the button elements const form = document.querySelector("form"); const btn = document.querySelector(".btn"); // Change the form's opacity by clicking the button btn.onclick = function () { if (form.style.opacity === "0") { // Change the opacity of the form to 1 form.style.opacity = "1"; // Change the text of the button btn.innerText = "Hide learnshareit form"; } else { // Change the opacity of the form to 0 form.style.opacity = "0"; // Change the text of the button btn.innerText = "Show learnshareit form"; } };
Output:

When hovering over two inputs, our cursor is changed, proving that the form tag is invisible and we can still manipulate it.
Summary
There are three ways to hide an element: display property, visibility property, and opacity property. Through this article, you not only know how to show/hide a form on button click using JavaScript but also know the difference between the three properties above so that you can choose the most suitable one for you.
Thank you for reading!
Maybe you are interested:
- Clear a Textarea on Button click using JavaScript
- Show/Hide an element on Radio button Selection using JS
- Show/hide a div element by id using javascript

Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java