This is an introduction to HTML forms and PHP for processing the data. It is aimed at AS level students to enable them to complete the OCR ICT coursework task 3.
When investigating the methods that OCR would accept for this task I considered the following:
- A form building web app such as Wufoo, I created an exemplar to show my department that this would meet the success criteria of the task https://achris.wufoo.com/forms/school-prodcuction-of-grease-ticket-request-page/ however when I contacted OCR and posted on their forums to ensure that this would be accepted, I got no answer from them or their forum. I did read their FAQ which states
4. Does the website require complex coding or a back-end database?
There are many ways to meet the criteria of the task. There are many pieces of software which will enable this task to be done requiring no more than AS Level skills. It may also be solved using PHP/ASP coding if this is taught by the centre at AS level and is possible given the ICT setup in the centre. The candidate is not marked on the method used, but the end result.This is a vague statement which is why I wanted verification that using Wufoo would be acceptable.
- Javascript, this idea was posted on the OCR forums, I didn’t like this as it seemed like a messy idea and very unrealistic to teach the students
- PHP, this would be very easy for me to teach as it only requires two distinct lines of PHP, but I had some concern that the concepts of coding for students with no prior coding experience might be too hard to learn in the time available?
The Decision
My department decided to use PHP, the difficulties with this turned out to be mainly getting a PHP server set up internally as our IT network management team seem to have a high backlog of maintenance and support to deal with and as a teacher I am not authorised to perform such complicated IT services as setting up XAMPP! 😉
We also decided to teach the students to hand code their HTML and CSS. I am very pleased with this as I believe it will give them a much greater appreciation of how the technology of their websites fits together, I also think it won’t be so much of a conceptual leap to go from HTML and CSS to adding in the few lines of code required to store the form parameters in variables and then output them to the web page. We are also using CSS layout rather than tables (phew), so as long as I can manage to enthuse and excite the students when I am teaching them all this, it should end fantastically.
Here is the HTML form and PHP tutorial I am writing for the Scheme of Work, I based this off the W3Schools which is a great resource for getting started with HTML, CSS, PHP and more. The only thing I wish they would change is their sandbox to make it more like https://htmlsandbox.com/, as the extra room makes displaying CSS layouts better, but unfortunately doesn’t work on our school PC’s.
The Form
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.
The <form> tag is used to create an HTML form:
| <form name=”order_tickets” action=”confirmation.php” method=”post”> . input elements . </form> |
This tag will not show anything in the browser by itself, only the form elements will be displayed.
The tag has 3 attributes ‘name’, ‘action’ and ‘method’.
Name – this allows us to access the form and it’s fields later on.
Action – this is the file we will be sending the form data to.
Method – is the way the data is sent to the web server
The form element types are shown below.
Text Fields
<input type=”text” /> defines a one-line input field that a user can enter text into:
| <form> First name: <input type=”text” name=”firstname” /><br /> Last name: <input type=”text” name=”lastname” /> </form> |
How the HTML code above looks in a browser:
First name: Last name:
Note: First name and Last name are labels to make it clear to the user what to enter into the field.
Drop-down Fields
<select> allows the user to select from a drop-down list
| <select name=”payment_methods”> <option value=”visa”>Visa</option> <option value=”cheque”>Cheque</option> <option value=”cash”>Cash</option> </select> |
How the HTML code above looks in a browser:
VisaChequeCash
Submit Button
<input type=”submit” /> defines a submit button.
| <input type=”submit” value=”Submit” /> |
The new attribute on this element is the value, this is the text which will appear on the button.
How the HTML code above looks in a browser:
The Entire Form
Here is the entire form
| <form name=”input” action=”confirmation.php” method=”post”> First name: <input type=”text” name=”firstname” /><br /> Last name: <input type=”text” name=”lastname” /> <input type=”submit” value=”Submit” /> </form> |
Using PHP to process the form
PHP has it’s own HTML tag set, it starts with <?php and ends with ?>.
This tells the web server to expect PHP code and to process it accordingly. Some of the results will be sent to the users browser and some parts will be used internally for example in a database.
.
php code
.
?>
Accessing the form elements from the php script
The form data is passed to confirmation.php.
The next step is to pull each field into a php variable, you can think of variables as empty boxes ready for you to fill with data. Storing data in a variable allows the data to be processed.
Examples of processing the data can include, validating it, storing it in a database, emailing it and returning it to the browser for display.
$firstname = $_POST["firstname"];
?>
This line of code can be looked at as 3 sections.
The first section is $firstname is the variable, this will store the data that was sent through from order.html.
Next is an = this means we want the variable to store the data.
The third section is $_POST[“firstname”]; this searches through the form for the field firstname and the value in this field is what will be stored in the variable.
Displaying the variables on the web page
Now that we have some variables with data stored in them we can write some more PHP to output these to the web page.
To do this requires a mixture of HTML and PHP on one line.
The HTML is used to create a label to explain to the user what they are looking at.
First Name –
I welcome any feedback, if I have missed anything or made a mistake please let me know in the comments, thank you
Recent Comments