Question

我在客户网站的页脚和联系页面中有一个表单，它只是简单但由于某种原因，表单文本区域框在到达框的末尾时不会移动到另一行，它只是保持滚动。该网站已上线[{3}}

客户希望能够根据输入的内容量创建新段落和内容框以调整大小。

我已经玩了好几年但似乎找不到任何错误。也许我我错过了一些明显的东西......

我的表单代码就是这个，显然是上面的php代码

<h1 style="color:#00b3ff" id="contact-form">Contact us</h1>
<?php if( !$success ): ?>
<p style="color:#FFFFFF;">Fill out the form below and we will respond asap.</p>

<form class="quick" method="post" action="#contact-form">

<input type="text" name="contact[name]" class="text-field" value="<?php echo $_POST['contact']['name']; ?>" placeholder="Name *" />

<input type="text" name="contact[email]" class="text-field" value="<?php echo $_POST['contact']['email']; ?>" placeholder="Email" />

<input type="text" name="contact[telephone]" class="text-field" value="<?php echo $_POST['contact']['telephone']; ?>" placeholder="Telephone *" />

<input type="text" name="contact[comments]" class="textarea" value="<?php echo $_POST['contact']['comments']; ?>" placeholder="Comments *" />

<input type="submit" value="Submit" name="submit" class="submit" />
<?php else: ?>
    <p style="color: white;">Thank you for your enquiry, we'll get back to you shortly.</p>
<?php endif; ?>

</form>


/* LOGIN & REGISTER FORM */

form.quick{
    height: auto;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}

我在这里看不到任何错误？

form .text-field {
    float: left;
    border: 0px solid #a6a6a6;
    width: 70%;
    height: 45px;
    border-radius: 2px;
    margin-top: 10px;
    padding-left: 10px;
    color: #000000;
    background: #fcfcfc;
    outline: none;
}

form .text-field:focus {
    box-shadow: inset 0 0 2px #008dd3;
    color: #a6a6a6;
    background: white;
}

form .textarea {
    float: left;
    border: 0px solid #a6a6a6;
    width: 70%;
    height: 45px;
    border-radius: 2px;
    margin-top: 10px;
    padding-left: 10px;
    color: #000000;
    background: #fcfcfc;
    outline: none;

}
form .textarea:focus {
    box-shadow: inset 0 0 2px #00b3ff;
    background: white;
}

form .submit {
    -webkit-appearance: none;
    border-radius: 2px;
    border: 0px solid #336895;
    width: 40%;
    height: 40px;
    margin-top: 10px;
    background-color: #00b3ff;
    cursor: pointer;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight:400;
    opacity: 1;
       transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out;
}

form .submit:hover {
    opacity: 0.8;
}

有人可以帮助我，请我把头发拉过来！

Answer 1

更改

<input type="text" name="contact[comments]" class="textarea" value="<?php echo $_POST['contact']['comments']; ?>" placeholder="Comments *" />

到

<textarea name="contact[comments]" class="textarea" placeholder="Comments *"><?php echo $_POST['contact']['comments']; ?></textarea>

表单文本区域不会超过一行，只是继续滚动

1 个答案: