Question

我创建了我的联系表单并且一直在使用CSS的bootstrap。在我添加PHP之前，我的联系表格看起来很棒，所有字段都对齐并且它们居中。现在我输入了我的PHP联系表单，它看起来不同。字段宽度已缩短，消息框与其他字段的宽度不同，并且表格在整个屏幕上大约为3/8。在我添加PHP之前，它是6列的宽度并居中，正如您从我的代码中看到的那样。

我是网络开发的新手，我正在努力学习基础知识，因为我认为这将有助于我未来的职业生涯，所以任何帮助都会非常感激。此外，我确实有这个托管和现场，所以我的代码肯定有错误。

这是我与PHP代码的联系表格

<form class="form-horizontal" id="contactform" role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" novalidate>
<?php
    if($sent === true) {
        echo "<h2 class='success'>Thanks, your message has been sent successfully</h2>";
    } elseif ($hasError === true) {
        echo '<ul class="errorlist">';
        foreach($errorArray as $key => $val) {
            echo "<li>" . ucfirst($key) . " field error - $val</li>";
        }
        echo '</li>';
    }
?>
<div class="form-group">
    <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
        <input type="text" id="name" name="name" placeholder="Name" value="<?php echo (isset($name) ? $name : ""); ?>">
    </div>
</div>

然后我在这里的其他字段几乎完全相同的电话，电子邮件和消息，然后用关闭表格完成。

</form>

这是我的j查询脚本

<script type="text/javascript">
jquery(document).ready(function($) {
    $("#contactform").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            }
        },
        messages: {
            name: {
                required: "Please enter your name",
                minlength: "Your name seems a bit short"
            },
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            },
            message: {
                required: "Please enter your message"
            }
        }
    });
});

Answer 1

您好像没有正确关闭错误列表。

echo '<ul class="errorlist">';
foreach($errorArray as $key => $val) {
    echo "<li>" . ucfirst($key) . " field error - $val</li>";
}
echo '</li>';

应该......

echo '<ul class="errorlist">';
foreach($errorArray as $key => $val) {
    echo "<li>" . ucfirst($key) . " field error - $val</li>";
}
echo '</ul>';

（注意最后一行，将</li>更改为</ul>。）

Answer 2

为什么不尝试模板语法？您的文本编辑器将以这种方式向您显示更好的语法颜色：

<form class="form-horizontal" id="contactform" role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" novalidate>
<?php if($sent === true): ?>
      <h2 class='success'>Thanks, your message has been sent successfully</h2>
<?php elseif ($hasError === true): ?>
        <ul class="errorlist">
            <?php foreach($errorArray as $key => $val): ?>
                <li><?php echo ucfirst($key); ?>  field error - <?php echo $val; ?></li>            
            <?php endforeach; ?>
        </ul>
<?php endif;?>
<div class="form-group">
    <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
        <input type="text" id="name" name="name" placeholder="Name" value="<?php echo (isset($name) ? $name : ""); ?>">
    </div>
</div>

为什么PHP搞乱了我的CSS？

2 个答案: