HTML表单显示代码而不是PHP输出

Question

I've been trying to implement this form into my HTML (Bootstrap 4 alpha) website, but I can't get it working properly.

Let's start with the goals:

1. A working form that checks if valid input is given for all fields before it sends an email.
2. If the user didn't enter a valid input for one or more of the fields, an error message should appear on the page itself (so no redirect to an error page).
3. preferably, when the user made a mistake with one of the input fields and the error shows up, the previously entered data shall remain in the fields.

I found some useful help somewhere on the internet, a PHP and HTML of which I could use the stuff I needed. However, this form doesn't work, even when I upload the original code without changing anything.

I thought PHP might not be supported by the server I was uploading it to, but it is and I even got a form working that would just take the input and send it to the receiver with no questions asked.

What I didn't get to work though was to echo an output of my PHP file in my HTML. What am I doing wrong?

HTML:

<form action="php/mail.php" role="form" method="post" class="">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label sr-only">Naam</label>
        <input type="text" class="form-control form-control-sm form" id="name" name="name" placeholder="Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
        <?php echo "<p class='text-danger'>$errName</p>";?>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label sr-only">Email</label>
        <input type="email" class="form-control form-control-sm form" id="email" name="email" placeholder="[e-mail]" value="<?php echo htmlspecialchars($_POST['email']); ?>">
        <?php echo "<p class='text-danger'>$errEmail</p>";?>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label sr-only">Message</label>
        <textarea class="form-control form-control-sm form" rows="4" name="message" placeholder="My Message..."><?php echo htmlspecialchars($_POST['message']);?></textarea>
        <?php echo "<p class='text-danger'>$errMessage</p>";?>
    </div>
    <div class="form-group">
        <label for="human" class="col-sm-2 control-label sr-only">2 + 3 = ?</label>
        <input type="text" class="form-control form-control-sm form" id="human" name="human" placeholder="2 + 3 = ?">
        <?php echo "<p class='text-danger'>$errHuman</p>";?>
    </div>
    <div class="form-group">
        <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary btn-sm">
        <input type="reset" value="Clear" class="btn btn-primary btn-sm">
    </div>
    <div class="form-group">
        <?php echo $result; ?>
    </div>
</form> 

PHP:

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $human = intval($_POST['human']);
        $from = 'Demo Contact Form'; 
        $to = '[e-mail]'; 
        $subject = 'Message from Contact Demo ';

        $body = "From: $name
 E-Mail: $email
 Message:
 $message";

        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Please enter your name';
        }

        // Check if email has been entered and is valid
        if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $errEmail = 'Please enter a valid email address';
        }

        //Check if message has been entered
        if (!$_POST['message']) {
            $errMessage = 'Please enter your message';
        }
        //Check if simple anti-bot test is correct
        if ($human !== 5) {
            $errHuman = 'Your anti-spam is incorrect';
        }

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
    }
}
    }
?>

The results I get from this are like this:

Seems to me that the HTML file doesn't execute the PHP code, instead just displays raw code. I tried both saving the HTML as .html and as .php, both gave different but false results.

Answer 1

Just :

<?php if (isset($errName)) { echo "<p class='text-danger'>$errName</p>"; } ?>

For all your fields.

For your comment :

 // Create this variable for your error detection
 $hasError = FALSE;

 // Check if name has been entered
 if (!$_POST['name']) {
      $errName = 'Please enter your name';
      $hasError = TRUE;
 }

 // Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $errEmail = 'Please enter a valid email address';
    $hasError = TRUE;
}

//Check if message has been entered
if (!$_POST['message']) {
    $errMessage = 'Please enter your message';
    $hasError = TRUE;
}

//Check if simple anti-bot test is correct
if ($human !== 5) {
   $errHuman = 'Your anti-spam is incorrect';
   $hasError = TRUE;
}

// If there are no errors, send the email
if ($hasError == FALSE) {
   ....