Web Development Lesson 8 - Forms

In this activity, you will create a form to add and update data for players in the Colombian Football team.

• You will continue to use 'style.css' from your project folder, so here it is if you need it again.

style.css

ul {
    list-style-type: none;
    background-color: gold;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0px;
}

li {
    display: inline;
    border-right: solid 1px yellow;
}

html {
  height: 100%;
}

body {
    padding: 0px;
    margin: 0px;
    align-items: stretch;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: gold;
}

a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    font-weight: 700;
    font-family: arial;
}

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:gold;
  border:gold solid 2px;
  height: 60px;
  width: 100%;
  text-align: center;
  color: #333;
}

nav {
  width: 100%;
  margin: 0px;
}

main {
  padding: 20px;
  display: flex;
  justify-content:space-around;
  background-color: white;
  flex: 5;
  flex-wrap: wrap;
}

#playerlist ul {
  background-color: white;
  margin: 20px;
}

#playerlist li {
  display: block;
  border: none;
}

#photo, #data {
    background-color: red;
    border-radius: 50px;
    padding: 50px;
    color: #eee;
    width: 350px;
    margin: 20px;
}

#photo img {
  height: 500px;
}

footer {
  background-color: blue;
  border: blue solid 2px;
  width: 100%;
  text-align: center;
  color: #ccc;
}

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

h2 {
  text-align: center;
}

#photo img {
  float: none;
  display: block;
  margin: 20px auto;
}

#data table {
  margin: auto;
}

#data table, #data th, #data td {
    border: 0px;
}

#data th {
    text-align: right;
}

#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;
}

• You will be working on a page to enter player data, which we'll call 'form.php' so create that and set it up with the standard basic code.

form.php

<?php
    $page = "form";
    include ("header.php");
    include ("menu.php");
?>
    <main>

    </main>
<?php
    include ("footer.php");
?>

• Create a form in <main> that contains fields for name, surname, nationality, birthdate, age, hometown, position, height, weight, left or right foot, number of games played and a url for a photo.
• Choose the input type for each field carefully.
• Set the form action to 'form.php' as well.
• Set the form method to 'post'.
• Use a button to capture the data submission (rather than a 'submit' input).

• Make the form look good.
• Check the other pages to ensure you aren't making them look terrible with your changes.

• Use Javascript to check that the entered data is available and of a correct format before submitted the form.

• Check that you have all the data in the format required.
• When ready, INSERT the data into the 'players' table in the 'webdev' database.
• Insert a few players from the following list to ensure that it works.

• Check 'team.php' and 'players.php' to ensure that the data appears as expected.

Next: Summary