title: How to turn a DIV into a form element?
body: <p>I'm new to world of forms! I had made divs and css for the exact layout I want for the forms. Is there anyway to maybe just turn that div tag into button or a text field while still using the same css rules so the layout doesn't change? </p>
  
  <p>Here is some code and demo to just check what I have going on.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="loginContainer"&gt;
      &lt;div id="loginForm"&gt;
          &lt;div id="login"&gt;&lt;/div&gt;
          &lt;div id="loginUsername"&gt;&lt;/div&gt;
          &lt;div id="loginPassword"&gt;&lt;/div&gt;
          &lt;div id="loginSubmit"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="registerForm"&gt;
          &lt;div id="register"&gt;&lt;/div&gt;
          &lt;div id="registerName"&gt;&lt;/div&gt;
          &lt;div id="registerEmail"&gt;&lt;/div&gt;
          &lt;div id="registerPassword"&gt;&lt;/div&gt;
          &lt;div id="registerPasswordConfirm"&gt;&lt;/div&gt;
          &lt;div id="registerSubmit"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#loginContainer {
      width: 50%;
      height: 50%;
      position: absolute;
      left: 21.8%;
      top: 40%;
      z-index:-9999;
  }
  #loginForm {
      width:47.5%;
      height: 100%;
      float:left;
      top: 0%;
      position:relative;
  }
  #login {
      width: 100%;
      height: 10%;
      top: 0;
      background-image:url(../_images/_login/login.png);
      background-size: 100% 100%;
      position: absolute;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  #loginUsername {
      width: 100%;
      height: 10%;
      top: 15%;
      background-color: #383d3f;
      position: absolute;
      border-radius: 5px;
  }
  #loginPassword {
      width: 100%;
      height: 10%;
      top:30%;
      background-color:#383d3f;
      position:absolute;
      border-radius: 5px;
  }
  #loginSubmit {
      width: 100%;
      height: 10%;
      top: 45%;
      background-color:#76c2bb;
      position:absolute;
      border-radius: 5px;
  }
  #registerForm {
      width:47.5%;
      height: 100%;
      float:right;
      top: 0%;
      position:relative;  
  }
  #register {
      width: 100%;
      height: 10%;
      top:0%;
      background-image:url(../_images/_register/register.png);
      background-size: 100% 100%;
      position:absolute;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  #registerName {
      width: 100%;
      height: 10%;
      top:15%;
      background-color:#383d3f;
      position:absolute;
      border-radius: 5px;
  }
  #registerEmail {
      width: 100%;
      height: 10%;
      top: 30%;
      background-color:#383d3f;
      position:absolute;
      border-radius: 5px;
  }
  #registerPassword {
      width: 100%;
      height: 10%;
      top: 45%;
      background-color:#383d3f;
      position:absolute;
      border-radius: 5px;
  }
  #registerPasswordConfirm {
      width: 100%;
      height: 10%;
      top: 60%;
      background-color:#383d3f;
      position:absolute;
      border-radius: 5px;
  }
  #registerSubmit {
      width: 100%;
      height: 10%;
      top: 75%;
      background-color:#76c2bb;
      position:absolute;
      border-radius: 5px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/7w1adgko/" rel="nofollow">CLICK FOR DEMO</a></p>