title: How to have one input field replace another when the initial is submitted?
body: <p>I am making a simple login form for a website, initially, the username field will show with the submit button. When the submit button is pressed, the username form should disappear and the password form should replace it. I have the following code:</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;!-- Username form --&gt;
      &lt;div id="form1"&gt;
      &lt;form&gt;
          &lt;input type="text" id="username" name="username"&gt;
          &lt;input type="submit" value="" onclick="switchForm()"&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  &lt;!-- Password form --&gt;
      &lt;div id="form2"&gt;
      &lt;form&gt;
          &lt;input type="password" id="password" name="password"&gt;
          &lt;input type="submit" value="" onclick="#"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code> function switchForm() {
          document.getElementById("form1").style.display = "none";
          document.getElementById("form2").style.display = "block";
  }
  </code></pre>
  
  <p>Don't worry about the form not doing anything, I will worry about that later. I just need help with the transition. Thanks!</p>