1. LOGO FORMs in HTML CHAPTER 5 Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side Internet and Web Programming Prepared by: R. Kansoy

2. 5. FORMs in HTML http://sct.emu.edu.tr/it/itec229 2  Used to collect information from people viewing your site  The tag is used to create an HTML form.  FORM element Attributes  METHOD attribute indicates the way the Web server will organize and send you form output. 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.  ACTION attribute Path to a script Web server: machine that processes browser requests.

3. 5. FORMs in HTML http://sct.emu.edu.tr/it/itec229 3  HTML forms are used to pass data to a server.  A form can contain input elements like;  text fields,  checkboxes,  radio buttons,  submit buttons  and more..  A form can also contain  select lists,  textarea,  fieldset,  legend,  and label elements.

4. 5. FORMs in HTML http://sct.emu.edu.tr/it/itec229 4 The Input Element  The most important form element is the input element.  An input element can vary in many ways, depending on the type attribute.  An input element can be of type  text,  checkbox,  password,  radio,  submit,  reset  and more..

5. 5. FORMs in HTML http://sct.emu.edu.tr/it/itec229 5 The Input Element  INPUT element Attributes:  TYPE (required) – Defines the usage of the INPUT element – Hidden inputs always have TYPE = “hidden”  NAME provides a unique identification for INPUT element  VALUE indicates the value that the INPUT element sends to the server upon submission  SIZE – For TYPE = “text”, specifies the width of the text input, measured in characters  MAXLENGTH – For TYPE = “text”, specifies the maximum number of characters that the text input will accept

6. First name: Last name: First name: Last name: 5. FORMs in HTML Text Fields  defines a one-line input field that a user can enter text into: 6 http://sct.emu.edu.tr/it/itec229 How the HTML code above looks in a browser: Note: The form itself is not visible. Also note that the default width of a text field is 25 characters.

7. Password: 5. FORMs in HTML Password Field  defines a password field: 7 http://sct.emu.edu.tr/it/itec229 How the HTML code above looks in a browser: Note: The characters in a password field are masked (shown as asterisks or circles).

8. Male Female 5. FORMs in HTML Radio Buttons  Radio buttons let a user select ONLY ONE of a limited number of choices.  defines a radio button.  CHECKED attribute indicates which radio button is selected initially 8 http://sct.emu.edu.tr/it/itec229 How the HTML code above looks in a browser:

9. 5. FORMs in HTML Checkboxes  Checkboxes let a user select NONE/ONE/MORE options of a limited number of choices.  defines a checkbox.  Used individually or in groups  Each checkbox in a group should have same NAME  Make sure that the checkboxes within a group have different VALUE attribute values Otherwise, browser will cannot distinguish between them  CHECKED attribute checks boxes initially 9 http://sct.emu.edu.tr/it/itec229

10. I have a bike I have a car I have a bike I have a car 5. FORMs in HTML Checkboxes 10 http://sct.emu.edu.tr/it/itec229 How the HTML code above looks in a browser:

11. Username: 5. FORMs in HTML Submit Button  defines a submit button.  A submit button is used to send form data to a server.  The data is sent to the page specified in the form's action attribute.  The file defined in the action attribute usually does something with the received input.  VALUE attribute changes the text displayed on the button (default is “Submit”) 11 http://sct.emu.edu.tr/it/itec229 How the HTML code above looks in a browser: NOTE: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input

12. Username: Password: Username: Password: 5. FORMs in HTML Reset Button  defines a reset button.  A reset button is used to clear all the entries user entered into the form.  VALUE attribute changes the text displayed on the button (default is “Reset”) 12 http://sct.emu.edu.tr/it/itec229 How the HTML code above looks in a browser:

13. ITEC 229 ITEC 229 5. FORMs in HTML TEXTAREA  Inserts a scrollable text box into FORM  ROWS and COLS attributes specify the number of character rows and columns 13 http://sct.emu.edu.tr/it/itec229 How the HTML code above looks in a browser:

14. 5. FORMs in HTML SELECT  Places a selectable list of items inside FORM  Include NAME attribute  Add an item to list  Insert an OPTION element in the … tags  Closing OPTION tag optional  SELECTED attribute applies a default selection to list  Change the number of list options visible  Including the SIZE = “x” attribute inside the tag  x number of options visible 14 http://sct.emu.edu.tr/it/itec229

15. 5. FORMs in HTML SELECT 15 http://sct.emu.edu.tr/it/itec229 BMW Mercedes Audi BMW Mercedes Audi How the HTML code above looks in a browser:

16. 5. FORMs in HTML EXAMPLE 1: 16 http://sct.emu.edu.tr/it/itec229 Forms Feedback Form Please fill out this form to help us improve our site. Name: Comments: Forms Feedback Form Please fill out this form to help us improve our site. Name: Comments:

17. 5. FORMs in HTML EXAMPLE 1 (cont..) : 17 http://sct.emu.edu.tr/it/itec229 Email Address: Things you liked: Site design Links Ease of use Images Source code Email Address: Things you liked: Site design Links Ease of use Images Source code

18. 5. FORMs in HTML EXAMPLE 1 (output): 18 http://sct.emu.edu.tr/it/itec229

19. 5. FORMs in HTML EXAMPLE 2: 19 http://sct.emu.edu.tr/it/itec229 Forms II Feedback Form Please fill out this form to help us improve our site. Name: Comments: Email Address: Forms II Feedback Form Please fill out this form to help us improve our site. Name: Comments: Email Address:

20. 5. FORMs in HTML EXAMPLE 2 (cont..): 20 http://sct.emu.edu.tr/it/itec229 Things you liked: Site design Links Ease of use Images Source code How did you get to our site?: Search engine Links from another site Deitel.com Web site Reference in a book Other Things you liked: Site design Links Ease of use Images Source code How did you get to our site?: Search engine Links from another site Deitel.com Web site Reference in a book Other

21. 5. FORMs in HTML EXAMPLE 2 (cont..): 21 http://sct.emu.edu.tr/it/itec229 Rate our site (1-10): Amazing:-) 10 9 8 7 6 5 4 3 2 1 The Pits:-( Rate our site (1-10): Amazing:-) 10 9 8 7 6 5 4 3 2 1 The Pits:-(

22. 5. FORMs in HTML EXAMPLE 2 (output): 22 http://sct.emu.edu.tr/it/itec229

23. LOGOhttp://sct.emu.edu.tr/it/itec229 FORMs in HTML END of CHAPTER 5