title: css form- input/textarea styling & positioning.. code & image included
body: <p>I'm new to web design, so please forgive if this is super simple- I've tried everything I know and can't quite seem to get this right.</p>
  
  <p>I've put together a contact form using html &amp; css. Ideally, I'd like to have a 1px line extending from each label to use as an input guide. This line should be level with the bottom of the label. I'd also like a series of lines extending vertically in the text area to allow for extra writing space.</p>
  
  <p>Currently, the input lines for Name and Email aren't showing, and there is only one line at the very bottom of the textarea for Message.</p>
  
  <p>Here's the code I'm working with:</p>
  
  <pre><code>    &lt;div id="contact-form"&gt;
          &lt;div id="invite"&gt;
              &lt;h1&gt;Let's Talk.&lt;/h1&gt;
              &lt;div class="postinfo"&gt;
                  &lt;h2&gt;Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.&lt;/h2&gt;
              &lt;/div&gt;&lt;!-- end postinfo --&gt;
          &lt;/div&gt;&lt;!-- end invite --&gt;
          &lt;form&gt;
  
              &lt;label for="user"&gt;Name:&lt;/label&gt;
              &lt;input type="text" name="user" value="" /&gt;&lt;br /&gt;
  
              &lt;label for="emailaddress"&gt;Email:&lt;/label&gt;
              &lt;input type="text" name="emailaddress" value="" /&gt;&lt;br /&gt;
  
              &lt;label for="comments"&gt;Message:&lt;/label&gt;
              &lt;textarea name="comments"&gt;&lt;/textarea&gt;&lt;br /&gt;
  
              &lt;input type="submit" name="submitbutton" id="submitbutton" value="Submit" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;&lt;!-- end contact --&gt;
  
  #contact-form {
      float: left;
      margin-left: 300px;
      margin-top: 310px;
  }
  
  #invite .postinfo {
      list-style-type: none;
      width: 150px;
  }
  
  label {
      float: left;
      font-family: dalle;
      font-size: 160%;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-left: 200px;
      margin-top: -105px;
      width: 120px;
  }
  
  input, textarea {
      border-style: none;
      border-bottom: 1px solid #202020;
      margin-bottom: 5px;
      margin-left: 300px;
      margin-top: -105px;
      width: 245px;
  }
  
  textarea {
      width: 250px;
      height: 150px;
  }
  
  #submitbutton {
      background: none;
      border-style: none;
      font-family: Georgia, 
                   Constantia,
                   "Lucida Bright",
                   "Bitstream Vera Serif",
                   "Liberation Serif",
                   serif;
      margin-left: 173px;
      margin-top: 5px;
      width: 90px;
  }
  
  br {
      clear: left;
  }
  </code></pre>
  
  <p>Ideal outcome:</p>
  
  <p><img src="https://i.stack.imgur.com/sMmIB.png" alt="ideal outcome"></p>