cse 3345 - graphical user interfaces
DESCRIPTION
CSE 3345 - Graphical User Interfaces. Lecture 2 – HTML + Forms. Giving more meaning to content. Professor X Kitty Pride Scott Summers. vs. Professor X Kitty Pride - PowerPoint PPT PresentationTRANSCRIPT
CSE 3345 - Graphical User Interfaces
Lecture 2 – HTML + Forms
CSE 3345 2
Giving more meaning to contentProfessor XKitty PrideScott Summers
<class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students></class>
vs
CSE 3345 3
Web UIs
Generally consist of 3 parts
1. Structure2. Presentation3. Behavior
CSE 3345 4
3 Parts of UI
StructureSpecifies what the different parts of the content are and how they are related
PresentationHow the content should be displayed
BehaviorHow the content reacts and changes based on user interaction
CSE 3345 5
3 Parts of UI
Structure == HTML
Presentation == CSS
Behavior == Javascript
Web Uis
A different analogy1. Nouns2. Adjectives3. Verbs
“The big green ball bounces up and down.”
Web Uis
A different analogy1. Nouns - HTML2. Adjectives - CSS3. Verbs - Javascript
“The big green ball bounces up and down.”
CSE 3345 8
Separation of content
• Modern best practice says that each should be separate and only used for its intended purpose
CSE 3345 9
Why?
1. Flexibility2. Re-usability3. Ease of debugging4. Cleaner code5. Maintainability6. Graceful Degradation
HTML
HTML
CSS
Javascript
UI
Separation of Slides
HTML
CSE 3345 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 contentProfessor XKitty PrideScott Summers
<class> <teacher>Professor X</teacher> <students> <student age=“17”>Kitty Pride</student> <student age=“16”>Scott Summers</student> </students></class>
vs
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.
<div id=“pbj” class=“directions”> <h2>How to make PB&J Sandwiches</h2> <ol> <li><span class=“step”>Step 1:</span> do this</li> </li><span class=“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
Element Description<body> Represents the main content of an HTML document. There
is only one <body> element in a document.
<section> Defines a section in a document.
<nav> Defines a section that contains only navigation links.
<article> Defines self-contained content that could exist independently of the rest of the content.
<aside> Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Heading elements implement six levels of document headings; <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces.
<header> Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of 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
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 Doctype goes 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>
HTML Forms
• A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input.
CSE 3345 32
Form Example
CSE 3345 33
How a form works
Facebook serverTom’s computer
Form Controls
• Types of controls:– Button– Checkbox– Radio button– Hidden Control– File Select– Text input– Menus– Others
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” />
Buttons
1. Submit - When activated, it will submit a form for processing.
2. Reset - When activated, it will reset all controls to their initial value.
3. Push- Have no default behavior. Use these for client-side scripts.
Button example
<input type=“submit” value=“Process form”/>
<input type=“reset” value=“Reset form”/>
<input type=“button” value=“Push button”/>
CSE 3345 38
The “Log In” button is an example of a submit button. When the user presses the “LogIn” button it will process the user information and try to log the user into facebook.
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.
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
Checkbox Example<input type=“checkbox” name=“interests” value=“cooking”/><input type=“checkbox” name=“interests” value=“eating”/><input type=“checkbox” name=“interests” value=“coding”/>
CSE 3345 42
“Keep me logged in” is a checkbox.
Radio Button
• Similar to checkboxes except when several share the same name attribute, they are mutually exclusive.
• Browser behavior for any radio groups which don’t specify an “on” radio button is undefined.
Radio Button Example<input type=“radio” name=“gender” value=“male” /><input type=“radio” name=“gender” value=“female” />
CSE 3345 45
“Gender choice” is a radio box.
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
Hidden Example<input type="hidden" name="orderNumber" id="orderNumber" value="0024“ />
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.– (Not really)
File Select Example<input type="hidden" name="MAX_FILE_SIZE" value="500" /><input type="file" name="uploadField" />
Text Input
• Textfield – a single line text input control
• Textarea – a multiline text input control
Textfield
• Set the input element’s type attribute to text
• Is the default value for input controls
• Designed to capture single words or phrases from a user
• Use the maxlength attribute to restrict the number of characters for a field.
Textfield Example
<input type=“text” name=“username” />
CSE 3345 53
Each of these boxes are textfield inputs and only take one piece of information each.
Textarea
• Used for large blurbs of text
• Use the <textarea> element
• Any data between the beginning and end tags will be rendered as the textarea’s default text.
Textarea
• Use the attributes row and cols to control the render size of the textarea. – Doesn’t limit character input
• Use the wrap attribute to determine how text will react when it reaches the end of a row for the textarea.– soft -forces words to wrap, but formatted text isn’t sent to
be processed. – hard – forces words to wrap and will be processed by
server as shown.– off – ignores wrapping and places text in one long line.
Textarea Example<textarea cols="20" rows="5" wrap="hard"> As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read and preserves line breaks. </textarea>
Menus
• Aka “drop-down-list”
• Similar to checkboxes because they allow users to select one or more values.
• Use multiple attribute with value set to yes to allow users to select multiple values with Ctrl+click
Menus
• Use the <select> element to define the menu
• Use the <option> element to specify an item in the menu.
• Use the <optgroup> element to group related options together.
Menu Example
<select id=“foreignCars”> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup></select>
CSE 3345 60
The controls for selecting your birthday are menu inputs.
Other Controls
• url• Password• Telephone• Etc
See w3c for more details.
CSE 3345 62
Form action attribute
• Forms rely on an action attribute to specify where to send the form data.
HTML Form action attribute
• Specifies a form processing agent (PHP, Python, Ruby, etc. script)
• Usually an HTTP URI
• Could launch an email client. Useful for debugging
<form name="myWebForm" action="mailto:[email protected]" method="post">
<input type="checkbox" /> Checkbox 1<br /> <input type="text" /> Text Field 1<br /> <input type="submit" value="SUBMIT" />
</form>
CSE 3345 64
Form method attribute
• Forms rely on a method attribute to specify how to process the form data.
HTML Form method attribute
• Specify the HTTP method to submit the form
• Two possible values:– get– post
Let’s give it a try!