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