Signup page in HTML/PHP I've written some PHP code that connects to a database and saves input entered by the user at our signup page. I would like some feedback before I present this code to my colleagues, as I intend on using this code for our website:


Security
Use of PDO vs other connection methods
Variable Naming
PHP Conventions
HTML Conventions
Anything else


sign_up.html

&lt;!DOCTYPE html&gt;
&lt;html lang="en-US"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Sign Up&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="styles/main.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="styles/dropdown.css"&gt;
        &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
        &lt;script src="scripts/empties.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;!-- Nav Bar --&gt;
        &lt;div class="navbar"&gt;
            &lt;a href="index.html"&gt;&lt;i class="fa fa-fw fa-home" style="font-size: 40px"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;

        &lt;!-- Signup Area --&gt;
        &lt;div id="sign_up_area"&gt;
            &lt;form action="sign_up.php" method="post"&gt;
                &lt;input id="form_input" 
                       type="text" 
                       placeholder="First Name" 
                       name="firstname"&gt;&lt;br /&gt;
                &lt;input id="form_input" 
                       type="text" 
                       placeholder="Last Name"
                       name="lastname"&gt;&lt;br /&gt;
                &lt;input id="form_input"
                       type="text" 
                       placeholder="Age"
                       name="age"&gt;&lt;br /&gt;
                &lt;input id="form_input" 
                       type="text" 
                       placeholder="Email"
                       name="email"&gt;&lt;br /&gt;
                &lt;input id="form_input" 
                       type="password" 
                       placeholder="Password"
                       name="password"&gt;&lt;br /&gt;
                &lt;button id="signup_button" type="submit" disabled&gt;Sign Up&lt;/button&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;


sign_up.php

&lt;?php

include 'config/database.php';

try {

    $conn = new PDO("mysql:host=$DB_HOST;dbname=Database", $DB_USER, $DB_PASSWORD);
    $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $firstname = filter_var($_POST["firstname"], FILTER_SANITIZE_STRING);
    $lastname = filter_var($_POST["lastname"], FILTER_SANITIZE_STRING);
    $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
    $password = filter_var($_POST["password"], FILTER_SANITIZE_STRING);

    #No need to hash name and email, can be used to check duplicates
    $password_hash = password_hash($password, PASSWORD_DEFAULT);

    $stmt = $conn-&gt;prepare("INSERT INTO Users (FirstName, LastName, Email, Password) VALUES (:firstname, :lastname, :email, :password)");
    $stmt-&gt;bindParam(':firstname', $firstname);
    $stmt-&gt;bindParam(':lastname', $lastname);
    $stmt-&gt;bindParam(':email', $email);
    $stmt-&gt;bindParam(':password', $password_hash);
    $stmt-&gt;execute();

    header("Location: signed_up.html");

} catch(PDOException $e) {

    echo "Connection failed: " . $e-&gt;getMessage();

}

?&gt;
I see multiple instances of id="form_input". These attributes need to change to class or each id attribute value should be altered to be unique.
Instead of using &lt;br&gt; tags to style your input fields on separate lines, use css.  By setting all of the elements in the form as display:block;, you can eliminate the excess markup -- a cleaner alternative.  CSS should be the first technique to create spacing and layout stylings; when you find yourself creating spaces with the spacebar or with &lt;br&gt;, try to achieve the same effect with display, margin, padding, etc.
11 reasons why placeholders are problematic -- I can appreciate that you intend to design a clean, minimalist layout, but I don't think I support non-labeled fields and your project should maintain a consistent theme considering that your project may eventually need to employ more forms.
In addition to the previous bullet point about UX, I will urge you to add some client-side validation to your form.  These character limitations will be up to you.  I assume empties.js is doing something that enables the submit button, but I can't see it.  If empties.js is as functionally narrow a file as it's name suggests, you may want to build more robust processes in there.
Rather than sanitizing server-side and unconditionally inserting into the database, you should be catching overtly "bad" submissions and denying access.
If a submitted password contains html markup, that is no concern of yours (no need to sanitize) because you will never, ever be printing that value -- ever.  More clearly: never alter someone's submitted password characters.
You must never, ever present the raw error message to the end user.  See @YCS's hyperlink.  Especially with registration forms, you need to find the correct balance between informing the registrant why the submission was denied, yet not compromising the security of your project.
Finally, login/registration systems are widely available now.  If you are doing this as an educational exercise, then carry on.  If you don't want to reinvent the wheel, just use a pre-existing script from a security-minded author.