====== Web Development Lesson 8 - Forms ======
===== Exercises =====
==== Objective ====
In this activity, you will create a form to add and update data for players in the Colombian Football team.
==== Setup ====
* 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**
==== HTML Form ====
* Create a form in 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).
==== CSS ====
* Make the form look good.
* Check the other pages to ensure you aren't making them look terrible with your changes.
==== Javascript ====
* Use Javascript to check that the entered data is available and of a correct format before submitted the form.
==== PHP / MySQL ====
* 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.
^Name^Surname^Nationality^Birthdate^Age^Hometown^Position^Height^Weight^Foot^Games^Photo^
|
* Check 'team.php' and 'players.php' to ensure that the data appears as expected.
[[en:web_development:forms:summary|Next: Summary]]