Web Systems - 502315-3

HTML5-Part02-Forms
Lecture 4

Dr. Afnan Bukhari

Department of Information Technology

Note: All examples can be found at the bottom of page xxvi in the textbook: Internet and World Wide Web
How to Program - 5th Edition, Deitel & Deitel
Original slides are prepared by:
Dr. Abdullah Baqasah
 Contents

1. Introduction
2. form Element
3. method & action Attributes of the
form Element
4. hidden Inputs
5. input Element
6. text input Element
7. Button input Elements
8. Additional Form Elements
Web Systems [502315-3] Dr. Afnan Bukhari 2
1. Introduction
 Introduction

● When browsing websites, users often need to provide information such as search
queries, e-mail addresses and zip codes.
● HTML5 provides a mechanism, called a form, for collecting data from a user.
● Data that users enter on a web page is normally sent to a web server that
provides access to a site’s resources.
● When a browser requests a publicly available web page or file that’s located on a
server, the server processes the request and returns the requested resource.
● HTML5 documents are requested and transferred via the Hypertext Transfer
Protocol (HTTP).
● Figure 2.14 is a simple form that sends data to the web server for processing. The
web server typically returns a web page back to the web browser—this page
often indicates whether or not the form’s data was processed correctly.

Web Systems [502315-3] Dr. Afnan Bukhari 4

 Introduction (cont.)

● [Note: This example demonstrates only client-side functionality. If you submit

this form (by clicking Submit), the browser will simply display www.deitel.com
(the site specified in the form’s action), because we haven’t yet specified how
to process the form data on the server. In later chapters, we present the server-
side programming (for example, in PHP) necessary to process information
entered into a form.]

Web Systems [502315-3] Dr. Afnan Bukhari 5

2. form Element
 What are forms?

● <form> is just another kind of XHTML/HTML tag

● 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
○ The syntax is: <form parameters> ...form elements... </form>
○ Form elements include: buttons, checkboxes, text fields, radio buttons,
drop-down menus, etc
■ Other kinds of 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 JavaScript how to send the information to the
server (there are two different ways it could be sent)
○ Forms can be used for other things, such as a GUI for simple programs

Web Systems [502315-3] Dr. Afnan Bukhari 7

 Forms and JavaScript

● The JavaScript language can be used to make pages that “do something”
○ You can use JavaScript to write complete programs, but...
○ Usually, you just use snippets of JavaScript here and there
throughout your Web page
○ JavaScript code snippets can be attached to various form elements
■ For example, you might want to check that a zipcode field contains a 5-
digit integer before you send that information to the server
● Microsoft calls its version of JavaScript “active scripting”
● Forms can be used without JavaScript, and JavaScript can be used
without forms, but they work well together
● JavaScript for forms is covered in a separate lecture

Web Systems [502315-3] Dr. Afnan Bukhari 8

 The <form> tag

● The <form attribute> . ... form elements. .. </form> tag encloses form elements (and probably
other elements as well)
● The attribute 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

20 <form method="post" action="http://www.deitel.com/">

Web Systems [502315-3] Dr. Afnan Bukhari 9

 Example
1 <!DOCTYPE html> 30 <!-- <input type = "text"> inserts a text field -->
2 31 <p><label>Name:
3 <!-- Fig. 2.14: form.html --> 32 <input name="name" type="text" size="25"
4 <!-- Form with a text field and hidden fields. --> 33 maxlength="30">
5 <html> 34 </label></p>
6 <head> 35
7 <meta charset = "utf-8"> 36 <p>
8 <title>Forms</title> 37 <!-- input types "submit" and "reset" insert -->
9 </head> 38 <!-- buttons for submitting and clearing the -->
10 39 <!-- form's contents, respectively -->
11 <body> 40 <input type="submit" value="Submit">
12 <h1>Feedback Form</h1> 41 <input type="reset" value="Clear">
13 42 </p>
14 <p>Please fill out this form to help 43 </form>
15 us improve our site.</p> 44 </body>
16 45 </html>
17 <!-- this tag starts the the form, gives the -->
18 <!-- method of sending information and the -->
19 <!-- location of the form-processing script -->
20 <form method="post" action="http://www.deitel.com/">
21 <!-- hidden inputs contain non-visual -->
22 <!-- information that will also be submitted -->
23 <input type = "hidden" name = "recipient"
24 value = "deitel@deitel.com">
25 <input type = "hidden" name = "subject"
26 value = "Feedback Form">
27 <input type = "hidden" name = "redirect"
28 value = "main.html"> text input element
29
Submit & reset input elements

Web Systems [502315-3] Dr. Afnan Bukhari

3. method & action
Attributes of the form
Element
 method Attribute of the form Element

● The form is defined in lines 20–43 by a form element.

● Attribute method (line 20) specifies how the form’s data is sent to the web
server.
● Using method = "post" appends form data to the browser request, which
contains the protocol (HTTP) and the requested resource’s URL.
● This method of passing data to the server is transparent—the user doesn’t see
the data after the form is submitted.
● The other possible value, method = "get", appends the form data directly to
the end of the URL of the script, where it’s visible in the browser’s Address field.
● The post and get methods for sending form data are discussed in detail in PHP
lectures.

Web Systems [502315-3] Dr. Afnan Bukhari 12

 action Attribute of the form Element

● The action attribute in the form element in line 20 specifies the URL of a script
on the web server that will be invoked to process the form’s data. Since we
haven’t introduced server-side programming yet, we set this attribute to
http://www.deitel.com for now.

● Lines 23–41 define input elements that specify data to provide to the script that
processes the form (also called the form handler).
● There are several types of input elements.
● An input’s type is determined by its type attribute.
● This form uses a text input, a submit input, a reset input and three hidden
inputs.

Web Systems [502315-3] Dr. Afnan Bukhari 13

4. hidden Inputs
 hidden Inputs

● Forms can contain visual and nonvisual components.

● Visual components include clickable buttons and other graphical user interface
components with which users interact.
● Nonvisual components, called hidden inputs (lines 23–28), store any data that
you specify, such as e-mail addresses and HTML5 document file names that act as
links.
● The three hidden input elements in lines 23–28 have the type attribute
hidden, which allows you to send form data that’s not input by a user.
● Two other input attributes are name, which identifies the input element, and
value, which provides the value that will be sent (or posted) to the web server.
● The server uses the name attribute to get the corresponding value from the
form.

Web Systems [502315-3] Dr. Afnan Bukhari 15

5. input Element
 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
○ 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
Web Systems [502315-3] Dr. Afnan Bukhari 17
6. text input Element
 text input Element
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
Web Systems [502315-3] Dr. Afnan Bukhari 19
 text input Element
31 <p><label>Name:
32 <input name="name" type="text" size="25"
33 maxlength="30">
34 </label></p>

● The text input in lines 32–33 inserts a text field in the form.
● Users can type data in text fields.
● The label element (lines 31–34) provides users with information about the input
element’s purpose.
● The input element’s size attribute specifies the number of characters visible in the text
field.
● Optional attribute maxlength limits the number of characters input into the text field—in
this case, the user is not permitted to type more than 30 characters.
● readonly - a read-only input field cannot be modified.
● disabled - a disabled input element is unusable and un-clickable.
● A form will still submit an input field that is readonly, but will not submit an input field that
is disabled!

Web Systems [502315-3] Dr. Afnan Bukhari 20

7. Button input
Elements
 Button input Elements
● 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 tag is input, not “button”

Web Systems [502315-3] Dr. Afnan Bukhari 22

 submit and reset input Elements

● Two input elements in lines 40–41 create two buttons.

● The submit input element is a button. When the submit button is pressed, the
form’s data is sent to the location specified in the form’s action attribute.
● The value attribute sets the text displayed on the button.

● The reset input element allows a user to reset all form elements to their
default values.
● The value attribute of the reset input element sets the text displayed on the
button (the default value is Reset if you omit the value attribute).
40 <input type="submit" value="Submit">
41 <input type="reset" value="Clear">

Web Systems [502315-3] Dr. Afnan Bukhari 23

8. Additional Form
Elements
 Additional Form Elements

● In the previous example, you saw basic elements of HTML5 forms.

● Now we introduce elements and attributes for creating more complex forms.
● Figure 2.15 contains a form that solicits user feedback about a website.

Web Systems [502315-3] Dr. Afnan Bukhari 25

 Additional Form Elements (cont.)
1 <!DOCTYPE html> 33 </label></p>
2 34
3 <!-- Fig. 2.15: form2.html --> 35 <!-- <input type = "password"> inserts a -->
4 <!-- Form using a variety of components. --> 36 <!-- textbox whose display is masked with -->
5 <html> 37 <!-- asterisk characters -->
6 <head> 38 <p><label>Password:
7 <meta charset = "utf-8"> 39 <input name="password" type="password" size="25">
8 <title>More Forms</title> 40 </label></p>
9 </head> 41
10 42 <p>
11 <body> 43 <strong>Things you liked:</strong><br>
12 <h1>Feedback Form</h1> 44
13 <p>Please fill out this form to help 45 <label>Site design
14 us improve our site.</p> 46 <input name="thingsliked" type="checkbox"
15 47 value="Design"></label><br />
16 <form method = "post" action = "http://www.deitel.com"> 48 <label>Links
17 49 <input name="thingsliked" type = "checkbox"
18 <input type = "hidden" name = "recipient" 50 value = "Links"></label>
19 value = "deitel@deitel.com"> 51 <label>Ease of use
20 <input type = "hidden" name = "subject" 52 <input name="thingsliked" type = "checkbox"
21 value = "Feedback Form"> 53 value = "Ease"></label>
22 <input type = "hidden" name = "redirect" 54 <label>Images
23 value = "main.html"> 55 <input name="thingsliked" type = "checkbox"
24 56 value = "Images"></label>
25 <p><label>Name: 57 <label>Source code
26 <input name = "name" type = "text" size = "25"> 58 <input name="thingsliked" type = "checkbox"
27 </label></p> 59 value = "Code"></label>
28 60 </p>
29 <!-- <textarea> creates a multiline textbox --> 61
30 <p><label>Comments:<br>
31 <textarea name="comments"
32 rows="4" cols="36"></textarea>
Web Systems [502315-3] Dr. Afnan Bukhari
 Additional Form Elements (cont.)
62 <!-- <input type = "radio"> creates a radio --> 92 <select name="rating">
63 <!-- button. The difference between radio buttons --> 93 <option value="Amazing">Amazing</option>
64 <!-- and checkboxes is that only one radio button --> 94 <option value=”10"> 10</option>
65 <!-- in a group can be selected. --> 95 <option value="9"> 9</option>
66 <p> 96 <option value=”8">8</option>
67 <strong>How did you get to our site?:</strong><br> 97 <option value=”7">7</option>
68 98 <option value=”6">6</option>
69 <label>Search engine 99 <option value=”5">5</option>
70 <input name = "howtosite" type = "radio" 100 <option value=”4">4</option>
71 value = "search engine" checked></label> 101 <option value=”3">3</option>
72 <label>Links from another site 102 <option value=”2"> 2</option>
73 <input name = "howtosite" type = "radio" 103 <option value=”1">1</option>
74 value = "link"></label> 104 <option value="Awful">Awful</option>
75 <label>Deitel.com Web site 105 </select>
76 <input name = "howtosite" type = "radio" 106 </label>
77 value = "deitel.com"></label> 107 </p>
78 <label>Reference in a book 108
79 <input name = "howtosite" type = "radio" 109 <p>
80 value = "book"></label> 110 <input type = "submit" value = "Submit">
81 <label>Other 111 <input type = "reset" value = "Clear">
82 <input name = "howtosite" type = "radio" 112 </p>
83 value = "other"></label> 113 </form>
84 </p> 114 </body>
85 115 </html>
86 <p>
87 <label>Rate our site:
88
89 <!-- the <select> tag presents a drop-down -->
90 <!-- list with choices indicated by the -->
91 <!-- <option> tags -->

Web Systems [502315-3] Dr. Afnan Bukhari

 Additional Form Elements (cont.)

textarea element

password input element

checkbox input element

radio button element

select element

Web Systems [502315-3] Dr. Afnan Bukhari 28

 textarea Element

● The textarea element (lines 31–32) inserts a multiline text area into the form.
● The number of rows is specified with the rows attribute, and the number of
columns (i.e., characters per line) with the cols attribute.

● In this example, the textarea is four rows high and 36 characters wide.

● To display default text in the textarea, place the text between the
<textarea> and </textarea> tags. Default text can be specified in other
input types, such as text fields, by using the value attribute.

Web Systems [502315-3] Dr. Afnan Bukhari 29

 password input Element

● The password input in line 39 inserts a password box with the specified size
(maximum number of displayed characters).
● A password box allows users to enter sensitive information, such as credit card
numbers and passwords, by “masking” the information input with asterisks (*).
● The actual value input is sent to the web server, not the masking characters.

Web Systems [502315-3] Dr. Afnan Bukhari 30

 checkbox input Element

● 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

Web Systems [502315-3] Dr. Afnan Bukhari 31

 checkbox input Element

● Lines 45–59 introduce the checkbox input element.

● checkboxes enable users to select an option.
● When a user selects a checkbox, a check mark appears in the checkbox
Otherwise, the checkbox remains empty.

● checkboxes can be used individually or in groups.

● checkboxes that belong to a group are assigned the same name (in this case,
"thingsliked").

Common Programming Error 2.1

When your form has several checkboxes with the same name, make sure that they have
different values, or the web server scripts will not be able to distinguish them.

Web Systems [502315-3] Dr. Afnan Bukhari 32

 radio input Element

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

Web Systems [502315-3] Dr. Afnan Bukhari 33

 radio input Element

● Lines 69–83 introduce the radio button specified with type radio.
● radio buttons are similar to checkboxes, except that only one radio button in a
group of radio buttons may be selected at any time.
● The radio buttons in a group all have the same name attributes and are
distinguished by their different value attributes.
● The attribute checked (line 71) indicates which radio button, if any, is selected
initially. The checked attribute also applies to checkboxes.

Common Programming Error 2.2

Not setting the name attributes of the radio buttons in a group to the same name is a
logic error because it lets the user select all of the radio buttons at the same time.

Web Systems [502315-3] Dr. Afnan Bukhari 34

 select Element
drop-down list input Element

● 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

Web Systems [502315-3] Dr. Afnan Bukhari 35

 select Element

● The select element (lines 92–105) provides a drop-down list from which the user
can select an item.
● The name attribute identifies the drop-down list.
● The option elements (lines 93–104) add items to the drop-down list.
● The option element’s selected attribute specifies which item initially is
displayed as the selected item in the select element.
● If no option element is marked as selected, the browser selects the first
option by default.

Web Systems [502315-3] Dr. Afnan Bukhari 36

Web Systems [502315-3] Dr. Afnan Bukhari
 Thanks!

Does anyone have any questions?

Bukhari.a@tu.edu.sa

38