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