~~SLIDESHOW~~ ====== Forms and Web User Interfaces ====== **Contact Hour 4**: To be discussed on Tuesday 5th February, 2013. **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]]. Forms are the most common way to communicate from a browser to a web server. They are also created using HTML tags. ---- These notes are based on Sections 2.9 and 2.11 of Robert W. Sebasta, //Programming the World-Wide Web//, 3rd Edition, Addison Wesley, 2006. This material is expanded in Chapter 3 of Nigel Chapman and Jenny Chapman, //Web Design: A complete introduction//, Wiley, 2006. Some additional attributes that have been added in HTML5 have been added to this discussion this year. ===== Forms and Web User Interfaces ===== * In this lecture we complete our revision of the most commonly used subset of the Hypertext Markup Language (HTML). * We look at forms which are the most common way to communicate information from a user to a web server. * Forms are the user-interface of web applications. * As before, examples are on-line and code is reproduced in the handout. * The new form elements added by HTML5 will be discussed in a later session. ---- Further reading. E.g.: A different treatment of HTML given in Chapter 3 of Chapman and Chapman, //Web Design: a complete introduction//, John wiley, 2006 and Part I (Chapters 2-3) of the textbook Chris Bates, //Web Programming: Building Internet Applications//, 3rd Edition, John Wiley, 2006. However, you should note that Bates tends to use the simpler form of HTML which is perfectly valid, but doesn't match the stricter conventions we are used to from our study of XHTML. You will find additional information about web forms and further examples in Chapter 14 of Elisabeth Freeman and Eric Freeman, //Head First HTML with CSS & XHTML//, O'Reilly Media,Inc., 2006. Information about the new attributes and new form elements are to be found in [[http://diveintohtml5.info/forms.html|Chapter 9 A Form of Madness]] of [[http://diveintohtml5.info|Dive Into HTML5]]. ===== About the Examples ===== Before these examples will work you will need to install the EG-259 Virtual Machine. See the instructions at [[https://github.com/cpjobling/eg-259-vm]]. * Go directly to the examples: http://localhost:4567/eg-259/examples/lecture3 * Browse the source code on GitHub: [[https://github.com/cpjobling/eg-259-vm/tree/master/web/eg-259/examples/lecture3|eg-259/examples/lecture3]] ===== Contents ===== User interfaces for Web Applications. * [[eg-259:lecture3#forms|Forms]] * [[eg-259:lecture3#user_interface_components_widgets|User Interface Components (Widgets)]] * [[eg-259:lecture3#useful_attributes_added_by_html5|Useful Attributes Added by HTML5]] * [[eg-259:lecture3#two_examples|Two Examples]] ===== Learning Outcomes ==== Consider converting these into multiple choice questions for the PeerWise exercise. //At the end of this lecture you should be able to answer these questions//: - What are controls? - Which controls discussed in this session are created with the '''' tag? - What is the default size of a text control's text box? - What is the difference between the ''size'' and ''maxlength'' attributes of '''' for text controls? ===== Learning Outcomes – Forms (continued) ===== //At the end of this lecture you should be able to answer these questions//: - What is the difference in behaviour between a group of check box buttons and a group of radio buttons? - Under what circumstances is a menu used instead of a radio button group? - What is the drawback of specifying the ''multiple'' attribute with a menu? - How are scroll bars specified for text-area controls? ===== Learning Outcomes – Forms (continued) ===== //At the end of this lecture you should be able to answer these questions//: - What does the new HTML5 attribute ''placeholder'' do? - What is the new HTML5 attribute ''autofocus'' for? - What is the new HTML5 attribute ''required'' for? - Why is the choice of ''method="get"'' as the default for the form element a bad thing? ===== Forms ===== * A form is the usual way information is gotten from a user to a web application * HTML has tags to create a collection of objects that implement this information gathering * The objects are called //controls// or //widgets// (e.g., radio buttons and checkboxes) * When the //submit// button of a form is clicked, the form's values are collected by the browser and are sent to the server in an HTTP request. ===== The Form Element ===== * The ''