test

    • Breaking

    Post Top Ad

    Your Ad Spot

    Activity # 23

    PHP FORM ACTIVITY

     

    PHP FORM ACTIVITY  

     

    PHP Form Activity (Student Registration Form )

     

     

     

     

    Page 1

    <!DOCTYPE html>

    <html>

    <head>

    <title>Student Registration Form</title>

    <meta charset="utf-8">

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

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style type="text/css">

    body{

    background-color: pink;

    }

    .container{

    width: 56%;

    height: 100%;

    background-color: yellow;

    padding-top: 10px;

    padding-left: 50px;

    padding-right: 50px;

    padding-bottom: 20px;

    }

    h1{

    color: blue;

    font-size: 40px;

    font-weight: bold;

    text-align: center;

    }

    p{

    margin-left: 15px;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <div class="row">

    <div class="md-col-12">

    <h1>STUDENT REGISTRATION FORM</h1>

    </div>

    </div>

    <div class="row">

    <div class="md-col-12">

    <p>Fill out the form carefully for registration</p>

    </div>

    </div>

    <form action="form.php" method="post">

    <div class="form-inline">

    <label>Student Name<br>

    <div class="form-group">

    <input class="form-control" type="text" name="first_name" placeholder="First Name">

    </div>

    <div class="form-group">

    <input class="form-control" type="text" name="middle_name" placeholder="Middle Name">

    </div>

    <div class="form-group">

    <input class="form-control" type="text" name="last_name" placeholder="Last Name">

    </div>


    </div>

    <div class="form-inline" style="width: 100%">

    <label>Birth Date<br>

    <select class="form-control abc2" name="month" style="width: 130px;">

    <option>Month</option>

    <option>January</option>

    <option>February</option>

    <option>March</option>

    <option>April</option>

    <option>May</option>

    <option>June</option>

    <option>July</option>

    <option>August</option>

    <option>September</option>

    <option>October</option>

    <option>November</option>

    <option>December</option>

    </select>

    <select class="form-control" name="day" style="width: 130px;">

    <option>Day</option>

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

    <option>6</option>

    <option>7</option>

    <option>8</option>

    <option>9</option>

    <option>10</option>

    <option>11</option>

    <option>12</option>

    <option>13</option>

    <option>14</option>

    <option>15</option>

    <option>16</option>

    <option>17</option>

    <option>18</option>

    <option>19</option>

    <option>20</option>

    <option>21</option>

    <option>22</option>

    <option>23</option>

    <option>24</option>

    <option>25</option>

    <option>26</option>

    <option>27</option>

    <option>28</option>

    <option>29</option>

    <option>30</option>

    <option>31</option>

    </select>

    <select class="form-control" name="year" style="width: 130px;">

    <option>year</option>

    <option>1991</option>

    <option>1992</option>

    <option>1993</option>

    <option>1994</option>

    <option>1995</option>

    <option>1996</option>

    <option>1997</option>

    <option>1998</option>

    <option>1999</option>

    <option>2000</option>

    <option>2001</option>

    <option>2002</option>

    <option>2003</option>

    <option>2004</option>

    <option>2005</option>

    <option>2006</option>

    <option>2007</option>

    <option>2008</option>

    <option>2009</option>

    <option>2010</option>

    <option>2011</option>

    <option>2012</option>

    <option>2013</option>

    <option>2014</option>

    <option>2015</option>

    <option>2016</option>

    <option>2017</option>

    <option>2018</option>

    <option>2019</option>

    <option>2020</option>

    <option>2021</option>

    </select>

    </label>

    <label>Gender<br>

    <select class="form-control" name="gender" style="width: 250px;">

    <option>Please Select</option>

    <option>Male</option>

    <option>Female</option>

    <option>Other</option>

    </select>

    </label>

    </div>

    <div class="form-inline">

    <label>Address<br>

    <input class="form-control" type="text" name="address" style="width: 650px;">

    </label>

    </div>

    <div class="form-inline">

    <label>Student E-mail<br>

    <input class="form-control" type="email" name="email" placeholder="ex: myname@example.com" style="width: 322px;">

    </label>

    <label>Mobile Number<br>

    <input class="form-control" type="tel" name="phone" placeholder="0000-0000000" pattern="[0-9]{4}-[0-9]{7}" style="width: 322px;">

    </label>

    </div>

    <div class="form-inline">

    <label>Phone Number<br>

    <input class="form-control" type="til" name="phone1" placeholder="00-000-0000000" pattern="[0-9]{2}-[0-9]{3}-[0-9]{7}" style="width: 322px;">

    </label>

    <label>Work Number<br>

    <input class="form-control" type="til" name="phone2" placeholder="0000-0000000" pattern="[0-9]{4}-[0-9]{7}" style="width: 322px;">

    </label>

    </div>

    <div class="form-inline">

    <label>Company<br>

    <input class="form-control" type="text" name="companyname" style="width: 322px;">

    </label>

    </div>

    <div class="form-inline">

    <label>Courses<br>

    <select class="form-control" name="courses" style="width: 322px;">

    <option>Please Select</option>

    <option>AutoCAD</option>

    <option>3D MAX</option>

    <option>Web Development</option>

    <option>Graphic Designing</option>

    <option>Computer Foundation</option>

    <option>Revit</option>

    <option>Maya</option>

    <option>Electrician</option>

    <option>Quantity Surveyor</option>

    <option>Civil Surveyor</option>

    <option>Turner</option>

    <option>Welder</option>

    </select>

    </div>

    <div class="form-inline">

    <label>Additional Comments<br>

    <textarea class="form-control" name="comments" style="width: 650px; height: 100px;"></textarea>

    </label>

    </div>

    <br>

    <input type="submit" name="Submit">

    <input type="reset" name="Reset">

    </form>

    </div>

    </body>

    </html>

    Page 2

    <?php

    $first_name = $_POST['first_name'];

    $middle_name = $_POST['middle_name'];

    $last_name = $_POST['last_name'];

    $month = $_POST['month'];

    $day = $_POST['day'];

    $year = $_POST['year'];

    $gender = $_POST['gender'];

    $address = $_POST['address'];

    $email = $_POST['email'];

    $phone = $_POST['phone'];

    $phone1 = $_POST['phone1'];

    $phone2 = $_POST['phone2'];

    $comments = $_POST['comments'];

    ?>


    <!DOCTYPE html>

    <html>

    <head>

    <title>Student Registration Form</title>

    <meta charset="utf-8">

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

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style type="text/css">

    <style type="text/css">

    body{

    background-color: pink;

    }

    .container{

    width: 56%;

    height: 100%;

    background-color: yellow;

    padding-top: 20px;

    padding-left: 50px;

    padding-right: 50px;

    padding-bottom: 20px;

    }

    h1{

    text-align: center;

    color: red;

    padding-bottom: 10px;

    }

    table,td,th{

    border: 1px solid black;

    border-collapse: collapse;

    }

    .abc{

    color: blue;

    font-size: 24px;

    font-weight: bold;

    width: 200px;

    padding-left: 10px;

    padding-top: 10px;

    padding-bottom: 10px;

    }

    .abc1{

    color: black;

    font-size: 20px;

    padding-left: 10px;

    padding-top: 10px;

    padding-bottom: 10px;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <h1>Student Registration Form</h1>

    <table>

    <tr>

    <td class="abc">Student Name</td>

    <td class="abc1"><?php echo $first_name.' '.$middle_name .' '.$last_name; ?></td>

    </tr>

    <tr>

    <td class="abc">Date of Birth</td>

    <td class="abc1"><?php echo $month.', '.$day .' '.$year; ?></td>

    </tr>

    <tr>

    <td class="abc">Gender</td>

    <td class="abc1"><?php echo $gender; ?></td>

    </tr>

    <tr>

    <td class="abc">Address</td>

    <td class="abc1"><?php echo $address; ?></td>

    </tr>

    <tr>

    <td class="abc">Student E-mail</td>

    <td class="abc1"><?php echo $email; ?></td>

    </tr>

    <tr>

    <td class="abc">Mobile Number</td>

    <td class="abc1"><?php echo $phone; ?></td>

    </tr>

    <tr>

    <td class="abc">Phone Number</td>

    <td class="abc1"><?php echo $phone1; ?></td>

    </tr>

    <tr>

    <td class="abc">Work Number</td>

    <td class="abc1"><?php echo $phone2; ?></td>

    </tr>

    <tr>

    <td class="abc">Commemts</td>

    <td class="abc1"><?php echo $comments; ?></td>

    </tr>

    </table>

    </div>

    </body>

    </html>

      

     

     

    FACEBOOK SIGN UP PAGE

     

      


    Page 1

    <!DOCTYPE html>

    <html>

    <head>

    <title>Student Registration Form</title>

    <meta charset="utf-8">

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

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style type="text/css">

    body{

    background-color: lightgray;

    }

    .container{

    width: 37%;

    height: 100%;

    background-color: lightgray;

    padding-top: 10px;

    padding-left: 50px;

    padding-right: 50px;

    padding-bottom: 20px;

    }

    h1{

    color: black;

    font-size: 40px;

    font-weight: bold;

    text-align: center;

    }

    p{

    margin-left: 15px;

    }

    .ab{

    width: 150px;

    height: 30px;

    background-color: rgb(97,161,79);

    color: white;

    border: 1px solid rgb(97,161,79);

    border-radius: 5px;

    }

    .ab:hover{

    background-color: green;

    color: black;

    font-weight: bold;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <div class="row">

    <div class="md-col-12">

    <h1>Create a new account</h1>

    </div>

    </div>

    <div class="row">

    <div class="md-col-12">

    <p>It's quick and easy.</p>

    </div>

    </div>

    <form action="form2.php" method="post">

    <div class="form-inline">

    <div class="form-group">

    <input class="form-control" type="text" name="first_name" placeholder="First Name">

    </div>

    <div class="form-group">

    <input class="form-control" type="text" name="surname" placeholder="Surname">

    </div>

    </div>

    <br>

    <div class="form-inline">

    <input class="form-control" type="text" name="email" style="width: 400px;" placeholder="Mobile number or email address">

    </div>

    <br>

    <div class="form-inline">

    <input class="form-control" type="password" name="password" style="width: 400px;" placeholder="New password">

    </div>

    <br>

    <div class="form-inline" style="width: 100%">

    <label>Date of birth<br>

    <select class="form-control" name="day" style="width: 65px; text-align: left;">

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    <option>5</option>

    <option>6</option>

    <option>7</option>

    <option>8</option>

    <option>9</option>

    <option>10</option>

    <option>11</option>

    <option>12</option>

    <option>13</option>

    <option>14</option>

    <option>15</option>

    <option>16</option>

    <option>17</option>

    <option>18</option>

    <option>19</option>

    <option>20</option>

    <option>21</option>

    <option>22</option>

    <option>23</option>

    <option>24</option>

    <option>25</option>

    <option>26</option>

    <option>27</option>

    <option>28</option>

    <option>29</option>

    <option>30</option>

    <option>31</option>

    </select>

    <select class="form-control abc2" name="month" style="width: 80px;">

    <option>Jan</option>

    <option>Feb</option>

    <option>Mar</option>

    <option>Apr</option>

    <option>May</option>

    <option>Jun</option>

    <option>Jul</option>

    <option>Aug</option>

    <option>Sep</option>

    <option>Oct</option>

    <option>Nov</option>

    <option>Dec</option>

    </select>

    <select class="form-control" name="year" style="width: 80px;">

    <option>1991</option>

    <option>1992</option>

    <option>1993</option>

    <option>1994</option>

    <option>1995</option>

    <option>1996</option>

    <option>1997</option>

    <option>1998</option>

    <option>1999</option>

    <option>2000</option>

    <option>2001</option>

    <option>2002</option>

    <option>2003</option>

    <option>2004</option>

    <option>2005</option>

    <option>2006</option>

    <option>2007</option>

    <option>2008</option>

    <option>2009</option>

    <option>2010</option>

    <option>2011</option>

    <option>2012</option>

    <option>2013</option>

    <option>2014</option>

    <option>2015</option>

    <option>2016</option>

    <option>2017</option>

    <option>2018</option>

    <option>2019</option>

    <option>2020</option>

    <option>2021</option>

    </select>

    </label>

    </div>

    <div>

    <label>Gender<br>

    <input type="radio" id="male" name="gender" value="male"><label for="male">&nbsp; Male</label>

    <input type="radio" id="female" name="gender" value="female"><label for="female">&nbsp; Female</label>

    <input type="radio" id="custom" name="gender" value="custom"><label for="custom">&nbsp; Custom</label>

    </label>

    </div>

    <p>By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.</p>

    <br>

    <input type="submit" name="Sign Up" class="ab">

    </form>

    </div>

    </body>

    </html>


    Page 2

    <?php

    $first_name = $_POST['first_name'];

    $surname = $_POST['surname'];

    $month = $_POST['month'];

    $day = $_POST['day'];

    $year = $_POST['year'];

    $gender = $_POST['gender'];

    $email = $_POST['email'];

    $password = $_POST['password'];

    ?>


    <!DOCTYPE html>

    <html>

    <head>

    <title>Create a new account</title>

    <meta charset="utf-8">

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

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style type="text/css">

    <style type="text/css">

    body{

    background-color: pink;

    }

    .container{

    width: 45%;

    height: 100%;

    background-color: lightgray;

    padding-top: 20px;

    padding-left: 50px;

    padding-right: 50px;

    padding-bottom: 20px;

    }

    h1{

    text-align: center;

    color: red;

    padding-bottom: 10px;

    }

    table,td,th{

    border: 1px solid black;

    border-collapse: collapse;

    }

    .abc{

    color: blue;

    font-size: 24px;

    font-weight: bold;

    width: 200px;

    padding-left: 10px;

    padding-top: 10px;

    padding-bottom: 10px;

    }

    .abc1{

    color: black;

    font-size: 20px;

    padding-left: 10px;

    padding-top: 10px;

    padding-bottom: 10px;

    }

    </style>

    </head>

    <body>

    <div class="container">

    <h1>Create a new account</h1>

    <table>

    <tr>

    <td class="abc">First Name</td>

    <td class="abc1"><?php echo $first_name; ?></td>

    </tr>

    <tr>

    <td class="abc">Surname</td>

    <td class="abc1"><?php echo $surname; ?></td>

    </tr>

    <tr>

    <td class="abc">Date of Birth</td>

    <td class="abc1"><?php echo $month.', '.$day .' '.$year; ?></td>

    </tr>

    <tr>

    <td class="abc">Gender</td>

    <td class="abc1"><?php echo $gender; ?></td>

    </tr>

    <tr>

    <td class="abc">E-mail</td>

    <td class="abc1"><?php echo $email; ?></td>

    </tr>

    <tr>

    <td class="abc">Password</td>

    <td class="abc1"><?php echo $password; ?></td>

    </tr>

    </table>

    </div>

    </body>

    </html>

     

      

     

    No comments:

    Post a Comment

      How to Submit the Practical Exam on Portal EdTechWorx  

    Post Top Ad

    Your Ad Spot

    Author Details

    Muhammad Bin Jameel

    Pages

    About Me

    authorHello, my name is Muhammad Bin Jameel.

    About Me


    Read More

    Contact Form

    Name

    Email *

    Message *

    Recent News

    Tags

    BOOTSTRAP (4) css (3) fiverr (1) html (8) javascript (10) laravel (1) php (3) wordpress (11)

    Send Quick Message

    Name

    Email *

    Message *