regsitration form

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: white;
        }

        * {
            box-sizing: border-box;
        }

        .container {
            padding: 16px;
            background-color: white;
        }

        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 15px;
            margin: 5px 0 22px 0;
            display: inline-block;
            border: none;
            background: #EFF5F5;

        }

        input[type=text]:focus,
        input[type=password]:focus {
            background-color: #EFF5F5;
            outline: none;
        }

        hr {
            border: 1px solid #DC3535;
            margin-bottom: 25px;
        }

        .registerbtn {
            background-color: #497174;
            color: white;
            padding: 16px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }

        .registerbtn:hover {
            opacity: 100;
        }

        .box-container {
            height: 400px;
            width: 600px;
            position: relative;
        }

        .hero {
            display: flex;
        }
    </style>

</head>

<body>

    <!-- Info.class -->

    <?php

    $lname = $fname = $mi = $age = $cn = $em = $ads = $pass = "";

    if ($_SERVER["REQUEST_METHOD"] == "POST") {

        $lname = test_input($_POST["lname"]);

        $fname = test_input($_POST["fname"]);

        $mi = test_input($_POST["mi"]);

        $age = test_input($_POST["age"]);

        $cn = test_input($_POST["cn"]);

        $em = test_input($_POST["em"]);

        $ads = test_input($_POST["ads"]);
    }



    function test_input($data)
    {

        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }

    ?>


    <div class="hero">

        <div class="box-container">

            <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">


                <div class="container">

                    <h1>Online Registration</h1>

                    <p>Please fill in this form to create an account.</p>

                    <hr>

                    <label for="lname"><b>Last Name</b></label>

                    <input type="text" placeholder="Enter Last Name" name="lname" id="lname" required>

                    <label for="fname"><b>First Name</b></label>

                    <input type="text" placeholder="Enter First Name" name="fname" id="fname" required>

                    <label for="mi"><b>Middle Initial</b></label>

                    <input type="text" placeholder="Enter Middle Initial" name="mi" id="mi" required>

                    <label for="age"><b>Age</b></label>

                    <input type="text" placeholder="Enter Age" name="age" id="age" required>

                    <label for="cn"><b>Contact No.</b></label>

                    <input type="text" placeholder="Enter Contact No." name="cn" id="cn" required>

                    <label for="em"><b>Email</b></label>

                    <input type="text" placeholder="Enter Email" name="em" id="em" required>

                    <label for="ads"><b>Address</b></label>

                    <input type="text" placeholder="Enter Address" name="ads" id="ads" required>

                    <button type="submit" class="registerbtn">Register</button>

                </div>

            </form>

        </div>




        <div class="table">

            <h1> Output </h1>

            <table>

                <tr>
                    <th>Input</th>
                    <th>Required</th>
                </tr>

                <tr>
                    <td>Last Name</td>
                    <td><?php echo $lname; ?></td>
                </tr>

                <tr>
                    <td>First Name</td>
                    <td><?php echo $fname; ?></td>
                </tr>

                <tr>
                    <td>Middle Initial</td>
                    <td><?php echo $mi; ?></td>
                </tr>

                <tr>
                    <td>Age</td>
                    <td><?php echo $age; ?></td>
                </tr>

                <tr>
                    <td>Contact No.</td>
                    <td><?php echo $cn; ?></td>
                </tr>

                <tr>
                    <td>Email</td>
                    <td><?php echo $em; ?></td>
                </tr>

                <tr>
                    <td>Address</td>
                    <td><?php echo $ads; ?></td>
                </tr>

            </table>


        </div>

    </div>



    <style>
        table,
        th,
        td {

            border: 1px solid;
        }

        .table {
            margin-top: 30px;
            margin-left: 80px;
            height: 400px;
            width: 600px;

        }
    </style>

</body>

</html>
Editor is loading...