1. HTML Forms

2. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief JavaScript introduction to show the purpose of an input form

3. Slide 3 The Purpose of Forms Forms are used to create boxes and other widgets that allow users to enter data The data is typically submitted to the server for processing But we will not discuss server-side processing here JavaScript can be used to access form elements on the client too

4. Slide 4 Form (Posting) A form’s data may be sent to the server in different ways: GET / data is sent in the URL POST / data is sent in the HTTP header We won’t get into exactly how this works yet

5. Slide 5 History of Forms They have been the same “forever” XForms tried and failed Big changes in HTML 5 But they don’t break existing code Not all browsers support all features but most features are supported

6. Slide 6 Important Elements (tags) The element marks a region used to get user input It is the form (and it’s elements) that are posted to the server The element groups visible elements in the form It appears as an immediate child of the element

7. Slide 7 Important Elements (tags) The element draws a prompt around the box It appears as a child of Other elements appear inside of the

8. Slide 8 The Element The action attribute contains the URL where the data will be posted to the server This makes little sense now but will when we talk about server-side processing The method attribute defines how the form is posted get – data is posted in the ‘query string’ put – data is posted in the form’s header Note the name attribute is deprecated (use id )

9. Slide 9 The Element (Example) A first form with two text boxes: First name: Last name:

10. Slide 10 The Element (1) The element logically groups visible controls The element must appear inside of a element A form can have multiple fieldsets A border is drawn around the

11. Slide 11 The Element (2) The element contains text that appears in the border It must appear as an immediate child of

12. Slide 12 Important Elements (tags) The element provides a visual prompt for an element The element is used to create a control that gathers user input Lots of new type attributes The element provides a multi- line input control The element provides a check box that is checked or unchecked

13. Slide 13 Important Elements (tags) The element is a clickable button There are also radio buttons, list boxes, and so on

14. Slide 14 The element It’s a visible label that the user sees Use it to create prompts Set the for attribute to the id property of the related control When the user clicks on the label, it’s as if the user clicked on the “for” element It makes a click on the label focus the input element it is for.

15. Slide 15 The Element The type attribute defines how the element appears and how it operates Note that if the type is invalid or does not exist, a text box is assumed

16. Slide 16 Elements (List) New HTML 5 attributes

17. Slide 17 text Elements text elements allow the users to enter text into a text box password elements hides the characters entered The value attribute stores the entered value Example:

18. Slide 18 text Elements There are several extensions (w3schools) The placeholder attribute displays default text If the required attribute is set, the form cannot be submitted until the user provides input The required and optional attributes are used with CSS styles (pseudo classes) to set formatting

19. Slide 19 text Elements The pattern attribute contains a validation regular expression valid and invalid attribute determine which styles to apply to valid and invalid data in-range and out-of-range attribute determine which styles to apply to valid and invalid data There are several date types as shown in the example

20. Slide 20 text Elements New types The email type marks an e-mail message The number type marks a number Use min, max, step and value to define the range and default value The new control range type provides a slider Again, use min, max, and value to control the range and current value

21. Slide 21 Elements Use to create a scrollable multi-line text box Set the rows attribute to define the number of rows displayed Set the cols attribute to define the number of columns display The value appears in the element content

22. Slide 22 checkbox Element It’s a box that can be checked or unchecked (a two-state control) The Boolean checked attribute indicates whether the box is checked or not

23. Slide 23 radio Elements Use to select one item from a list of items Set the name attribute to the same value to make the buttons appear as part of a group Set the checked attribute to define the button selected by default Handle the onchange event to do work when a radio button is selected

24. Slide 24 Elements Use to select items from a drop-down list The child elements contain the drop-down items Handle the onchange event to do work when an item is selected Read the selectedIndex attribute to get the 0-based index of the selected item Read the value property to get the item’s value;

25. Slide 25 Elements (Examle) Create a select element with three drop-down items

26. Slide 26 Buttons There are three types of buttons submit – triggers the form’s action (GET or POST) reset – reset the form’s fields to their initial values button - action is controlled by client-side script This is the button we will use in this course

27. Slide 27 HTML5 Form Improvements The and elements provide a progress bar Set the attribute to the current value of the meter (between 0 and 1)