css form-input/textarea樣式和定位..代碼和圖像包括

我是新來的網頁設計，所以請原諒，如果這是超級簡單 - 我已經嘗試了我所知道的一切，似乎無法得到這個權利。css form-input/textarea樣式和定位..代碼和圖像包括

我已經放在一起使用html & css的聯繫表格。理想情況下，我想從每個標籤延伸出一條1px線作爲輸入指南。這條線應該與標籤的底部齊平。我還喜歡在文本區域垂直延伸的一系列線條，以允許額外的寫入空間。

當前，名稱和電子郵件的輸入行未顯示，並且textarea的最底部只有一行用於消息。

這裏是我的工作代碼：

<div id="contact-form"> 
     <div id="invite"> 
      <h1>Let's Talk.</h1> 
      <div class="postinfo"> 
       <h2>Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.</h2> 
      </div><!-- end postinfo --> 
     </div><!-- end invite --> 
     <form> 

      <label for="user">Name:</label> 
      <input type="text" name="user" value="" /><br /> 

      <label for="emailaddress">Email:</label> 
      <input type="text" name="emailaddress" value="" /><br /> 

      <label for="comments">Message:</label> 
      <textarea name="comments"></textarea><br /> 

      <input type="submit" name="submitbutton" id="submitbutton" value="Submit" /> 
     </form> 
    </div><!-- end contact --> 

#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; 
}

理想的結果：

ideal outcome