【发布时间】：2013-07-11 19:07:55
【问题描述】：
我在客户网站的页脚和联系页面中有一个表单，它很简单，但由于某种原因，表单文本区域框在到达框的末尾时不会移动到另一行，它只是保持滚动.该网站正在直播here
客户希望能够创建新段落和内容框以根据内容输入量调整大小。
我已经玩了很多年了，但似乎找不到任何问题。也许我 我遗漏了一些明显的东西......
我的表单代码是这样的，上面明显是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;
}
有人能帮帮我吗？我正在把头发拉出来！
【问题讨论】：
-
如果你想让它成为一个文本区域，你不需要把它作为
<textarea>而不是<input type="text"吗？ -
正是@andrewsi 所说的。输入类型文本将始终为一行。对于多个，使用
textarea元素。