Interactive Forms in Web Development: An Introduction to JavaScript, Slides of Introduction to Computing

Download Interactive Forms in Web Development: An Introduction to JavaScript and more Slides Introduction to Computing in PDF only on Docsity!

CS101 Introduction to Computing

Lecture 15

More on Interactive Forms

(Web Development Lecture 5)

Focus of the last lecture was on Interactive Forms

• 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

In Today’s Lecture …

• We will learn ways of adding more interactivity to forms
• We will get our first taste of JavaScript – the object-based language that we will be employing throughout the rest of the Web development part of this course
• Last time we mentioned server-side scripts; today we will write (simple) client-side scripts in JavaScript

But first lets review the tags that are

used in forms

<FORM

name=“name”

method=“get” or “post”

action=“URL”

>

Elements of the form

Single-Line Text Input Field

<INPUT

type=“text”

name=“name”

size=“widthInCharacters”

maxlength=“limitInCharacters”

value=“initialDefaultValue”

>

Password Input Field

<INPUT

type=“password”

name=“name”

size=“widthInCharacters”

maxlength=“limitInCharacters”

value=“initialDefaultValue”

>

Hidden Input

<INPUT

type=“hidden”

name=“name”

value=“value”

>

Checkbox Input Element

<INPUT

type=“checkbox”

name=“name”

checked

value=“checkedValue”

>

Radio Button Input Element

<INPUT

type=“radio”

name=“name”

checked

value=“selectedValue”

>

File Upload Input Element

<INPUT

type=“file”

name=“name”

value=“nameOfSelectedFile”

enctype=“fileEncodingType”

>

Reset Button Input Element

<INPUT

type=“reset”

value=“buttonLabel”

>

Submit Button Input

<INPUT

type=“submit”

name=“name”

value=“buttonLabel”

>

8 Possible Values for the “type” Attribute

of tag

1. text
2. password
3. hidden
4. checkbox
5. radio
6. file
7. reset
8. submit

Multi-Line Text Input Area

<TEXTAREA

name=“areaName”

cols=“width”

rows=“lines”

>

initial default value

Select from a (Drop Down) List

<SELECT name=“name” size=“numberOfDisplayedChoices” multiple

text text text … …

(^) Docsity.com 16

End of the Review of Tags Used in Forms

Now let’s take a look at a form that we constructed last time, and see how we can make it better

Let’s now review what happens when I enter all the required info and press the “Send eMail” button?

22

Info contained in the form

Message to the receiver’s eMail address

User’s Computer

Web Server

Server-Side Script

Browser

This is what happens when the form is filled correctly. What if

the form is filled incorrectly?

• What if the users leaves one of the essential fields, blank?
• What if the user enters an illegal eMail address? Examples: - altaf2vu.edu.pk - [email protected] - bhola@yahoo

A Reasonable Scenario

• When the “Send eMail” button is clicked, the browser sends the data collected through the form to a script running on the Web server
• That server-side script:
  • receives that data
  • analyzes it
  • discovers the missing or incorrect data
  • sends a message back to the user’s browser stating the problem and asks the user to re-send

This process …

• That is the process of user:
  • Filling the incomplete/incorrect data
  • Sending it to the server
  • Receiving the response back from the server
  • Correcting and resending is quite time-consuming and uses the server’s resources to help the user correct his mistakes
• It can really bog down the server if a large number of users are using that Web server