Formscs105

More Interactive web-pages • So far what we have seen was to present the

information. (Ex: tables. Lists,….). But it is not enough.

• We want to design web-pages that are more interactive.

• Pages that – get the data from user (input).– Process data.– Return the result (output).

• A two way communication.

Forms

• Form is an area in your web-page which can contain form elements.

• This area is specified by <FORM></FORM> tags.

• Form-elements are elements that allow the web-page to get data from user by providing graphical interfaces to the users to enter their data .

Form-Elements

• Text Field• Text Area• Check box• Radio buttons• Buttons (Reset, submit,…)• Dropdown boxes• And more ...• Example

<Form></Form>

• Any standard HTML element (except another <form>) can be contained within <form>– Attributes: NAME = “name” and ACTION =“url”• NAME: Name the form (For tasks related to user input

data processing )• ACTION: The URL of the program that will process the

data when the form is submitted .

Form-Elements• <INPUT></INPUT> : Specifies the type of graphical

interface to get the data from user.• Attributes:– TYPE:

• text• radio• checkbox• button• reset• submit• Password• ...

– NAME: names this element.

Text Field

• A single line field which is used when you want the user to type letters, numbers, etc. in a form.

• Example: <input type = "text" name = "firstname">

• NAME: Name given to this form element• SIZE: The number of characters allowed in this text

field. If you do not include this attribute, the text length will be 20 by default.

Example

….<form name ="form1"> First Name <input type=“text”

name=“firstname”> </form>

Do it yourself

• Write an HTML which contains three text fields, one for user’s name, one for user’s SSN and for the name of the user’s car. – Note that the length of your SSN is nine. So make the size of

your text field 9 using size attribue. Name your file forms.html.– The default value of the car text field should be “noCar”. You

can specify this using VALUE attribute of input element: VALUE = “noCar”.

– The title of the page should be: Example’s of form elements

• View the result with a web browser.

Processing Data• After the web page receives the data (input) from

the client of the web page by some means such as a form elements, it needs to be processed.

• There are two possible location for processing data– The data can be sent thru network to a web-server

machine where all such processing requests are processed. Then the result will be sent to the client machine which initiated the request by opening a page and filling some sort of forms.

– The data can be processed at client machine by some tiny programs embedded in the web page. These tiny programs are sent to client side along the web page when the user loads the web page.

Scripts

• Scripts are these tiny programs within the web page. (inside HTML).

• They are List of instructions for processing data presented on the page in a variety of ways such as the data submitted using some kind of form element.

• This data processing by mean of some script is done at the client machine as opposed to the Server machine.

• JavaScript is an example of a scripting language which is being understood by most web browsers just as any other HTML element.

Event Handlers

• Form elements are made to interact with scripts (small programs within the page for processing data).

• This interactions are done by means of Event Handlers.

• Event Handlers are attributes of form elements which their values determine what sort of actions to take in case an event occurred.

Examples of Events

• Submitting a form• Clicking a mouse• Passing a mouse over a link• Loading a page• Selecting an item or a button.• Clicking a button, link ,…• Changing the value of a text field or text area• …

Event Handlers for Text Field<FORM NAME =“form1"> Number 1: <INPUT TYPE=“text” NAME=“num1”

VALUE = “0” ONCHANGE=“do this action”> </FORM>• The value of the event handler attribute can be a piece

of java script for running some process (for example processing the data in the text field) in response to a change to value of the text field.

• ONSELECT is another possible event handler attribute for text field.

CheckBox• User chooses a sub-set of a number of options using a

checkbox.• <input type="checkbox" name=“Name" value=“Val“>

Example: bike: <input type="checkbox" name="vehicle

value="Bike"> <br>car: <input type="checkbox" name="vehicle" value="Car"> <br>airplane: <input type="checkbox" name="vehicle" value="Airplane“>

Radio Button

• Radio Button is for the case when we want the user to choose exactly one of the options.

• <input type=“radio" name=“Name" value=“Val“>

Example: <input type="radio" name=“degree" value=“undergrad"> Under Graduate <br> <input type="radio" name=“degree" value=“grad"> graduate

• Note that if you want to make sure that only one of radio buttons can be selected you need to relate the radio buttons by having the same name for all of them.

Event Handler for Checkbox/Radio Button

• ONCLICK : when a radio button/check box has been clicked. Example:

bike: <input type="checkbox" name="vehicle” value="Bike“ onclick = “do action related to clicking the bike”> <br>car: <input type="checkbox" name="vehicle" value="Car“ onclick = “do action related to clicking the car” > <br>airplane: <input type="checkbox" name="vehicle" value="Airplane“ onclick = “do action related to clicking the airplane”>

Do it yourself• Add a set of checkboxes and a set of radio

buttons to your html file.• Checkbox with three options: Business,

Computers and Travel.• Radio buttons with choices: Male and Female.• For now forget about even handler attributes.

Dropdown Menu

<select name=“name"> <option value=“op1"> Option1 </option> <option value=“op2"> Option2 </option> <option value="op3"> Option3 </option> <option value=“op4"> Option4 </option></select>

Example

<select name="cars“ onchange = “carSelected(value)” >

<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select>

Do it yourself

Add a dropdown menu to your html file. Feel free to choose any name for the menu and name and value for your options. For now forget about event handler attribute.

Text Area

• A user can write un-limited text in the text-area.

• <textarea rows=“10" cols="20"></textarea>– rows: The number of rows for the text area.– cols: The number of columns for the text area.

• ONSELECT and ONCHANGE are two possible event handler attributes for a text area.

• Add a textarea to your html.

Buttons

• A general button: <input type="button" value="Push“>• ONCLICK is an event handler for button.• A submit button will send the data collected by

the form for processing. <input type="submit" value="Submit">• ONSUBMIT is an event handler for submit button.• A reset button resets the form. <input type="reset" value="Reset">

Do it yourself

• Add a general, a submit and a reset buttons to your html without having any event handler attributes for these buttons.

Values of Event Handlers in Java Script

Remember:<INPUT TYPE=“button” NAME=“order” ONCLICK=“Do some action”>We can define some action using JavaScript.

Values of Event Handlers in Java Script

Remember:<INPUT TYPE=“button” NAME=“order” ONCLICK=“Do some action”>We can define some action using JavaScript.

One common way to this is to call a function orroutine written in JavaScript.

Functions• Remember from your math courses in high school or

collage we had functions like this: f(x,y) = x + y then f(3,7) = 3 + 7 = 10

Functions• Remember from your math courses in high school or

collage we had functions like this: f(x,y) = x + y then f(3,7) = 3 + 7 = 10 • In Computer Science a function is a similar concept.• A function is a named sequence of instructions

bundled together to perform a task. A function can have some parameters.

Functions• Remember from your math courses in high school or

collage we had functions like this: f(x,y) = x + y then f(3,7) = 3 + 7 = 10• In Computer Science a function is a similar concept.• A function is a named sequence of instructions

bundled together to perform a task. A function can have some parameters.

• For example we have: add(x,y) : A sequence of instructions named “add” to

add parameters x and y and return the result.

Functions in JavaScript

• We have two types of functions1. Predefined functions: Those functions defined by

JavaScript. We can use them without defining them.

2. Customized functions: Functions that we need to define first according to our need, then use it. That is there is no predefined function for handling the task we have in mind.

Example of Predefined Functions

alert(message) • Calling this function causes a message box to

appear on the screen with message provided within open and close parenthesis.Example: alert(‘wrong password’)

Calling a Function

• We ask a function to perform the task it is designed for (calling a function) in this way:

function_name(param1, param2,…); function_name : Name of the function param1 : the value we assign to first parameter of the function. param2: the value we assign to second parameter of the function. Example: alert(‘wrong password’);

Defining our own functions

Syntax function name(param1,param2,…) { instruction1; instruction2; …. }Note that we define a JavaScript function inside<SCRIPT> and </SCRIPT> tags in our html file within

<HEAD> and </HEAD> tags.

Example

<HEAD> <SCRIPT LANGUAGE=“JavaScript”> function order( item, price ) { instruction1; instruction2; …. } </SCRIPT></HEAD>

Back to Event Handlers• We can call a JavaScript function as an action

corresponding to an event in form using event handler attributes.

Example:<INPUT TYPE=“button” NAME=“order” ONCLICK=“order()”> Assuming we have defined function order() somewhere.

Another Example

<select name="cars“ onchange = “alert(‘changed your car’)” > <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select>

Do it yourself

Write a HTML form with a select and a buttonForm elements. When the button clicked youshould receive a message box with message,“button has clicked” and when you change the

menu item a message box with message“changed your selection” should appear on

screen.