1. Web Systems Development (CSC-215)
Lecture 9: Form Handling Elements
Wednesday 28th February 2018

2. Midterm 1 Coming up next week Lectures 1-10
50% written (determine output of code and possibly MCQs)
50% practical (similar to lab test)
Confirm desktop/laptop usage for midterm today

3. Elements of a Form
An opening <form> and closing </form> tag
A submission type specifying either a GET or POST method
One or more input fields
The destination URL to which the form data is to be submitted

4. Simple Form

5. Form that displays back entered data

6. Default Values

7. Input Types: Text boxes

8. Input Types: Text area
For larger pieces of text

10. Input Types: Checkboxes

11. Multiple Value Checkboxes

12. Possible values returned

13. Input Types: Radio Buttons

14. Input Types: Hidden Fields

15. Input Types: <select>

16. Input Types: <select>

17. Input Types: <select>

18. Input Types: Labels
Makes entire area clickable
Better user experience

19. Input Type: Submit

20. HTML5 Enhancements to form handling New attributes
Color, date and time pickers
New input types

21. autocomplete Attribute
Applied to <form> and selected <input> types

22. placeholder Attribute

23. required Attribute

24. color Input Type
Implementation may vary slightly across browsers

25. Practice Activity (not to be submitted)
Create a page which displays a color picker to the user
When the user picks a color and submits it, the page is redisplayed with the background color as per the choice
Use only one source file

26. Practice Activity (not to be submitted)
Create a form that lets the user create an order for one ice cream and creates a bill based on the following. (Create two source files, one to collect the order, and one to display the bill)
Flavor (give four options, select one)
Type (select one)
Cup (Rs. 200)
Cone (Rs. 250)
Toppings (select more than one)
Sprinkles (Rs. 20)
Chocolate sauce (Rs. 20)
Raspberry sauce (Rs. 30)

27. Lecture content adapted from chapter 12 of Learning PHP, MySQL, JavaScript, CSS & HTML5.