Web Development Lesson 8 - Forms

In this activity you will create a form and use it to pass data from one page to another.

• We will continue to work with 'form.php' and 'process_form.php'. If you need the code again, here it is.

form.php

<?php
    include('header.php');
    include('menu.php');
?>
    <main>
        <p>Choose your hero.</p>
        <ol>
            <li><a href="process_form.php?name=Loki">Loki</a></li>
            <li><a href="process_form.php?name=Hulk">Hulk</a></li>
        </ol>
    </main>
<?php
    include('footer.php');
?>

process_form.php

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

• Open 'form.php'. We will display our form here.
• Add a new line below the opening <main> tag.
• Type 'form' and select the option that appears.
• The <form> tag has a parameter called action. This is where you want to send your data.
• Set action to 'process_form.php'.

        <form action="process_form.php">

• Move the existing paragraph inside the <form> tags.
• Now add our hero options as 'submit' buttons.

            <button type="submit" name="name" value="Loki"></button>
            <button type="submit" name="name" value="Hulk"></button>

• Setting the type to 'submit' means that when we click the button it will submit the form and send the data. Both buttons will do this.
• name is the parameter name to be sent. Submit buttons will often be named 'submit' and not contain data, but sometimes there will be two forms on a page (or sent to a page) and you need to know which one to process. We use that here to differentiate the selected heroes.
• The value is the text that will appear on the button.
• Save and upload the file, then open the page.
• Click on your chosen hero then check the results. Do you see your hero's name?
• This is an usual way to use a Submit button, but it's valid. Let's look at other options.

• Let's create a form to add heroes to our database.
• We'll need input fields for the name, whether they're a hero or a villain, the year they first appeared in Marvel comics (or elsewhere) and what the source of their power is.
• We could use a table to present our form with labels on the left and inputs on the right, but that isn't responsive, that is, it won't adapt to smaller screens.
• Instead, we'll use a list, where each label / input pair is a list item.
• Delete everything inside the <form> tag and add the following code.

                <ul>
                    <li>
                    </li>
                </ul>

• The first field for the hero's name can be a simple text field.

                    <li>
                        <label>Hero Name:</label>
                        <input type="text" name="name" size="30" maxlength="50" hint="Iron Man">
                    </li>

• Here we have a label for our input, using the <label> tag.
• We then have an input, but rather than being of type="button" or type="submit", it is type="text" which is used for a simple text field, usually up to 100 characters or so.
• We give it a name that will inform 'process_form.php' what the value refers to.
• There are two additional attributes that we haven't seen before. size sets the size of the input box to 30 characters and maxlength limits the length of characters that can be entered.
• Finally, we have the option to give the user a hint as to what kind of content we expect here using hint.
• Save and upload the code to see how it looks live.

• When we have an input with only a few set options and only one can be selected at a time, we use radio buttons.
• The most common example of this is 'male' and 'female'.
• In this case we want to know whether our hero is actually heroic or villainous. Add the following code to show this.

                    <li>
                        <label>Side:</label>
                        <input type="radio" name="side" value="Hero" checked="checked"> Hero<br>
                        <input type="radio" name="side" value="Villain"> Villain
                    </li>

• I've labelled this hero/villain distinction 'side' but if you can think of a better term, feel free to use that.
• Again, radio buttons use the <input> tag and, like buttons, they have a name and a value.
• The value isn't displayed as it is on a button, because there's no room on a radio button. Instead, the value is the text we want to send to 'process_form.php'.
• We add the text before or after the <input depending on how we want the form to appear.
• Finally, notice the checked attribute in the first input. This sets the default item if you want one.
• Save and upload to see how it looks.

• Our next field is the year that the hero first appeared in a comic (or movie etc).
• It will be sent as text, but it's actually a number and we can help our user by specifying that.
• Add the following code to your form.

                    <li>
                        <label>First Appearance:</label>
                        <input type="number" name="year">
                    </li>

• We can also set size and maxlength, but we'll look at better ways to manage this later.
• Save and upload the code to see how it looks. Almost exactly the same a text input, right?
• Notice that it has up and down arrows to allow users to change the number by increments.
• If you have a mobile to load the page with, you'll also notice that the keyboard automatically changes to a numeric input rather than the usual keyboard layout.

• Our next field is the source of the hero's power. This is a type of category, where we want to control the options that can be selected.
• For this we use a <select field.
• Copy the following code into your form.

                    <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>

• We have a number of options listed using <option></hmtl> tags and they all sit inside the <html><select> tag.
• Rather than setting the name for each option individually, we set it once in the <select> tag.
• The value sent to 'process_form.php' is taken from the value attribute, while the user sees the text between the <option> tags.
• Save and upload the file to see that it appears as a dropdown box.
• Finally, add the submit button to make the form work.

                <input type="submit" name="submit" value="Add Hero">

• Save and upload the file.
• Add some data and click on the button to submit your data.
• Notice that if you choose 'Biological' as the source of power, the result is sent as 'power=bio' rather than 'power=Biological' because of the value associated with that option.

• We'd also like to be able to add the appearances