1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. 2 Outline Form - Next class: – Client-side validation

3. 33 Introduction to Forms Example: form_ex_1.html

4. 4 Introduction to Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, textarea, checkboxes, radio-buttons, submit buttons, select lists, fieldset, legend, and label elements. The client fill-out some information and then the browser sends the data from the form fields to the server for processing, to an e-mail address, or to a JavaScript subroutine.

5. 5 Introduction to Forms Syntax: A document may have more than one form, but forms cannot be nested.

6. method: specifies how the data will be transmitted. The method is the short way of saying HTTP request method. It tells the server the request is being made of what kind of request it is. - method=“get”: the default method. The fill-out form contents to be appended to the URL as if they were a normal query (maximum of 256 characters). - method=“post” : the fill-out form contents to be sent to the server in a data body rather than as part of the URL Method “post” is more secure. 6 Attributes for

7. 7 The action attribute tells browser where to post the form data or which address to get with the appended data. This is the action that takes place when the user presses the submit button.

8. 8 tag The tag is used to specify a simple input element inside a form that can receive user input. All tags are required to have a type attribute. Except for the submit and reset buttons they must also have a name attribute. The type indicates what sort of input field the tag represents, such as text boxes or radio buttons. The name/id attribute creates a named data field, or variable, to assign values to. The name/id attribute must be unique within a form, although some types of input may take multiple tags to define

9. 9 type Attribute type = “text”: single line text input field in which the user can enter text. type = “password”: a text field where the content is masked, such as password fields. type = “checkbox” : a toggle that the user can select (switch on) or deselect (switch off.) type= “radio”: one of a set of radio buttons, which is a collection of selectable check boxes where only one in the group can be chosen. type= “file”: allows the user to select of file on their computer for submission to the server. type = “hidden”: denotes a hidden field, usually for sending additional system generated information along with the form, for instance, the form version number.

10. 10 type Attribute type= “reset”: reset all elements in the form to their default values. type= “submit”: when a user clicks a submit button, the form is submitted, which means that the action specified for the form is invoked. type=“image”: Places an image, serving as a custom button in place of the submit button. When a user clicks the image, the form is submitted to the server. New in HTML5: type =“email”: a field for email. type = “number”: a field for number, type = range: slider control for number range.

11. Attributes for checked: element is selected when page loads disabled: value cannot be submitted maxlength = “maximum amount of text” maxlength can be larger than the size, -- scroll. readonly size = width in number of characters value = “initial/ default value” multiple 11

12. Attributes for New in HTML5: autocomplete= “on” or ”off” (form_ex_3.html) autofocus: element automatically get focus when page loads max: max value for an element min: min value for an element placeholder= “hint for input” Required list: with to provide a list of predefined options 12

13. 13 Text Fields in a Form

14. 14 Text Fields in a Form A text field is an empty field that is one line high and of a given length that accepts a single line of input from a user.

15. : specifies a list of pre-defined options for an element. To provide an "autocomplete" feature on elements. Users will see a drop-down list of pre-defined options as they input data. (form_ex_3.html) 15 Department: IT Finance Sales

16. 16 Text Fields in a Form what the user types does not display on the screen. Instead it is masked by some masking character, such as an asterisk. Note: the password type only secures the information from prying eyes, it does not secure it from prying programs. The data written into the field is still stored as a string of plain text and is still transmitted unencrypted unless a secure transmission method is used. Type in your password:

17. 17 Text Fields in a Form Allows the user to select a file to be sent back to the server by browsing the directories. The file name is included as a text string which the browser uses to retrieve the document. In order to use this type of data field, you must set your method to post. Select a file:

18. 18 : allows for multi-line input fields. attributes: - rows = “height of the textarea in character” i.e., the number of lines up - cols = “width of the textarea in character” i.e., the number of characters across. - name = “symbolic name of the text entry field“ Input your comments: Text Fields in a Form

19. 19 Selection Fields in a Form Selection fields allow you to choose from a selection of options. These choices can be exclusive, in the case of radio buttons, meaning you can only select one, or can be non-exclusive, such as checkboxes, meaning you can choose many from a list. The selection field types are:

20. 20 Selection Fields in a Form The checkbox input type creates an item that can be checked or unchecked. When sending data from checkboxes, only the data from selected checkboxes is sent. Blank, unselected checkboxes have no data sent. Attributes: value = “data” : data sent to server checked = “checked”: pre-selected Although the items appear to be in a list, each one is a separate data field that is returned separately when the data is submitted. Since the items are a list, you can choose to name each element separately, or you can name all the elements in the list with the same name.

21. 21 Selection Fields in a Form similar to the function of the checkbox, except that only one option can be selected at a time. All fields in a radio button group should also have the same name, since they are all different possible values for the same variable The radio button list will always return only one value. Attributes: - value = “data” : data sent to server - checked = “checked”: pre-selected - only one radio button in a button grouping can be marked as checked.

22. tag Define a label element. It does not render as anything special for the user. It provides a usability improvement for mouse users, – if the user clicks on the text within the element, it toggles the control. The for attribute of the tag should be equal to the id attribute of the related element to bind them together. 22

23. Example Female Male 23 form_ex_2.html music sports reading

24. 24 Selection Fields in a Form … create a drop down menu or scrollable list of selectable choices. Ex: (form_ex_2.html) the interested topics: web design programming database

25. Selection List The selection list itself is defined by a series of tags. The name to the tag applies to the entire list. If more than one option is selected in the list, the options are all sent to the server under that one variable name as a comma separated list. 25

26. 26 Selection Fields in a Form … Attributes: - multiple="multiple“: allows users to select more than one option, usually by holding down the Control key while clicking on additional choices. Otherwise the selection functions like radio buttons where selecting one deselects another. - size = “ how many lines are display in the selection menu” ** If the size is not specified or if it is set to a value of one (size="1") then a single line is displayed and the selection menu functions as a drop down menu. ** If a number larger than one is specified, then the menu functions as a scrollable list.

27. 27 Selection Fields in a Form … The … tag is what is used to define the individual selectable elements in the menu. one tag for each item. The contents between the tag is what shows up in the menu listing. The value attribute is the value that is returned by selecting that option. If a value is not specified, the contents of the option tag are returned.

28. 28 Selection Fields in a Form … tag to group things by category. the details of the topics: XHTML Frames Forms C language Java form_selection.html

29. 29 Form Buttons Buttons are selectable icons that perform some action when clicked on. They are sometimes called action buttons since some action occurs when one is clicked on. The different types of buttons are: -

30. 30 Form Buttons Allow users to submit the data and to reset the form, respectively. “submit”: submit form to the server as per the method and action attributes of the form. “reset”: does not send anything back to the server. It clears and resets the form.

31. 31 Form Buttons If you do not provide value attributes for these buttons then they have default names that are system dependent. If you provide a name attribute for the submit button, then you must also provide a value, since that value will be sent back associated with the name. There is no need to assign a name to reset button, although it can be assigned a value if you want a reset message other than the default.

32. 32 Form Buttons - examples Submit buttons: Reset buttons: Example: form_ex_buttons.html

33. 33 Form Buttons Use image as the submit button. The submission includes: - data of the form - x, y coordinates of the mouse click within the image. Example: form_ex_buttons.html

34. 34 Form Buttons An action button that is neither a submit button nor a reset button. Does absolutely nothing, unless you tell it to. Needs to be associated with event attributes that determine what to do when the button is selected. <input type="button" value="Press This Button" onclick="window.alert('using type =button....')" /> Example: form_ex_buttons.html

35. 35 Form Buttons The tag allows you to perform most of the above actions with greater flexibility. content showing as button type attributes: - Example: form_ex_buttons.html

36. 36 Accessing Fields use the tabindex attribute to specify a tab order. The tab index starts at one (1) and increases with adding items. If tabindex=“0“ or tabindex="-1“ (negative number), then the field cannot be tabbed to, although it can still be selected with the mouse. Course: <input type = "text" name ="courseName" size = "30" maxlength="50" value = “BTI220“ tabindex = "1" /> Name: <input type="text" name="MyName" size="30" maxlength="50" tabindex ="20"/> Question: <input type="text" name="Quest" size="30" maxlength="100" tabindex = "10"/>

37. 37 Grouping Fields : grouping the fields : specifying a title for the group Some Questions Course: <input type = "text" name ="courseName" size = "30" maxlength="50" value = “BTI220"/> Name: <input type="text" name="MyName" size="30" maxlength="50“/> Example: form_ex_advanced.html

38. 38 Remarks about Forms HTML itself does not control what is entered in text fields or validate the data entered. Two possible solutions: (1) use clear and concise directions for the form (2) write client-side or server-side programs to test the data before sending it to the program that is supposed to process it.

39. 39 Remarks about Forms Try to make the browser window user-friendly. Clear directions for all form elements. Make sure fields are neatly arranged and are sized to reflect the content that goes in them. Use selection buttons rather than text boxes whenever possible to reduce the number of possible answers the user can give or must choose from.

40. 40 Nice structure and flow - Structure: grouping the form into coherent units. - Structure allows to break the form up into smaller units, - Flow: having the coherent units cohere into a narrative that the user can work their way through. - Flow ensures that people don't get lost moving through the form. - In other words, things should be grouped sensibly and in a sensible order. Remarks about Forms

41. Lab 5 Practice on forms 41

42. Next Class Client-side validation 42

43. Thank you!