1 Forms A form is the usual way that information is gotten from a browser to a server –HTML has tags to create a collection of objects that implement this information gathering –The form objects are called widgets (e.g., radio buttons and checkboxes, submit). –When the Submit button of a form is clicked, the form’s values are sent to the server –The server checks the values and responses accordingly There are eight types of widgets. All of the widgets, or components of a form are defined in the content of a tag –Many are created with the tag The type attribute of specifies the kind of widget being created

2 The only required attribute of is action, which specifies the URL of the application that is to be called when the Submit button is clicked. The method attribute of specifies one of the two possible techniques of transferring the form data to the server, get and post.

3 1. Text –Creates a horizontal box for text input –Default size is 20; it can be changed with the size attribute –If more characters are entered than will fit, the box is scrolled (shifted) left –If you don’t want to allow the user to type more characters than will fit, set maxlength, which causes excess input to be ignored

4 2. Checkboxes –Collect multiple choice input <input type = "checkbox" name = "groceries" value = "milk" checked = "checked" /> Milk –Every checkbox requires a value attribute, which is the widget’s value in the form data when the checkbox is ‘checked’ –A checkbox that is not ‘checked’ contributes no value to the query string –By default, no checkbox is initially ‘checked’ –To initialize a checkbox to ‘checked’, the checked attribute must be set to "checked”

5 3. Radio Buttons –Created with radio button tag –collections of checkboxes in which only one button can be ‘checked’ at a time –Every button in a radio button group MUST have the same name –If no button in a radio button group is ‘pressed’, the browser often ‘presses’ the first one

6 4. Menus Created with selection tag milk bread eggs cheese Menus that behave like checkboxes are specified by including the multiple attribute, which must be set to "multiple“ The name attribute of is required If size is set to > 1 or if multiple is specified, the menu is displayed as a pop-up menu Each item of a menu is specified with an tag, whose pure text content (no tags) is the value of the item

7 5. Text areas –created with –Usually include the rows and cols attributes to specify the size of the text area –Default text can be included as the content of – Scrolling is implicit if the area is overfilled

8 7. Password 8. Hidden field

9 6. Reset and Submit buttons –Both are created with –Submit has two actions: 1. Encode the data of the form 2. Request that the server execute the server-resident program specified as the value of the action attribute of –A Submit button is required in every form

10 What happens after submit After submit button is click 1.The browser sends the input values to the WWW server 2.Call the program indicated by the action to process the query. 3.And return an HTML document to browser 4.The browser display the result. The server side program is usually called Common Gateway Interface (CGI) See example

11 JavaScript What is JavaScript –A script language which can be used to write program inserted in HTML document to do computation on the client machine and to display the result in the browser.

12 How to add JavaScript into HTML 1.Use tag with language attribute = "JavaScript " -- JavaScript script –

13 What it can done with JavaScript Simple computation Event driven 1.User interactions with HTML documents in JavaScript 2.User interactions with form elements can be used to trigger execution of scripts Examples 1.Menus for Navigation 2.Form Validation 3.Popup Windows 4.Password Protecting 5.Math Functions 6.Special effects with document and background 7.Status bar manipulation 8.Messages 9.Mouse Cursor Effects

14 Real Example Real roots of a quadratic equation <!-- // Get the coefficients of the equation from the user var a = prompt("What is the value of 'a'? \n", ""); var b = prompt("What is the value of 'b'? \n", ""); var c = prompt("What is the value of 'c'? \n", ""); // Compute the square root and denominator of the result var root_part = Math.sqrt(b * b * a * c); var denom = 2.0 * a; // Compute and display the two roots var root1 = (-b + root_part) / denom; var root2 = (-b - root_part) / denom; document.write("The first root is: ", root1, " "); document.write("The second root is: ", root2, " "); // -->

15 Check the given link to find more JavaScript Application