Forms cs105

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 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

Any standard HTML element (except another ) can be contained within – 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 : 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: 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 …. First Name

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 Number 1: <INPUT TYPE=“text” NAME=“num1” VALUE = “0” ONCHANGE=“do this action”> 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. Example: bike: car: airplane:

Radio Button Radio Button is for the case when we want the user to choose exactly one of the options. Example: Under Graduate 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”> car: <input type="checkbox" name="vehicle" value="Car“ onclick = “do action related to clicking the car” > 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 Option1 Option2 Option3 Option4

Example Volvo Saab Fiat Audi

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. – 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: ONCLICK is an event handler for button. A submit button will send the data collected by the form for processing. ONSUBMIT is an event handler for submit button. A reset button resets the form.

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 or routine 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) = = 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) = = 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) = = 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 functions 1.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 and tags in our html file within and tags.

Example function order( item, price ) { instruction1; instruction2; …. }

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’)” > Volvo Saab Fiat Audi

Do it yourself Write a HTML form with a select and a button Form elements. When the button clicked you should 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.