Web engineering

Lecture # 3
Presented by: Usman Shafique
Today’s lecture
• Communication and planning
• HTML Form
• HTML 5
Communication and Planning
• The communication and planning is based on the requirements
Engineering.
• Requirements Engineering are the principles (i.e rules), methods and
tools to identify the requirements by querying (i.e. Eliciting),
describing the problems, validating according to the rules (following
the rules to solve the problem) and managing the project (i.e. in time
completion and fulling all the defined goals and requirements).
Why do we need Requirements?
Bell & Thayer (1976)
Requirements don’t define themselves
For a Web Application, a Web Eng. has to define or model the requirements according
to the architecture, i.e. how to use with the system.
Boehm (1981)
Removal of mistakes after the development of web application
It is more costly and time consuming to remove the mistakes that were done
during the development of web application

The Standish Group (1994)

30% of projects fail before completion & almost half do not meet customer requirements

Unclear objectives, unrealistic schedules & expectations, poor user participation

Requirements Specifications
1. Correct
Correspond to actual need; we have to identify the correct requirements for the
project

2. Unambiguous
All requirements should be well defined and explained

3. Complete
For a good application we have to add more requirements that will make the project
better for the end-users

4. Consistent
Conflicting requirements should be avoided
Requirements Specifications
5. Ranked for importance and/or stability
Requirements are not equally important
Requirements are not equally stable
For example: Facebook and Twitter.

6. Modifiable
Can be restructured quickly
Adopt cross reference
Requirements are clearly separated

7. Traceable
Can be tracked from originating design documentation
Types of Requirements
Functional – describes the capability’s purpose
e.g., the ability to transfer money between user accounts

Non-functional – describes the capability’s properties

e.g., the Home Page must load within 5 seconds on a dial-up connection
Functional Requirement Types
1. Data Requirements
How information is stored and managed

2. Interface Requirements
How the user is going to interact with the application

3. Navigational Requirements
How the user is going to navigate through the application

4. Personalization Requirements
How the application adapt itself according to user or environment profile

5. Transactional Requirements
How the application behave internally
Non-Functional Requirement Types
1. Content
How much content should be displayed on web page?
What contents are needed on a web page?

2. Quality
Functionality, Usability, Portability, Scalability, Security, Maintainability

3. System Environment

4. User Interface
Self-explanatory & intuitive
Usage-centered design
The Requirements Collection Process
Elicitation &
Negotiation

Management Specification

Validation &
Verification
The <form> tag
• The <form arguments> ... </form> tag encloses form
elements (and probably other elements as well)
• The arguments to form tell what to do with the user input
• action="url" (required)
• Specifies where to send the data when the Submit button is clicked
• method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the end
• Can be used only if data is all ASCII and not more than 100 characters
• method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
• target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
12
The <input> tag
• Most, but not all, form elements use the input tag, with a type="..." argument
to tell which kind of element it is
• type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or
image
• Other common input tag arguments include:
• name: the name of the element
• id: a unique identifier for the element
• value: the “value” of the element; used in different ways for different values of type
• readonly: the value cannot be changed
• disabled: the user can’t do anything with this element
• Other arguments are defined for the input tag but have meaning only for certain values of
type

13
Text input
A text field:
<input type="text" name="textfield" value="with an initial value" />

A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>

A password field:
<input type="password" name="textfield3" value="secret" />

• Note that two of these use the input tag, but one uses textarea
14
Buttons
• A submit button:
<input type="submit" name="Submit" value="Submit" />
• A reset button:
<input type="reset" name="Submit2" value="Reset" />
• A plain button:
<input type="button" name="Submit3" value="Push Me" />

• submit: send data

• reset: restore all form elements to

their initial state
• button: take some action as specified
by JavaScript
• Note that the type is input, not “button”

15
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1" />
male<br>
<input type="radio" name="radiobutton" value="myValue2”
checked="checked" />female

• If two or more radio buttons have the same name, the user can
only select one of them at a time
• This is how you make a radio button “group”
• If you ask for the value of that name, you will get the value
specified for the selected radio button
• As with checkboxes, radio buttons do not contain any text
16
Labels
• In many cases, the labels for controls are not part of the control
• <input type="radio" name="gender" value="m" />male
• In this case, clicking on the word “male” has no effect
• A label tag will bind the text to the control
• <label><input type="radio" name="gender" value="m" />male</label>
• Clicking on the word “male” now clicks the radio button
• w3schools says that you should use the for attribute:
• <label for="lname">Last Name:</label>
<input type="text" name="lastname" id="lname" />
• In my testing (Firefox and Opera), this isn’t necessary, but it may be for
some browsers
• Labels also help page readers read the page correctly
• Some browsers may render labels differently

17
Checkboxes
• A checkbox:
<input type="checkbox" name="checkbox"
value="checkbox" checked="checked">

• type: "checkbox"
• name: used to reference this form element from JavaScript
• value: value to be returned when element is checked
• Note that there is no text associated with the checkbox
• Unless you use a label tag, only clicking on the box itself has any
effect

18
Drop-down menu or list
• A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

• Additional arguments:
• size: the number of items visible in the list (default is "1")
• multiple
• if set to "true" (or just about anything else), any number of items may be
selected
• if omitted, only one item may be selected
• if set to "false", behavior depends on the particular browser
19
Hidden fields
• <input type="hidden" name="hiddenField" value="nyah">
&lt;-- right there, don't you see it?

• What good is this?

• All input fields are sent back to the server, including hidden fields
• This is a way to include information that the user doesn’t need to see (or
that you don’t want her to see)
• The value of a hidden field can be set programmatically (by JavaScript)
before the form is submitted

20
A complete example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<label><input type="radio" name="gender" value="m" />Male<label>
<label><input type="radio" name="gender" value="f" />Female</label>
</p>
</form>
</body>
</html>
21
Form Fields
Form Fields
Form Fields
Form Fields
Form Fields
Other Form Controls (3)
• Password input – a text field which masks the entered text with
* signs <input type="password" name="pass" />

• Multiple select field – displays the list of items in multiple lines,

instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
28
Other Form Controls (4)
• File input – a field used for uploading files
<input type="file" name="photo" />
• When used, it requires the form element to have a specific
attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

29
Labels
• Form labels are used to associate an explanatory text to a form
field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

• Clicking on a label focuses its associated field (checkboxes are

toggled, radio buttons are checked)
• Labels are both a usability and accessibility feature and are
required in order to pass accessibility validation.

30
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
31 <input type="text" name="lname" id="lname" />
HTML Forms – Example (2)
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>

32
HTML Forms – Example (3)
form.html (continued)

33
TabIndex
• The tabindex HTML attribute controls the order in which form fields
and hyperlinks are focused when repeatedly pressing the TAB key
• tabindex="0" (zero) - "natural" order
• If X > Y, then elements with tabindex="X" are iterated before elements with
tabindex="Y"
• Elements with negative tabindex are skipped, however, this is not defined in
the standard

<input type="text" tabindex="10" />

34
HTML 5??
1. History, Vision & Future of HTML5
1.1 What Is HTML5?

• Successor of HTML 4.01 and XHTML 1.1

• It comes with new tags, features and APIs
• Below is a non exhaustive list of features that tend to be labelled as "HTML5" in the medias:
• New structural elements (<header>, <footer>, <nav> and more)
• Forms 2.0 and client-side validation
• Native browser support for audio and video (<video>, <audio>)
• Canvas API and SVG
• Web storage
• Offline applications
• Geolocation
• Drag & Drop
• Web Workers
• New communications API (Server Sent Events, Web Sockets, …)
1. History, Vision & Future of HTML5
1.2 History of HTML5?

• December 1997: HTML 4.0 is published by the W3C

• February - March 1998: XML 1.0 is published

• December 1999 - January 2000: ECMAScript 3rd Edition, XHTML 1.0 (Basically HTML tags
reformulated in XML) and, HTML 4.01 recommendations are published

• May 2001: XHTML 1.1 recommendation is published

• August 2002: XHTML 2.0 first working draft is released.

• December 2002: XHTML 2.0 second working draft published.

• January 2008: First W3C working draft of HTML5 is published!!