Web Development Lesson 8 - Forms

In this activity you will improve the appearance of your forms.

• We'll continue to use 'form.php' and 'style.css' in this activity. In case you need the code again, here it is.

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 * FROM appearances GROUP BY movie";
    $args  = array();
    $mrslt = $pdo->prepare($query);
    $mrslt->execute($args);
?>
    <main>
        <form name="add_hero" action="process_form.php">
                <ul>
                    <li>
                        <label>Hero Alias:</label>
                        <input type="text" name="name" size="30" maxlength="50" hint="Iron Man">
                    </li>
                    <li>
                        <label>Identity:</label>
                        <input type="text" name="name" size="30" maxlength="50" hint="Tony Stark">
                    </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">
        </form>

        <form name="add_appearances" action="process_form.php">
                <ul>
                    <li>
                        <label>Hero</label>
                        <select name="hero">
<?php
    // display list of heroes
    while($row = $hrslt->fetch()) {
?>
                            <option value="<?php echo $row['alias']; ?>"><?php echo $row['alias']; ?></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">
        </form>
    </main>
<?php
    include('footer.php');
?>

style.css

ol {
    color: blue;
  }
  
  ol ol {
    font-weight: 700;
  }

ul {
  list-style-type: none;
}

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

header {
  background-color:indianred;
  border:darkred solid 2px;
  height: 100px;
  position: absolute;
  left: 16%;
  right: 0px;
  top: 0px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 16%;
  left: 0px;
}

main {
  background-color: lightgree;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
  padding: 20px;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
  position: absolute;
  bottom: 0px;
  height: 80px;
  left: 16%;
  right: 0px;
}

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
  padding: 40px;
  margin: 20px;
  display: inline-block;
  width: 300px;
}

img {
  float: left;
  max-height: 250px;
  border: solid 2px green;
  margin: 20px 20px 20px 0px;
  padding: 10px;
  border-radius: 30px;
}

#album {
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
}

video {
  max-height: 250px;
  float: right;
  clear: left;
  margin: 20px 0px 20px 20px;
  padding: 10px;
}

audio {
  margin: 20px 20px 20px 0px;
  padding: 10px 10px 10px 0px;
}

input[type=button] {
  display: block;
}

figcaption {
  display: block;
  text-align: center;
  font-family: 'Arial', sans-serif;
  color: green;
}

• Save and upload the code if you need to.
• Open 'form.php' in your browser and take a look.
• What do you think needs improving?
• The first thing I notice is that everything is piled up together. It needs to be spaced out to make it more readable.
• Let's start by separating out the two sections of the form.
• Add a <fieldset> tag just after the <form> tag and close it just before the closing </form> tag.

        <form name="add_hero" action="process_form.php">
            <fieldset>
                    ...
                <input type="submit" name="submit" value="Add Hero">
            </fieldset>
        </form>

        <form name="add_appearances" action="process_form.php">
            <fieldset>
                    ...
                <input type="submit" name="submit" value="Add Appearance">
            </fieldset>
        </form>

• Save and upload, then refresh your page.
• Now you should have a border around each section, which makes it much clearer.
• <fieldset> divides your form into sets of fields, though in this case each fieldset is its own form.
• We can also label each fieldset by adding a legend. This can go anywhere, but is clearest just inside the opening <fieldset> tag.

        <form name="add_hero" action="process_form.php">
            <fieldset>
                <legend>Add Hero</legend>
                    ...
                <input type="submit" name="submit" value="Add Hero">
            </fieldset>
        </form>

        <form name="add_appearances" action="process_form.php">
            <fieldset>
                <legend>Add Appearances</legend> 
                    ...
                <input type="submit" name="submit" value="Add Appearance">
            </fieldset>
        </form>

• Save, upload and check the result.

• The simplest way to align everything would be to use a table, but that wouldn't be responsive (wouldn't look good on smaller screens) so we'll use CSS instead.
• I like to simulate a table with a column for the labels on the left and a column for the inputs on the right, then align each so that they meet in the middle.
• Let's create some space for labels by adding width: 10em;. Remember that em defines space in character widths. From a bit of experimentation, I know that 10em is sufficient for all our labels.
• Unfortunately, width can't be applied to inline elements like <label>, so we need to change it to 'inline-block'.
• When that's done, we can set the text to align to the right.

label {
  display: inline-block;
  width: 10em;
  text-align: right;
}

• Check how that looks.
• Next, give the text, number and dropdown boxes a bit of space.

input[type=text], input[type=number], select {
  margin-left: 1em;
}

• We still need to shift our radio inputs and checkboxes to the right. Adding the 10em from the label and the 1em margin for the other inputs, we get 11em.

input[type=checkbox], input[type=radio] {
  margin-left: 11em;
}

• If you refresh you page now you'll see that it all looks pretty good except for the input for the new movie. This has the 1em margin given to all text inputs, but it would be better without in this case.

input[name=new_movie] {
  margin-left: 0em;
}

• To differentiate this input from the others, we specify the name. Then remove the margin.
• Refresh your page and see if you're happy with it.
• Feel free to change the design, add some colours etc until you are happy.

Next: Posting Data