CS-344: WEB ENGINEERING

Dr. Mehdi Hussain [email protected]

BESE-7AB Lecture-3ABC Fall-2018

School of Electrical Engineering and Computer Science (SEECS)

National University of Science and Technology (NUST)
Revisiting Previous Lecture
• HTML fundamentals – Basic example
• Text Formatting elements
• Style Attribute –in HTML
• Hyperlinks and Anchors
• HTML Lists – Unordered, Ordered, Definition
• HTML Tables – Rowspan and Colspan

2
 3

Outline

• General HTML Forms

• HTML 5 new Input types, forms
What are Forms?
• HTML forms are used to create (rather primitive) GUIs on Web
pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server

• A form is an area that can contain form elements

<form parameters> ...form elements... </form>

• Form elements include: buttons, checkboxes, text fields, radio

buttons, drop-down menus, etc
• Other kinds of HTML tags can be mixed in with the form elements

• A form usually contains a Submit button to send the information

in the form elements to the server

• The form’s parameters tell how to send the information to the

server
The <form> element
• The <form attributes> ... </form> tag encloses form
elements (and probably other HTML as well)

• The attributes 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
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user wants to bookmark the
result
• Better for non-secure data, like query strings in Google (Example)
The <form> element
• method="post"
• Form data is sent in the body of the URL request
• Through POST, form data contains sensitive or personal information
• POST has no size limitations, and can be used to send large
amounts of data.
• Form submissions with POST cannot be bookmarked (Example)

• 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
The <input> element
• Most, but not all, form elements use the input tag, with a
type="..." attribute 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 attributes include:

• name: the name of the element (without name data will not be sent)
• 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
• Size, maxlength, autocomplete, autofocus, step etc..
• Other arguments are defined for the input tag but have meaning only
for certain values of type
Text fields through input tag
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
Buttons through input tag
• 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

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Radio buttons through input tag
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male
<br>
<input type="radio" name="radiobutton" value="myValue2" 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

Checkboxes through input tag
• A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" 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—you have to

supply text in the surrounding HTML
 Hidden through input tag
• A hidden field:
• <input type="hidden" name="hiddenField" value="nyah">
<-- 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)
• A hidden field often stores what database record that needs to be updated
when the form is submitted.

• Note: While the value is not displayed to the user in the page's content, it is
visible (and can be edited) using any browser's developer tools or "View
Source" functionality. Do not use hidden inputs as a form of security!
 13

Dropdown Lists
• The <select> element defines a drop-down list:
 14

Activity
 15

Outline
• Project timeline
• New Input types in HTML 5
• New Form elements in HTML 5
 16

Web Project Timeline

• Look at the LMS

New Input types in HTML 5
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
17
• week
Input Type Color
• The <input type="color"> is used for input fields that
should contain a color.
• Depending on browser support, a color picker can show
up in the input field.

• <form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

18
Input Type Date
• The <input type="date"> is used
for input fields that should contain a
date.
• You can also add restrictions to
dates (min and max)

• <form>
Birthday:
<input type="date" name="bday">
</form>
19
Input Type Datetime-local
• The <input type="datetime-local"> specifies a date and
time input field, with no time zone.

• <form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

20
Input Type Email
• The <input type="email"> is used for input fields that
should contain an e-mail address.
• Some smartphones recognize the email type, and adds
".com" to the keyboard to match email input.

• <form>
E-mail:
<input type="email" name="email">
</form>

21
Input Type Month
• The <input type="month"> allows the user to select a
month and year.

• <form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

22
Input Type Number
• The <input type="number"> defines a numeric input
field.
• The following example displays a numeric input field,
where you can enter a value from 1 to 5:

• <form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

23
Input Restrictions

24
Numeric Restriction example

• Only values between 0 and 100 can be entered with

intervals of 10 (link).

25
Other inputs
Type Code Preview
Range <input type="range>
Search <input type="search“>
Telephone <input type="tel“>
Time <input type="time“>
URL <input type=“url“>
Week <input type=“week“>

Examples

26
New Form Elements
• <datalist> Defines pre-defined options for input controls
• <keygen> Defines a key-pair generator field (for forms)
• <output> Defines the result of a calculation

27
 28

HTML5 <datalist> Element

• The <datalist> element specifies a list of pre-defined options for an
<input> element.
• Users will see a drop-down list of the pre-defined options as they input data.
• The list attribute of the <input> element, must refer to the id attribute of the
<datalist> element. (example)
HTML5 <keygen> Element
• The purpose of the <keygen> element is to provide a secure way to
authenticate users.
• The <keygen> element specifies a key-pair generator field in a form.
• When the form is submitted, two keys are generated, one private and one public.
• The private key is stored locally, and the public key is sent to the server.

29
HTML5 <output> Element
• The <output> element represents the result of a
calculation (like one performed by a script).
• Perform a calculation and show the result in an <output> element:

30
 31

HTML 5 Attributes (Example)

• <input> • <form>
• autocomplete
• autocomplete
• autofocus
• form • novalidate
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder (short description)
• required
• step
 32

Example: autocomplete
 33

Example: form
 34

Example: formaction
 35

Example: formenctype

This page was returned to you from the

server. The server has processed your
input and returned this answer.
 36

Example: pattern
 37

Example: placeholder
 38

Activity
 39

Can we design?
Further Reading
• W3Schools is a good and widely used resource
to learn HTML

• https://www.w3schools.com/html/html_forms.asp

• https://www.w3schools.com/html/html5_intro.asp