Presentation is loading. Please wait.

Presentation is loading. Please wait.

Working with Forms. how are forms manipulated? the document object contains an array of forms objects, one for each form, in document order –forms[] any.

Similar presentations


Presentation on theme: "Working with Forms. how are forms manipulated? the document object contains an array of forms objects, one for each form, in document order –forms[] any."— Presentation transcript:

1 Working with Forms

2 how are forms manipulated? the document object contains an array of forms objects, one for each form, in document order –forms[] any form is referenced through this array –e.g. the first form in a web page would be refeerenced as document.forms[0] forms can also be referenced by NAME attribute –this makes programming easier

3 how are forms manipulated? form elements (the widgets) are accessed through the forms elements array –e.g. document.forms[0].elements[1] –refers to the second element in the first form in a document other properties of a form relate to HTML attributes –action, encoding, method, target

4 structure of a forms application web page document head document body functions form elements one or more forms defined by HTML tags in the document body. Each form contains elements such as text fields and buttons. form processing functions

5 functions and forms functions read values from form elements function parameters can be –element values –elements –forms re-useable validation functions can be imported from an external script file

6 external script files contain arbitrary JavaScript code usually used to define re-useable functions –form validation –boilerplate HMTL code is maintained in one place, used in many pages imported using the SCRIPT tag

7 Example

8 what are forms used for? providing a client-side user interface –input through prompt boxes, text fields and text areas –output through text fields and text areas, pop- up windows, HTML text elements –control through buttons and hyperlinks collecting data to send to a server process –the data from a single form is submitted

9 Simple Interface Example

10 Example

11 The Multiplier //form processing functionality function multiply(){ //read the numbers from the form fields x = document.multiplier.num1.value; y = document.multiplier.num2.value; // compute and output the product product = x * y; alert(x); }

12 Example... The Multiplier Please input a number in each box... *

13 Extended Example client-side forms interface

14 Requirements a simple web interface to try out text and background colour combinations for web page design user defines colours, web page displays a sample table layout using those colours

15 Design frameset with two frames –colour picker frame –display frame function in an externally defined script –re-useable for colouring other framesets button in colour picker frame to trigger the display function form with text fields used for input

16 top-level frameset Colour Picker

17 colour-picker frame

18 colour-picker frame Enter colour values in the boxes

19 colour-picker frame Background Colour Text Colour Table Headings Table Data

20 colour-picker frame { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.com/3/783151/slides/slide_20.jpg", "name": "colour-picker frame ", "description": "colour-picker frame ", "width": "800" }

21 picker.js function showIt () { //get the array of text fields var topBox = document.forms [0].elements; //get hold of the document to write to //and give it a managable name var bottomBox = parent.frames['botOne'].document;

22 picker.js // now extract the values from the form elements var bg = topBox.bgcol.value; var fg = topBox.fgcol.value; var thc = topBox.thcol.value; var tdc = topBox.tdcol.value;

23 picker.js // now build the new page, using these colour variables bottomBox.open (); bottomBox.write (" \n"); bottomBox.write (" The Result Is: ");

24 picker.js bottomBox.write (" \n "); bottomBox.write (" Plain Heading "); bottomBox.write (" Coloured Heading "); bottomBox.write (" "); bottomBox.write (" Plain Data "); bottomBox.write (" Coloured Data "); bottomBox.write (" \n "); bottomBox.close (); }

25 Form Validation

26 form validation client-side validation checks form data before submission to server processes reduces input errors saves communication time easier to correct errors on input reduces error-processing overhead on the web server

27 typical form validation checks check all required fields have been completed check all numerical values are in range check coded data are in an appropriate format –post codes –telephone numbers –credit card numbers Luhns algorithm

28 form validation techniques validation checks are encoded as JavaScript functions –run onSubmit or in response to other events –standard functions imported from external scripts functions read form elements and perform tests assign new properties to form elements to assist validation –e.g. numerical ranges, boolean properties

29 limits of client-side validation web pages can be spoofed validation code is visible in the page source and can be altered reduces errors but does not prevent malicious input of false (or dangerous) data data should always be re-validated on the server

30 Extended Example: Form Validation

31 Requirements personal information form –name, address, zip code, phone number first name and phone number optional, all other fields must be completed zip code must be within min and max value error message should indicate –which non-optional fields are blank –which numerical fields are out of range validation function should be re-useable

32 Design function isBlank returns a boolean indicating whether a field is blank –should work on a text field or a textarea function verify runs when a form is submitted –checks all fields in the form –submits data if all fields valid –blocks invalid data and produces a list of errors

33 Design import verify and isBlank as external scripts –they can be re-used on other pages and maintained in the one script file attach verify to the onSubmit event-handler on the form add validation properties to particular form elements

34

First Name: Last Name: Address: