How can I make an HTML Form be hidden when entering the webpage?

Issue

I am trying to make a form that opens upon clicking a button, and close upon clicking a button.

To achieve this, I made the following code:

function showForm() {
  document.getElementById('testForm').style.display = 'block';
}


function closeForm() {
  document.getElementById('testForm').style.display = 'none';
}

<button type="button" class="btn btn-primary shadow" onclick="showForm()">Add Expense</button>

<form id="testForm">
  <input type='text' placeholder="Test">
  <button onclick="closeForm()">Close Form</button>
</form>

However, the form is automatically displayed upon entering the website, instead of being automatically hidden and displaying the form upon clicking the Add Expense button. How would I approach this?

Solution

You can add a custom class or style attribute on your to be hidden on page load like below.

<form id = "testForm" style="display:none;">
        <input type = 'text' placeholder = "Test">
        <button onclick = "closeForm()">Close Form</button>
    </form>

Answered By - Aditya Akella