CS1215, SE1215,

CS2104, SE2104,IT1217
IT2104
Lecture 04
Web Technologies – HTML Forms
09/01/2024
29 / 05 / 2024

Bachelor of Science (Hons) in Computer Science | Software Engineering | Information Technology

Department of Computing
Faculty of Computing and Technology
Saegis Campus
Nugegoda

1
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 1. What is the Form?
• The web is shift from reading a network of pages to a place where,
getting information done.
• For example, email address, credit card, signing petitions, searching a
site, and posting a tweet. These interactions are handled by forms.
• HTML provides form in order to supply a way for the user to interact
with a Web server.
• The most widely used method to process the data submitted through
a form is to send it to server-side software typically written in a
scripting language.

2
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 3
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 HTML Forms – Cont.
• There are two parts to a working form.
• The first part is the form that is seen on the page itself that is created using HTML
markup.
• Forms are made up of buttons, input fields, checkboxes and drop-down menus
(collectively known as form controls) used to collect information from the user.
• Forms may also contain text and other elements.
• The other component of a web form is an application or script on the server that
processes the information collected by the form and returns an appropriate
response.
• It’s what makes the form work. In other words, posting an HTML document with
form elements isn’t enough.
4
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 2. How Forms Work

5
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 3. The Form Element
• The HTML <form> element is used to create interactive forms.
• The form element is a container for all the content of the form, it has following
syntax:
<form>
..
Form elements
..
</form>

• An HTML form contains form elements, and the form elements are different types of
input elements, like text fields, checkboxes, radio buttons and submit buttons.

6
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 4. The Form Attribute
4.1 Action Attribute
• The action attribute provides the location (URL) of the application or script that
will be used to process the form.
• The action attribute in this example sends the data to a script called mailinglist.
php.
<form action="/mailinglist.php" >...</form>

7
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 The Form Attribute
4.2 Method Attribute
• The method attribute specifies how the encoded information should be sent to
the server.
• There are only two methods for sending encoded data to the server: POST or GET,
indicated using the method attribute in the form element.
• The method is optional and will default to GET if omitted.

<form action="/mailinglist.php“ method=“POST”>...</form>

8
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 4.2.1 GET Method
• The GET method sends the encoded user information appended to the page
request (URL) to the server.
• The ULR and the encoded information are separated by the question mark
character.
• For example:
http://www.test.com/index.htm?name1=value1&name2=value2

9
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 1. GET Method
• There are some notes about GET requests:
• GET requests remain in the browser history.

• GET requests can be bookmarked.

• GET requests have length restrictions.

• GET requests should never be used when dealing with sensitive data.

• GET requests should be used only to retrieve data.

10
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 4.2.2. POST Method
• The POST method transfers encoded information via HTTP headers.
• This means that data sent through the POST method will not be visible in the URL
• There are some notes about
• POST requests:
- POST requests do not remain in the browser history.
- POST requests cannot be bookmarked.
- POST requests have no restrictions on data length.

11
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5. Form Controls
• Web forms use a variety of controls that allow users to enter information or
choose options.
• Control types include various text entry fields, buttons, menus, and a few controls
with special functions.
• As a web designer, it is important to be familiar with control options to make
forms easy to use.
• It is also useful to have an idea of what form controls are doing behind the
scenes.

12
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.1 Label Element
• The label is used to label a control, so that users know what kind of data they
should enter.

5.2 Input Element

• The input element is the most important form element which is used for
entering a single word or single-line text field

13
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 • The input element has different attributes for creating text field
as follow:

14
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 • The <input> element can be displayed in several ways depending on the
type attribute.
• Here are some examples:

15
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.3 Text Value
• Text value is used for items that require only one line of user input, such as search
boxes or names.
Example: single-line text input used to take first name and last name:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first name" />
<br>
Last name: <input type="text" name="last name" />
</form>
</body>
</html>
16
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.4 Password value
• This is also a single-line text input, but it masks the character as soon as a user
enters it, using asterisk (*) or bullet (•) characters, or another character
determined by the browser.

• It is also created using <input> tag but type attribute is set to password.

17
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.5 Button value
• There are various ways in HTML to create clickable buttons.

• Input element can be used to create a clickable button by setting its type
attribute to button.

18
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 Example: Created a form to display: first, last name text input and the submit buttons.

19
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.6 Radio value
• Radio buttons are added to a form using the input element with the type
attribute set to radio.

• Here is the syntax for a minimal radio button:

<input type="radio" name="variable" value="value">

20
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 Notice that all the input elements have the same variable name (“age”), but their
values are different.
Because these are radio buttons, only one button can be checked at a time, and
therefore, only one value will be sent to the server for processing when the form is
submitted.

21
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.7 Checkbox value
• Checkboxes are added using the input element with its type set to checkbox.

• As with radio buttons, groups of checkboxes can be created by assigning them the
same name value.

• The difference, is that more than one checkbox may be checked at a time.

• This makes them the right choice for lists in which more than one selection is
okay.

• The value of every checked button will be sent to the server when the form is
submitted.

22
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 • Exercise: Write down the code for the following.

23
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.8 File value
• Example:

<form>

<label for="file-select">Upload</label>

<input type="file" name="upload" id="file-select">

</form>

• The output of the above example will look like this:

24
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5.9 Multiple-Line Text Input Element
• Multi-line input controls are created using HTML <textarea> tag.

• The textarea element has the following attributes:

25
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 Example: a multi-line text input used to take item description:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>

26
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 5. 10 Select Element
• Radio buttons allow the user to choose only one item from a range of options,
which is useful.

• But what would happen if the number of options is 20 or more option.

• A better option is to use the select element (also called drop down menu).

27
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 Output…..?

28
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 Example:
<!DOCTYPE html>
<html>
<head> Output…..?
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown" multiple>
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
</select>
<input type="submit">
</form>
</body>
</html>

29
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 6. Form Design
• There are many points about designing a form.
• These points make a form usable and easily accessible to the users, which are:
• Avoid unnecessary questions.

• Consider impact of label placement.

• Choose input types carefully

• Group related inputs.

• Clarify primary and secondary actions

30
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
 31
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus