Scribd
Upload
25 views11 pages

Lesson 6 Modified

The document discusses web forms and interaction elements. It provides an introduction and overview of creating web forms for user input and interaction using basic form elements. The learning outcomes include being able to create forms using elements like the <form> tag and its attributes, input elements, buttons, drop down boxes, radio buttons, checkboxes and text areas. The lesson outline then covers these topics in more detail over subsequent sections.

Uploaded by

chathurangamadushanjayathilaka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views11 pages

Lesson 6 Modified

The document discusses web forms and interaction elements. It provides an introduction and overview of creating web forms for user input and interaction using basic form elements. The learning outcomes include being able to create forms using elements like the <form> tag and its attributes, input elements, buttons, drop down boxes, radio buttons, checkboxes and text areas. The lesson outline then covers these topics in more detail over subsequent sections.

Uploaded by

chathurangamadushanjayathilaka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

6.

0 Web Forms and Interaction Elements

Lesson Introduction

In the previous lesson you have obtained skills to structure your web pages with structuring
elements such as tables, list etc. For a website design to be successful, you must consider much
more than initial functionality where as your visitors and users experience of your site. There
are many aspects of your website that contribute to the overall user experience. A web form is
one of the best ways to get input from prospective clients and indirectly establish a cordial
relation with them. During this week students will create web forms for the user interaction.
Here the forms will be created with interactive web elements for data feeding and interaction
through mouse and keyboard actions. Further, the necessary attributes for data processing to
be taken place will also be discussed.

Learning Outcomes:

After completion of this lesson, the learner will be able to create web forms according to the
given parameters and formats with basic form elements.
 Use form element with its attributes
 Set form size, color and other formatting
 Apply form actions with respect to the requirements
 Insert buttons and text boxes into the form
 Add the submit and re set buttons
 Add Drop down boxes with data values
 Insert radio buttons with values and groups
 Insert check boxes with relevant groups
 Add text areas with scroll options
 Create Iframe elements effectively

Lesson outline
 Form tag and its attributes
 Input elements inside a form and their attributes
 Basic user interaction buttons and their events
 Drop down boxes and data values
 Radio buttons and groups
 Check boxes and groups
 Text areas and scrolls
 Iframes and web page within another web page
6.1 Form tag and attributes

HTML Forms are one of the main points of interaction between a user and a web site or
application. They allow users to send data to the web system. Most cases that data is sent to
the back end web server for processing. An HTML form is a section of a document containing
normal content, markup, special elements called as controls (checkboxes, radio buttons,
menus, etc.), and labels on those controls. Users generally fill a form by modifying its controls
(entering text, selecting menu items, etc.), before submitting the form data for processing (e.g.,
to a Web server, to a mail server, etc.)

The HTML <form> tag is used to create a form for user inputs. The <form> tag indicates the
browser where the form starts and ends. You can add all kinds of HTML tags between the
<form> and </form> tag. For example, a form can easily include a table or an image along with
the form fields. The following code demonstrate the syntax of <form> element.

<html>
<head>
<title>My First Form</title>
</head>

<body>
<! -- Here goes HTML -->
<form>
<! -- Here goes form controls and HTML -->
</form>
<! -- Here goes HTML -->
</body>
</html>

<form> tag supports some specific attributes to configure the way the form to be reacted. Most
of its attributes are optional but it's considered best practice to always set at least the action
attribute and the method attribute.

<form method="post" action="/action_page.php">

The action attribute


 defines the action to be performed when the form is submitted (with data).
 Usually, the form data is sent to a script (program) on the server when the user clicks
on the submit button.
 In the example above, the form data is sent to a page on the server called
"/action_page.php", this is a server side script (a program).
 If the action attribute is unavailable, the action is set to the current page

The method attribute


 The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the form data. There are two ways the browser client which send
information to the web server.
i. The GET Method
ii. The POST Method
 Before the browser sends the information, it encodes data using a scheme called URL
encoding.

Refer on URL encoding by using the following link:


https://www.permadi.com/tutorial/urlEncoding/
Find more about GET and POST method from here.

6.2 Input elements inside a form and their attributes

There are quite a few different form elements you can add to a form. Lets discuss one by one.

<input> Element:
The most important form element is the <input> element. It is used to create interactive
controls for web‐based forms to accept data from the user. The <input> element can be
displayed in several ways, depending on the type attribute.

In each case, the initial value (text) produces a basic text input, but you can try other values
such as checkbox, radio, submit, reset, button, password or hidden.

Syntax for a text input:

<input type="text" name="fname">


Here name attribute will define the name of the control, which is submitted with the form data
and you can define the size of the text box by adding the size attribute to the <input> element.
If not, it will take the default size as 20.

Syntax for a password input:

<input type="password" name="pwd">

6.3 Basic user interaction buttons and their events

In HTML button represents a clickable button, which can be used in forms, or anywhere in a
document that needs simple, standard button functionality. By default, HTML buttons are
typically presented in a style similar to that of the host platform the user agent is running on,
but you can change the appearance of the button using CSS.

There are three basic buttons in the form element. They are button, submit and reset. Submit
is the most important button that is used to send the information in a form to a server. Reset
button will clear the content of the form or set in to default values. Normal button can be use
to add any clickable event to the form.

Syntax for a submit button.

<input type="submit" value="SEND">

As you can see here if you want to add your own text to the submit button you have to define
the value attribute. Thts is way this submit button appers as “SEND”. If not it will take the
default value as “submit”.

Following table shows the summary of the <input> element that we discussed so far.
Attribute Value Description
text A single‐line text field. Line‐breaks are automatically removed
from the input value
password A single‐line text field whose value is hidden. Use the maxlength
attribute to specify the maximum length of the value that can be
entered.
hidden A control that is not displayed but whose value is submitted to
type
the server. This specifically can't be edited or seen by the user
on the user interface, although you could edit the value via
browser developer tools.
submit A button that submits the form to the server.
reset A button that resets the contents of the form to default values
button A push button with no default behavior (action)
name any name The name of the control, which is submitted with the form data
size any number The size attribute specifies the visible width, in characters.
any name The initial value of the control. This attribute is optional except
value
when the value of the type attribute is radio or checkbox.

Let’s create a simple form by including all the input types that mentioned in the above table.
Try to understand to usage of each input type in the following form.

<html>
<head>
<title>My Page</title>
</head>
<body>

<form method="post" action="">


<label>NAME:</label>
<input type="text" name="name" size="10">
<label>PIN:</label>
<input type="password" name="pin" maxlength="8" size="8"><br><br>
<input type="hidden" name="pro" value="xm234jq">

<input type="submit" value="Send Request">


<input type="reset" value="Reset the form">
<input type="button" value="Click Me">

</form>
</body>
</html>
6.4 Radio buttons and groups

Radio buttons are used when you want to let the visitor select only one option from a set of
alternatives. It is a <input> elements type that generally used in radio groups or collections of
radio buttons describing a set of related options. If more options are to be allowed at the same
time you should use check boxes instead. Radio buttons are typically rendered as small circles,
which are filled or highlighted when selected.

Syntax for a radio button with display:

<input type="radio" name="radio1">

6.4.1 Defining a radio group


Radio buttons are not used as a single buttton. They are used as a group. A radio group is
defined by giving each of radio buttons in the group the same name. Once a radio group is
established, selecting any radio button in that group automatically deselects any currently‐
selected radio button in the same group. You can have as many radio groups on a page.

group one
<form>
<p>Please select your preferred contact method:</p>

<input type="radio" id="contactChoice1" name="contact" value="email">


<label for="contactChoice1">Email</label>

<input type="radio" id="contactChoice2" name="contact" value="phone">


<label for="contactChoice2">Phone</label>

<input type="radio" id="contactChoice3" name="contact" value="mail">


<label for="contactChoice3">Mail</label>

group two
<p>Please select your Gender:</p>

<input type="radio" id="genderChoice1" name="gender" value="male"> >


<label for="genderChoice1">Male</label>

<input type="radio" id="genderChoice2" name="gender" value="female">>


<label for="genderChoice2">Female</label>
<br><br>

<input type="submit">
</form>
For example, if your form needs to ask the user for their preferred contact method, and your
gender, you might create three radio buttons for preferred contact, each with the name
property set to "contact" but one with the value "email", one with the value "phone", and one
with the value "mail". For gender, each with the name property set to "gender”. The user never
sees the value or the name (unless you expressly add code to display it).
When the above form is submitted with a radio buttons selected, the form's data includes an
entry in the form "contact=value". For example, if the user clicks on the "Email" radio button
then submits the form, the form's data will include the line "contact=email".

6.5 Check boxes and groups

<input> elements of type checkbox are rendered by default as square boxes that are checked
(ticked) when activated, like you might see in many paper forms.
Checkboxes are similar to radio buttons, but with an important distinction: radio buttons are
designed for selecting one value out of a set, whereas checkboxes let you turn individual values
on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all
and checkboxes allow multiple values to be selected.

Syntax for a checkbox button with display:

<input type="checkbox" name="checkBox" >

The example available above only contained one checkbox; in real‐world situations you'll be
likely to encounter multiple checkboxes. If they are completely unrelated, then you can just
deal with them all separately, as shown above.

For example, in the following code example you can try out to include multiple checkboxes to
allow the user to select their interests (as many as they prefer).

The following code only contains the <form> code snippet; therefore, you have to fill the other
necessary HTML elements when you create it as a web page. Try this code with your
modifications.
<form>

<p>Choose your interests</p>

<input type="checkbox" id="coding" name="interest" value="coding">


<label for="coding">Coding</label>

<input type="checkbox" id="music" name="interest" value="music">


<label for="music">Music</label>
<input type="checkbox" id="sports" name="interest" value="sports">
<label for="music">Sports</label>

</form>

In the above example, you saw that we've given each checkbox the same name. If both
checkboxes are checked and then the form is submitted, you'll get a string of name/value pairs
submitted like this: interest=coding&interest=sports. When this data reaches the server‐side,
you should be able to capture it as an array of related values and deal with it appropriately.

6.6 Drop down boxes and data values

The <select> element is used to create a drop‐down list. The <option> tags inside the <select>
element define the available options in the list. By default, the first item in the drop‐down list is
selected. To define a pre‐selected option, add the selected attribute to the option.
Try the following code snippet by adding necessary HTML elements as it contains only the
select element portion.

<! -- The second value will be selected initially -->


<select name="text">
<! --Supplement an id here instead of using 'text'-->
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>

<option value="value3">Value 3</option>


</select>
Example on <select> element

<form>
<p>Select your favorite sport:</p>

<select name="sport" size=3>


<option value=”Soccer”>Soccer</option>
<option value=”Cricket”>Cricket</option>
<option value=”Basketball”>Basketball</option>
<option value=”Hockey”>Hockey</option>
<option value=”Tennis”>Tennis</option>
</select>
<input type="submit" value="Submit">
</form>

As shown in the above example the size attribute changes the looks of the control considerably
by setting the number of lines (no of visible options), the control display at a time. Do the above
example by adding the necessary HTML codes and create a page to observe the output.

6.7 Text areas and scrolls

The <textarea> tag defines a multi‐line text input control. A text area can hold an unlimited
number of characters, and the text renders in a fixed‐width font (usually Courier). The size of a
text area can be specified by the cols and rows attributes.

However, when you need a field that can accept any combination and length of plain text
letters, numbers, and symbols, <textarea> is the element you are looking for.

<textarea name="textarea" rows="10" cols="50">


Write something here
</textarea>

Above example snippet shows the usage of <textarea> element. Try the above textarea
example by filling the missing HTML components to observe the output.
6.8 Iframes and web page within another web page

The <iframe> creates an inline frame, which embeds an independent HTML document into the
current document. The src attribute is used to specify the URL of the document that occupies
the inline frame.

Syntax for a checkbox button:

<iframe src="URL"></iframe>

You can examine more examples by clicking here. Perform the examples given in this links for
your skill enhancement.

6.8.1 Iframe ‐ Target for a Link

An iframe can be used as the target frame for a link. Which means when you click on the given
link, the target page of that link will be displayed in the iframe. The target attribute of the link
must refer to the name attribute of the iframe.
To get a better understand about the iframe and the target link watch this video.

Coding example on iframes:

Ifame name should be use as the target name.


<html>
<body>
<h2>Iframe - Target for a Link</h2>

<iframe height="300px" width="100%" src="demo_iframe.htm"


name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a" >


W3Schools.com</a></p>

<p>When the target of a link matches the name of an iframe, the link
will open in the iframe.</p>

</body>
</html>

Perform the above code on your machine and observe the output. Try to do some
modifications to the code where you can get more experience.
Activity 6.1

Design the following form.

You might also like