表单域中的缩进不会消失

Question

>我在这个页面上有一个联系表格：http://thehummingbirdplace.com/contact.html

当您单击表单进行键入时，表单的"注释"部分在字段中有一个很大的缩进。键入时可以删除缩进，但是我不知道如何从一开始就摆脱它。

下面是窗体的代码：

<div id="contactForm">
    <form class="group" method="post" action="contact1.php">
        <label for="text1">Name: </label>
        <input name="name" type="text" id="text1" required>
        <label for="text2">E-Mail: </label>
        <input name="email" type="email" id="text2" required>
        <label for="commentsfield" class="commentbox">Comments: </label>
        <textarea name="comments" id="commentsfield"
        cols=30 rows=9>
        </textarea>
        <input type="submit" value="submit"/>
    </form>
</div>

这是我在其上使用的所有 css：

#contactForm {
    margin-left: auto;
    margin-right: auto;
    width: 520px;
    height: 500px;
}
form {
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 15px;
    position: absolute;
    z-index: 1;
}
label {
    display: block;
    width: 270px;
    padding-top: 15px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 15px;
}
label.commentbox {
    width: 501px;
}
form * {
    background: transparent;
    behavior: url(../_assets/PIE.htc);
}
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.group:before, .group:after {
    content: "020";
    display: block;
    height: 0;
    overflow; hidden;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}
input[type=text], input[type=email] {
    width: 270px;
}
textarea {
    width: 500px;
}
input[type=text], input[type=email] {
    padding: 5px;
}
input[type=text], input[type=email], textarea {
    display: block;
    border: 1px solid #EAEAEA;
    font-size: 16px;
    background-color: #fff;
    color: #666;
    box-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}
input:focus, textarea:focus {
}
input[type=email] {
    padding-right: 10px;
}
input[type=submit] {
    padding: 5px;
    background: #666;
    color: white;
    border: none;
    margin-top: 15px;   
    font-size: 100%;    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
input[type=text].required {
    padding-left: 10px;
}
input.required {
    background: webkit-linear-gradient(#FFF, #DDD);
    background: moz-linear-gradient(#FFF, #DDD);
    background: ms-linear-gradient(#FFF, #DDD);
    background: o-linear-gradient(#FFF, #DDD);
    background: linear-gradient(#FFF, #DDD);
    -pie-background: linear-gradient(#FFF, #DDD);
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
} 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

我以前从未见过这种情况发生，对我来说没有什么能引起表格中的意图。任何帮助将不胜感激！

Answer 1

您需要

删除textarea标签之间的空格

<textarea name="comments" id="commentsfield" cols=30 rows=9></textarea>

越野车演示

固定演示

Answer 2

你的<textarea> </textarea>之间有很大的差距

替换此：-

<textarea name="comments" id="commentsfield" cols="30" rows="9">            </textarea>

有了这个：-

<textarea name="comments" id="commentsfield" cols="30" rows="9"></textarea>