CSE 3345 - Graphical User Interfaces

1. CSE 3345 - Graphical User Interfaces Chris Raley craley@smu.edu Lecture 2 – HTML + Forms

2. Giving more meaning to content Professor X Kitty Pride Scott Summers vs <class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students> </class> CSE 3345

3. Web UIs Generally consist of 3 parts • Structure • Presentation • Behavior CSE 3345

4. 3 Parts of UI Structure Specifies what the different parts of the content are and how they are related Presentation How the content should be displayed Behavior How the content reacts and changes based on user interaction CSE 3345

5. 3 Parts of UI Structure == HTML Presentation == CSS Behavior == Javascript CSE 3345

6. Web Uis A different analogy • Nouns • Adjectives • Verbs “The big green ball bounces up and down.”

7. Web Uis A different analogy • Nouns - HTML • Adjectives - CSS • Verbs - Javascript “The biggreenballbounces up and down.”

8. Separation of content • Modern best practice says that each should be separate and only used for its intended purpose CSE 3345

9. Why? • Flexibility • Re-usability • Ease of debugging • Cleaner code • Maintainability • Graceful Degradation CSE 3345

10. Separation of Slides HTML CSS HTML UI Javascript

11. HTML

12. HTML Quick facts • HTML – Hyper Text Markup Language • Largely based on SGML • Created by Tim Berners-Lee at CERN CSE 3345

13. What is HTML • The structure of a web page • The content which makes up a web page • A text-formatted language CSE 3345

14. What HTML is NOT • A programming language • Presentation • Behavior CSE 3345

15. Why use HTML • Gives developers the ability to add semantic meaning to their content. semantic- Relating to meaning in language or logic. CSE 3345

16. Giving more meaning to content Professor X Kitty Pride Scott Summers vs <class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students> </class> CSE 3345

17. Why use HTML • Provides the foundation for users to skin their web pages with CSS and add logic with Javascript. CSE 3345

18. HTML element review • <h1-h6> • <a> • <p> • <table>, <tr>, <th>, <td> • <img> • <div>, <span> • <form> • <input> CSE 3345

19. Universal HTML Attributes • id – an unique identifier to the element • class – assigns one or more class names to the element CSE 3345

20. id • Unique – only one CSE 3345

21. class • Shared among many elements CSE 3345

22. Adding Structure • Try to find an appropriate HTML element for your content. • Use <p> for text • Use <a> for links • The div and span element in conjunction with id and class attributes offer a generic method for adding structure to documents. CSE 3345

23. Grouping Elements • Use <div> and <span> to generically organize or style content in your HTML document. <divid=“pbj”class=“directions”> <h2>How to make PB&J Sandwiches</h2> <ol> <li><spanclass=“step”>Step 1:</span> do this</li> </li><spanclass=“step”>Step 2:</span> do that</li> </ol> </div> CSE 3345

24. DIV vs SPAN • Div is a block element • Span is an inline element Other than this, these elements provide no other presentational impact (Unless styled with CSS). See example explanation here. CSE 3345

25. Why group elements? • Grouping elements helps structure your document when creating sections of content CSE 3345

26. More specific elements for organizing content CSE 3345

27. Bad HTML • <blink> - makes text blink • <marquee> - makes text scroll • <b> - makes text bold • <u> - makes text underlined • <font> - changes font family, color, and size • <i> - makes text italic • <center> - centers text • <big> -Makes text BIG • <small> - Makes text small Look here for more bad elements and attributes. CSE 3345

28. HTML Doctype • A set of agreed upon rules for valid HTML elements and attributes. • You should always include a Doctype in your HTML documents! (Remember, the Doctypegoes before the root element.) • Useful for validating your HTML. CSE 3345

29. HTML5 Doctype • We will be using the HTML5 Doctype for all HTML documents. • HTML5 Doctype Declaration • <!DOCTYPE HTML> CSE 3345

30. Let’s Dive in <!DOCTYPE HTML> <html> <head><title>Let’s Dive in</title></head> <body> <div> <h1>What is HTML?</h1> <p>HTML is the root of web pages and the backbone of web user interfaces.</p> <strong>I love HTML</strong> </div> </body> </html> CSE 3345

31. HTML Forms • A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input.

32. Form Example CSE 3345

33. How a form works Tom’s computer Facebook server CSE 3345

34. Form Controls • Types of controls: • Button • Checkbox • Radio button • Hidden Control • File Select • Text input • Menus • Others

35. Form controls • Use the <input> element to create a control • Set the value of the type attribute to the desired control • Set the id and name attribute to use as a link between your form and the processing script. <input type=“button” />

36. Buttons • Submit - When activated, it will submit a form for processing. • Reset - When activated, it will reset all controls to their initial value. • Push- Have no default behavior. Use these for client-side scripts.

37. Button example <input type=“submit” value=“Process form”/> <input type=“reset” value=“Reset form”/> <input type=“button” value=“Push button”/>

38. The “Log In” button is an example of a submit button. When the user presses the “Log In” button it will process the user information and try to log the user into facebook. CSE 3345

39. Checkboxes • On/off switches that can be toggled by the user • A checkbox is “on” when the element’s checked attribute is true • Several checkboxes in a form can have the same name attribute. • This is used to select multiple values for the same property.

40. Checkboxes • Multiple checkboxes that have the same name can be “on” • Only “on” checkboxes can be successful. • Only “on” values will be sent for server processing

41. Checkbox Example <input type=“checkbox” name=“interests” value=“cooking”/> <input type=“checkbox” name=“interests” value=“eating”/> <input type=“checkbox” name=“interests” value=“coding”/>

42. “Keep me logged in” is a checkbox. CSE 3345

43. Radio Button • Similar to checkboxes except when several share the same nameattribute, they are mutually exclusive. • Browser behavior for any radio groups which don’t specify an “on” radio button is undefined.

44. Radio Button Example <input type=“radio” name=“gender” value=“male” /> <input type=“radio” name=“gender” value=“female” />

45. “Gender choice” is a radio box. CSE 3345

46. Hidden • Allows developers to pass additional values from a form for processing in a subtle manner. • Useful for temporary, session-based, or state data. • Not visually rendered by browser • Still visible when inspecting html

47. Hidden Example <input type="hidden" name="orderNumber" id="orderNumber" value="0024"

48. File Select • Allows users to select files so that their contents may be submitted with the form. • Useful for uploading local files to a server • Use a hidden field with the name attribute set to MAX_FILE_SIZE to limit the file size that can be uploaded.

49. File Select Example <input type="hidden" name="MAX_FILE_SIZE" value="500" /> <input type="file" name="uploadField" />

50. Text Input • Textfield – a single line text input control • Textarea – a multiline text input control