IT8078 WEB DESIGN AND MANAGEMENT
1
FORMS AND HTML5
Form basics
Objectives
2
FORM BASICS – WEB DATA
Most interesting web pages revolve around data
• Examples: Google, IMDB, Digg, Facebook, YouTube, Rotten Tomatoes
• Can take many formats: text, HTML, XML, multimedia
Many of them allow us to access their data
Some even allow us to submit our own new data
Most server-side web programs accept parameters that guide their
execution
3
HTML FORMS
HTML Forms are required when you want to collect some data from the
site visitor.
For example registration information: name, email address, credit card,
etc. Form elements are like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc. which are used to take
information from the user.
4
HTML FORMS
form: a group of UI controls that accepts information from the user and
sends the information to a web server
the information is sent to the server as a query string
5
FORM ATTRIBUTES
name: This is the name of the form.
action: Here you will specify any script URL which will receive uploaded data.
method: Here you will specify method to be used to upload data. It can take
various values but most frequently used are GET and POST.
target: It specifies the target page where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.
6
HTML FORM: <FORM>
Required action attribute gives the URL of the page that will process this form's
data
When form has been filled out and submitted, its data will be sent to the
action's URL
<form action="destination URL">
form controls
</form>
7
FORM EXAMPLE
Wrap the form's controls in a block element such as div
<form action="http://www.google.com/search">
<div>
Let's search Google:
<input name="q" />
<input type="submit" />
</div>
</form>
First Paragraph
8
FORM CONTROLS: <INPUT>
input element is used to create many UI controls
an inline element that MUST be self-closed
name attribute specifies name of query parameter to pass to server
<!-- 'q' happens to be the name of Google's required
parameter -->
<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" />
9
FORM CONTROLS: <INPUT> (CONT.)
type can be button, checkbox, file, hidden, password, radio, reset, submit,
text, ...
value attribute specifies control's initial text
<!-- 'q' happens to be the name of Google's required
parameter -->
<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" />
10
TEXT FIELDS: <INPUT>
input attributes: disabled, maxlength, readonly, size, value
size attribute controls onscreen width of text field
maxlength limits how many characters user is able to type into field
<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In" />
11
TEXT BOXES: <TEXTAREA>
initial text is placed inside textarea tag (optional)
required rows and cols attributes specify height/width in characters
optional read only attribute means text cannot be modified
<textarea rows="4" cols="20">
Type your comments here.
</textarea>
12
CHECK BOXES: <INPUT>
none, 1, or many checkboxes can be checked at same time
<input type="checkbox" name="lettuce" /> Lettuce
<input type="checkbox" name="tomato" checked="checked" />
Tomato
<input type="checkbox" name="pickles" /> Pickles
13
RADIO BUTTONS: <INPUT>
grouped by name attribute (only one can be checked at a time)
must specify a value for each one or else it will be sent as value on
<input type="radio" name="cc" value="visa"
checked="checked" /> Visa
<input type="radio" name="cc" value="mastercard" />
MasterCard
<input type="radio" name="cc" value="amex" /> American
Express
14
TEXT LABELS: <LABEL>
associates nearby text with control, so you can click text to activate control
can be used with checkboxes or radio buttons
label element can be targeted by CSS style rules
<label><input type="radio" name="cc" value="visa"
checked="checked" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" />
MasterCard</label>
<label><input type="radio" name="cc" value="amex" />
American Express</label>
15
DROP DOWN LISTS: <SELECT>, <OPTION>
option element represents each choice
select optional attributes: disabled, multiple, size
optional selected attribute sets which one is initially chosen
<select name="favoritecharacter">
<option>Frodo</option>
<option>Bilbo</option>
<option selected="selected">Gandalf</option>
<option>Galandriel</option>
</select>
16
USING: <SELECT> FOR LISTS
optional multiple attribute allows selecting multiple items with shift- or ctrl-click
must declare parameter's name with [] if you allow multiple selections
option tags can be set to be initially selected
<select name="favoritecharacter[]" size="3"
multiple="multiple">
<option>Frodo</option>
<option>Bilbo</option>
<option>Gandalf</option>
<option>Galandriel</option>
<option selected="selected">Aragorn</option>
</select>
17
OPTION GROUPS: <OPTGROUP>
What should we do if we don't like the bold italic?
<select name="favoritecharacter">
<optgroup label="Major Characters">
<option>Frodo</option>
<option>Sam</option>
<option>Gandalf</option>
<option>Aragorn</option>
</optgroup>
<optgroup label="Minor Characters">
<option>Galandriel</option>
<option>Bilbo</option>
</optgroup>
</select>
18
COMPLETE EXAMPLE
1. Write an essay on HTML.
19
HTML5 - INTRODUCTION
HTML5 is the new standard for HTML.
The previous version of HTML was – HTML 4.01, came in 1999.
HTML5 is designed to deliver almost everything you want to do online without
requiring additional plugins.
It does everything from animation to apps, music to movies, and can also be
used to build complicated applications that run in your browser.
HTML5 is also cross-platform (it does not care whether you are using a tablet or
a smartphone, a notebook, notebook or a Smart TV).
20
BROWSER SUPPORT FOR HTML5
HTML5 is not yet an official standard, and no browsers have full HTML5
support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer)
continue to add new HTML5 features to their latest versions.
21
MINIMUM HTML5 DOCUMENT
Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
22
HTML5 NEW ELEMENTS
The New <canvas> Element
New Media Elements
New Semantic/Structural Elements
Removed Elements
New Form Elements
23
THE NEW <CANVAS> ELEMENT
The <canvas> element is used to draw graphics, on the fly, via scripting (usually
JavaScript).
24
NEW MEDIA ELEMENTS
25
NEW SEMANTIC/STRUCTURAL ELEMENTS
26
NEW SEMANTIC/STRUCTURAL ELEMENTS
27
NEW SEMANTIC/STRUCTURAL ELEMENTS
28
REMOVED ELEMENTS
29
HTML5 CANVAS
30
HTML5 INLINE SVG
31
SVG ADVANTAGES
32
SVG VS CANVAS
33
HTML5 GEOLOCATION
34
HTML5 GEOLOCATION API
35
HTML5 VIDEO
36
HTML5 AUDIO
37
NEW FORM ELEMENTS, ATTRIBUTES & TYPES
38
INTRODUCTION
HTML5 web forms introduced new form elements, input types, attributes ,and
other features.
Many features using in our interfaces: form validation, combo boxes,
placeholder text, and the like.
Marking up forms easier on the developer, also better for the user.
39
EVALUATION
Forms section of HTML5 was titled Web Forms 2.0 that added new types for
forms.
Started by Opera and edited by Opera employee Ian Hickson, was submitted
to theW3C in early 2005.
Combined with Web Applications 1.0 to create the basis of Web Hypertext
Application TechnologyWorking Group (WHATWG) HTML5 specification.
40
HTML5 FORMS
HTML forms are used to collect user input.
Html form contains form elements.
Example:
<form>
.
form elements
.
</form>
HTML5 New Form Elements
HTML5 New Form Attributes
HTML5 New Element Types
41
CRITERIA
HTML5 form element must be complete to the following criteria:
It must include pleasant and working UI.
able to use CSS to style the element, especially the UI that we generate.
This includes any pre-defined pseudo-selectors (invalid, required, icon
etc.)
It should be fully accessible.
42
NEW FORM ELEMENT
HTML5 added the following form elements:
1. <datalist>
2. <keygen>
3. <output>
43
NEW FORM ELEMENT <DATALIST>
The <datalist> element specifies a list of pre-defined options for an
<input> element.
The list is created with <option> elements inside the <datalist>
44
NEW FORM ELEMENT <KEYGEN>
The <keygen> Defines a key-pair key-pair generator field used for forms.
When the form submitted, the private key is stored locally, and the public key is
sent to the server.
The purpose of the <keygen> element is to provide a secure way to
authenticate users.
45
NEW FORM ELEMENT <OUTPUT>
The <output> tag represents the result of a calculation.
46
ATTRIBUTES OF THE <DATALIST> ELEMENT
The <output> tag represents the result of a calculation.
47
ATTRIBUTES OF THE <DATALIST> ELEMENT
Example
48
ATTRIBUTES OF <KEYGEN> ELEMENT
Example
49
ATTRIBUTES OF <KEYGEN> ELEMENT
Example
50
ATTRIBUTES OF THE <OUTPUT> ELEMENT
Example
51
ATTRIBUTES OF THE <OUTPUT> ELEMENT
Example
52
HTML5 FORMS
New input types
New rendering
New input features
Ex: Placeholder Text, AutoFocus
53
TYPES OF THE <INPUT> ELEMENT
HTML5 gives us input types that provide for more data-specific UI elements and
native data validation. HTML5 has a total of 13 new input types:
54
INPUT EXAMPLE
New input types
55
INPUT EXAMPLE - VALIDATION
New input types
56
NEW ATTRIBUTES
New input types
57
PATTERN – HTML5PATTERN.COM
58
SUMMARY
HTML5 is still work in progress and not due to completely roll out until
the latter part of 2011.
There is no urgency to redesign a Web site using the new iteration of
the language.
Only a handful of major brands, including Mozilla Firefox and Google
Chrome, currently support HTML5 elements.
Those companies’ browsers are only a small fraction of the browsing
populations.
Microsoft’s Internet Explorer is the most widely used browser and
currently has the least amount of support for HTML5.
59
SELF-CHECK EXERCISE
1. Write an essay on HTML.
60
