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

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"  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?

CodePudding user response：

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>

CodePudding user response：

Add default styling to your form.

Either do it inline:

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

Or in a css file/tag:

#testForm {
  display: none;
}

This will cause your form to be hidden by default. Then when your "showForm()" function is triggered, the style gets overridden and the form is displayed.