css form- input/textarea 样式和定位.. 包括代码和图像

Question

我是网页设计的新手，所以如果这非常简单，请原谅 - 我已经尝试了我所知道的一切，但似乎不太正确。

我已经使用 html 和 css 制作了一个联系表单。理想情况下，我希望从每个标签延伸出一条 1px 的线作为输入指南。这条线应与标签底部齐平。我还想要在文本区域中垂直延伸的一系列线条，以留出额外的书写空间。

目前，Name 和 Email 的输入行没有显示，Message 的文本区域只有最底部的一行。

这是我正在使用的代码:

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

理想的结果:

Answer 1

根据您的代码，我创建了一个 fiddle ，请参见下文。如果有任何更改或其他要求，请说明。

fiddle :http://jsfiddle.net/EaKmZ/

演示:http://jsfiddle.net/EaKmZ/embedded/result/

注意:我没有对您的代码进行太多编辑，所以存在很多不需要的 CSS。