1. HTML Structure II (Form) WEEK 2.2

2. Contents Table Form

3. Table Organize data into rows and columns All tags and text that apply to the table go inside … tags TABLE element Attributes BORDER lets you set the width of the table’s border in pixels ALIGN : left, right or center WIDTH: pixels (absolute) or a percentage

4. TABLE element …… Table row element used for formatting the cells of individual rows …… column contents Table

7. Form Collect information from people viewing your site FORM element METHOD attribute indicates the way the Web server will organize and send you form output Web server : machine that processes browser requests METHOD = “post” in a form that causes changes to server data METHOD = “get” in a form that does not cause any changes in server data Form data sent to server as an environment variable Processed by scripts ACTION attribute Path to a script (CGI / ASP scripts)

9. Contents HTML form: Textfield Textarea Check boxes Radio button Pop up/ list menu button

10. Element of Form ElementExample Textfield Textarea Check boxes Radio button List menu/pop up menu Button

11. Form Element Forms starts with tag …

12. Input Element Use to receive input from user Non container element – no close tag TYPE attributes determines how the input process is executed such as: TYPE=text TYPE=button TYPE=reset TYPE=checkbox TYPE=radio

13. Text Field Input short text Attributes Name: name of field, important when more than one text fields are declared in the form Size: specifies width (char) of the text field Value: provide initial value

14. Text Box A box in which anything can be typed ( e.g: letters, numbers) via the keyboard. Default size : 20 characters Markup: Markup:

17. Password field Works as text field except char are secured Attributes Name: name of field, important when more than one text fields are declared in the form Size: specifies width (char) of the text field Value: provide initial value Password field The computer displays bullets or asterisks Markup: Markup:

20. Example Test Input element Input element Name: password:

21. Radio Buttons Best used when you want the user to select one of a limited number of choices. Attributes: Name: specified name of objects/group Checked: radio button will be selected while loaded Value: assign value to the radio button Markup: Markup: Your favorite computer operating system: Macintosh DOS Windows Windows95 OS/2 UNIX

24. Check boxes Allow users to select more than one option. Attributes: Name: specified name of objects/group Checked: radio button will be selected while loaded Value: assign value to the radio button Markup : Markup : What operating systems have you used? Macintosh DOS Windows Windows95 OS/2 UNIX

27. Example Test Input element Input element Choose gender : Male Female Choose your favorite singer Siti Nurhaliza <input type="checkbox" name="checkbox" id="checkbox" /> Mawi <input type="checkbox" name="checkbox2" id="checkbox2" />

28. List Menu / Pop up Menu Two tags are used  select and option Attributes for select tag Name: name of the menu Size: use for more than one menu Attributes for option tag Value: not visible on the web but will be assigned to the value property of the objects Selected: option will be automatically selected while loaded

29. SELECT Create a pop-up list from which any one option may be selected. Advantage: little screen space for list options

30. Markup: Markup: How are you reaching this page? No response Compuserve America On-Line Local ISP National ISP

33. Multiple selections Select more than one : use attribute MULTIPLE Display many options : use attribute SIZE Markup: Markup: How are you reaching this page? No response Compuserve America On-Line Local ISP National ISP

36. Text Area To create a box where the user may type large amounts of text Markup: Markup:

39. Hidden INPUT Allows an input which is hidden from the user Programmers used this input for special programming purposes. Use to store extra info such as userID Attributes: Name: name of hidden element Value: provided initial value Markup: Markup:

40. Example Test Input element- text vs hidden Input element Name: Field is hidden

41. Button Three types: 1) Generic: ◦ Allow user to define any event handler 2) Reset: ◦ Elements in forms are revert to original state 3) Submit: ◦ Clicking the button will call method submit() Attributes: ◦ Value: provide text on the button

42. SUBMIT & RESET TYPE = “submit” inserts a button that submits data to the server VALUE attribute changes the text displayed on the button (default is “ Submit ”) TYPE = “reset” inserts a button that clears all entries the user entered into the form VALUE attribute changes the text displayed on the button (default is “ Reset ”)

43. SUBMIT & RESET Markup: Markup:

46. Example Test Input element Input element

47. Exercise Code a html file to create the following form.