Web Development Lesson 8 - Forms

In this activity you will learn an alternative way to send data to another page.

• We'll continue using 'form.php' and 'process_form.php' in this activity. Here is the code again if you need it.

form.php

<?php
    include('database.php');

    include('header.php');
    include('menu.php');

    // get list of heroes
    $query = "SELECT * FROM heroes";
    $args  = array();
    $hrslt = $pdo->prepare($query);
    $hrslt->execute($args);

    // get list of movies
    $query = "SELECT movie FROM appearances GROUP BY movie";
    $args  = array();
    $mrslt = $pdo->prepare($query);
    $mrslt->execute($args);
?>
    <main>
        <form name="add_hero" action="process_form.php">
            <fieldset>
                <legend>Add Hero</legend>
                <ul>
                    <li>
                        <label>Hero Name:</label>
                        <input type="text" name="name" size="30" maxlength="50">
                    </li>
                    <li>
                        <label>Side:</label>
                        <ul>
                            <li><input type="radio" name="side" value="Hero" checked> Hero</li>
                            <li><input type="radio" name="side" value="Villain"> Villain</li>
                        </ul>
                    </li>
                    <li>
                        <label>First Appearance:</label>
                        <input type="number" name="year">
                    </li>
                    <li>
                        <label>Source of Power:</label>
                        <select name="power">
                            <option value="skill">Skill</option>
                            <option value="bio">Biological</option>
                            <option value="magic">Magic</option>
                            <option value="tech">Technology</option>
                            <option value="mutant">Mutant</option>
                        </select>
                    </li>
                </ul>
                <input type="submit" name="submit" value="Add Hero">
            </fieldset>
        </form>

        <form name="add_appearances" action="process_form.php">
            <fieldset>
                <legend>Add Appearances</legend>
                <ul>
                    <li>
                        <label>Hero</label>
                        <select name="hero">
<?php
    // display list of heroes
    while($row = $hrslt->fetch()) {
?>
                            <option value="<?php echo $row['character_name']; ?>"><?php echo $row['character_name']; ?></option>
<?php
    }
?>
                        </select>
                    </li>
                    <li>
                        <label>Movie</label>
                        <ul>
<?php
    // display list of movies
    while($row = $mrslt->fetch()) {
?>
                            <li><input type="checkbox" name="movie[]" value="<?php echo $row['movie']; ?>" id=""> <?php echo $row['movie']; ?></li>
<?php
    }
?>
                            <li><input type="checkbox" name="movie[]" value="new" id=""> <input type="text" name="new_movie"></li>
                        </ul>
                    </li>
                </ul>
                <input type="submit" name="submit" value="Add Appearance">
            </fieldset>
        </form>
    </main>
<?php
    include('footer.php');
?>

process_form.php

<?php
    include('header.php');
    include('menu.php');

    print_r($_GET);
?>
    <main>
        <p>You have chosen <?php echo $_GET['name']; ?></p>
    </main>
<?php
    include('footer.php');
?>

• Open 'form.php' in your browser and check all boxes in the second form.
• Add 'Avengers: Age of Ultron' as the new movie title.
• Click 'Add Appearance'.
• Now look at the URL.
• It's very long because of all the information included.
• This may not be a problem, but if you are including a password or other information that the user may not want visible to others, this isn't secure.
• Instead, change the method of your forms to post.

        <form name="add_hero" action="process_form.php" method="post">
              ...
              <form name="add_appearances" action="process_form.php" method="post">

• Save and upload the file and do the same as above.
• The URL looks much cleaner now, but we need to access the information.
• Posted data is stored in the variable '$_POST'.
• Print it out using print_r to ensure it's there.

    <main>
        <p><?php print_r($_POST); ?></p>
    </main>

• Refresh the page and you'll see the data you've sent listed in a line.
• To view this in a more readable format, right click and select 'View Page Source'.

Next: INSERT Queries