Forms on Web pages, Components of Forms, building interactive Forms

<< Operating System: functions, components, types of operating systems

APPLICATION SOFTWARE: Scientific, engineering, graphics, Business, Productivity, Entertainment, Educational Software >>

Introduction to Computing CS101

LESSON 12

INTERACTIVE FORMS

(Web Development Lesson 4)

Focus of the last Lesson was on HTML Lists & Tables

We learnt how to extend our Web pages by adding a few more tags

Specifically, we discussed various types of lists that can be added to a Web page un-ordered, ordered

and definition lists

And also, about tables: about various tags used in a table and their associated attributes

Today's Lecture

We will try to understand the utility of forms on Web pages

We will find out about the various components that are used in a form

We will become able to build a simple, interactive form

Interactive Forms (1)

Without forms, a Web site is "read-only" it just provides information to the user

Forms enable the user to provide information to the Web site. For example, the user can:

Perform searches on Web site

Give comments

Ask for info that is not available on the Website

Place order for goods and services

Interactive Forms (2)

Can be simple or very complex

Can fill a whole page or just a single line

Can contain a single element or many

Are always placed between the <BODY> and </BODY> tags of a Web page

Interactive Forms (3)

Are GUI-based

May contain:

Text fields

Check boxes

Buttons

Scrollable lists

A Simple

Example

Interactive

Forms

Code for that Example

Introduction to Computing CS101

<HTML>

<HEAD>

<TITLE>Send Email to me</TITLE>

</HEAD>

<BODY>

<H1>Send Email to me</H1>

Code for the instructions

Code for the form

</BODY>

</HTML>

A Simple

Example

Interactive

Forms

Code for the Instructions

<P>To send an eMail message to me:</P>

<OL>

<LI>Type your eMail address in the "From" field</LI>

<LI>Type a short message in the "Message" field</LI>

<LI>Press the "Send eMail to me" button</LI>

</OL>

A Simple

Example

Interactive

Forms

Code for the Form

Introduction to Computing CS101

<FORM name="sendEmail" method="post"

action="sendMailScriptURL">

Elements of the form

</FORM>

<FORM name="sendEmail" method="post"

action="sendMailScriptURL">

Elements of the form

</FORM>

name: Name given to the form

method: Forms can be submitted through two

alternate methods GET & POST

action: Specifies the URL that is accessed

when the form is being submitted

12.1 Server-Side Scripts

Are programs that reside on Web servers

Receive info that a user enters in a form

Process that info and take appropriate action

Examples:

CGI scripts on Unix servers

ASP scripts on Windows servers

A Simple

Example

Interactive

Forms

Elements of the Form (1)

<P>Message: <INPUT type="text" name="message" size="50"></P>

Introduction to Computing CS101

A Simple

Example

Interactive

Forms

Elements of the Form (2)

<P><INPUT type="hidden" name="receiver"

value="altaf@vu.edu.pk"></P>

<P><INPUT type="hidden" name="subject"

value="eMail from the form"></P>

A Simple

Example

Interactive

Forms

Introduction to Computing CS101

<TEXTAREA

name="message"

cols="38"

rows="6"

</TEXTAREA>

</tr><tr>

</tr><tr>

<td>Subject: </td>

</tr><tr>

<td valign="top">Message: </td>

</TEXTAREA></td>

</tr><tr>

</td>

</tr></table>

</FORM>

Introduction to Computing CS101

<INPUT

type="text"

name="sender"

size="50"

value="your eMail address goes here"

Review of the Tags Used in Forms

<FORM>

name="nameOfTheForm"

method="get" or "post"

action="URL"

Elements of the form

</FORM>

Single-Line Text Input Field

<INPUT

type="text"

name="fieldName"

size="widthInCharacters"

maxlength="limitInCharacters"

value="initialDefaultValue"

Hidden Input

<INPUT

type="hidden"

name="fieldName"

value="value"

Submit Button Input

<INPUT

type="submit"

name="buttonName"

value="displayedText"

Multi-Line Text Input Area

<TEXTAREA

name="areaName"

cols="widthInCharacters"

rows="numberOfLines"

> initial default value

Introduction to Computing CS101

</TEXTAREA>

This was a review of the new tags (and associated attributes) that we have used in today's examples.

There are many more tags that can be used in a form.

Let us take a look at a few

<td>

</td>

</tr><tr>

<td>Password: </td>

<td>

</td>

</tr><tr>

</td>

</tr></table>

</form>

Password Input Field

<INPUT

type="password"

name="fieldName"

size="widthInCharacters"

maxlength="limitInCharacters"

value="initialDefaultValue"

Introduction to Computing CS101

<td>

</td>

</tr><tr>

<td>Password: </td>

<td>

</td>

</tr><tr>

Remember my user name and password<br>

</td>

</tr><tr>

</td>

</tr></table>

</form>

12.2 Checkbox Input Element

<INPUT

type="checkbox"

name="checkboxName"

checked

value="checkedValue"

Introduction to Computing CS101

<td>

</td>

</tr><tr>

<td>Password: </td>

<td>

</td>

</tr><tr>

<td valign="top">Logging in from:</td>

<td>

<input type="radio" name="from" value="university" checked> University

</td>

</tr><tr>

</td>

</tr></table>

</form>

12.3 Radio Button Input Element

<INPUT

type="radio"

name="radioButtonName"

checked

value="selectedValue"

What is the difference between checkboxes and radio buttons?

Introduction to Computing CS101

</tr><tr>

<td>Password: </td>

<td>

</td>

</tr><tr>

<td valign="top">Logging in from:</td>

<td>

<option value="home"> Home

<option value="office"> Office

<option value="university" selected> University

</select>

</td>

</tr><tr>

</td>

</tr></table>

</form>

12.4 Select from a (Drop Down) List

<SELECT

name="listName"

size="numberOfDisplayedChoices"

multiple

<OPTION value="value1"> text1

<OPTION value="value2" selected> text2

<OPTION value="value3"> text2

...

</SELECT>

Introduction to Computing CS101

12.5 File Upload Input Element

<INPUT

type="file"

name="buttonName"

value="nameOfSelectedFile"

enctype="fileEncodingType"

<form

name="uploadForm"

method="post"

action="uploadScript"

<input

type="file"

name="uploadFile"

enctype="multipart/form-data"

<input

type="submit"

name="submit"

value="Upload"

</form>

Reset Button Input Element

(Resets the contents of a form to default values)

<INPUT

type="reset"

value="dispalyedText"

Introduction to Computing CS101

Today's Lesson was the ...

We looked at the utility of forms on Web pages

We found out about the various components that are used in a form

We became able to build a simple, interactive form

Table of Contents: