为什么 PHP 会弄乱我的 CSS？

Question

我创建了我的联系表单，并且一直在为 CSS 使用引导程序。在添加 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

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

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

Answer 2

您似乎没有正确关闭错误列表。

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>。）