1. 2440: 141 Web Site Administration Web Forms Instructor: Joseph Nattey

2. Introducing Web Forms Web forms collect information from clients and pass data to a server. Web forms include different control elements including: Input boxes Selection lists Drop-down lists boxes Option buttons or radio buttons Check boxes Group boxes Text areas Form buttons Web Forms2

3. Introducing Web Forms When you create a form, divide it into topical areas The first requests contact information from the donor In the second, donor provides payment information Final part is for any comments the donor has New Perspectives on HTML and XHTML, Comprehensive3

4. Introducing Web Forms Web forms collect information from Web site visitors. Parts of a Web Form Information entered for a form is stored in a field and the value itself is known as the field value Some of the fields are freeform, while other fields are limited to a set of possible values. Control elements such as buttons, boxes, lists and so on, provide a way of associating a field value with a particular field New Perspectives on HTML and XHTML, Comprehensive4

5. Introducing Web Forms HTML supports the following control elements: input boxes for text and numerical entries option buttons also called radio buttons, for selecting a single option from a predefined list selection lists for long lists of options, usually appearing in a drop-down list box check boxes for specifying yes or no text areas for extended entries that can include several lines of text 5

6. Forms and Server-Based Programs 6 While HTML supports the creation of forms, it does not include tools to process the information. The information can be processed through a program running on a Web server.

7. Forms and Server-Based Programs Server-based programs are written in many languages The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in Perl. Other languages include: PHP JSP ASP ASP.Net ColdFusion Python Ruby Web Forms7

8. Creating the Form Element Web Forms8 Forms are created using the form element, The syntax is: elements where attributes are the attributes that control how the form is processed and elements are elements places within the form.

9. Creating the Form Element Web Forms9 Form attributes usually tell the browser the location of the server-based program to be applied to the form’s data. Always specify an id or name for the form. Two attributes are available to identify the form: id and name.

10. Creating the Form Element Web Forms10 The syntax of the id and name attributes are as follows: … where name is the name of the form and id is the id of the form. Naming a form is useful for pages that contain multiple forms so you can differentiate one form from another, and it might be required for server-based programs that accept form values

11. Working with Form Attributes After adding the elements to your form, you’ll need to specify where to send the form data and how to send it. Use the following attributes: form elements Where: action is used to specify the email address, or the filename and location of the program, that processes the form method specifies how your Web browser sends data to the server enctype specifies the format of the data stored in the form’s field Web Forms11

12. Working with Form Attributes The tag’s method attribute can have one of two values: post – sends the form’s data in a separate data stream, allowing the Web server to receive the data through “standard input” get – the default method which appends the form’s data to the end of the URL specified in the action attribute Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar) GET is better for non-secure data, like query strings in Google Web Forms12

13. Interacting with a Web Server The enctype attribute determines how the form data should be encoded as it is sent to the server. 13

14. Using the mailto Action The mailto action accesses the user’s own e-mail program and uses it to mail form information to a specified e-mail address. By-passes the need for server-based programs. The syntax is as follows: Where e-mail_address is the e-mail address of the recipient in the form. Web Forms14

15. Creating Form Controls There are four primary tags used within the tag to create form controls: - the most commonly used tag which creates 10 form controls The tag’s type attribute is used to set any of the following values for the form controls: text, password, radio, checkbox, file, image, submit, button, reset, and hidden E.g., - may be used to create 3 out of the 10 controls: submit, button, and reset - displays choices (using the tag) in a drop-down menu or a scrolling list (selection list) used to create a text field with multiple lines of data Web Forms15

16. Creating Controls The general syntax of elements is as follows: Where type specifies the type of input field, and the name and id attributes provide the field’s name and id, respectively. Web Forms16

17. Creating Input Boxes (ex12) 17 Html 4 supports 10 different input types

18. Creating Input Boxes (exCD) 18 Html 5 adds 13 new input types color, date datetime, datetime-local email, month number, range search, tel time, url, week

19. Creating an Input Box To create an input box, use the following HTML code: where the name and id attributes identify the field, the value attribute assigns the field’s default value, the size attribute defines the width of the input box in characters, and the maxlength attribute specifies the maximum number of characters that a user can enter into the field. Web Forms19

20. Setting the Size of an Input Box By default, an input box displays at 20 characters of text. To change the width of an input box, use the size attribute which is displayed as follows: Where value is the size of the input box in characters. Web Forms20

21. Setting the Size of an Input Box… (ex) Email: PIN: Web Forms21

22. Creating a Password Field A password field is an input box where characters typed by the user are displayed as bullets or asterisks to protect private or sensitive information on a Web site. The syntax for creating a Password field is as follows: Web Forms22

23. Creating a Password Field Username: Password: Note: The characters in a password field are masked (shown as asterisks or circles). Web Forms23

24. Creating a Selection List A selection list is a list box from which a user selects a particular value or set of values. Selection lists are useful when there are a fixed set of possible responses from the user. You can create a selection list using the tag. You can specify each individual selection item using the tag. Web Forms24

25. Modifying the Appearance of a Selection List You can change the number of options displayed in the selection list by modifying the size attribute. The syntax is as follows: Where value is the number of items that the selection list displays in the form. Web Forms25

26. Modifying the Appearance of a Selection List… Web Forms26

27. Modifying the Appearance of a Selection List… Web Forms27 Camry Ford Fusion Volvo Saab Opel Audi

28. Making Multiple Selections (ex) Add the multiple attribute to the select element to create multiple selections Web Forms28

29. Working with Option Groups The is used to group related options in a drop- down list. If you have a long list of options, groups of related options are easier to handle for a user. You can organize the selection list options by placing them in option groups using the optgroup element. New Perspectives on HTML and XHTML, Comprehensive29

30. Working with Option Groups (ex) text1 text2 text1 text2 where label1, label2, and so forth are the labels for the different groups of options. The text for the label appears in the selection list above each group of items but is not a selectable item from the list. New Perspectives on HTML and XHTML, Comprehensive30

31. Creating Option Buttons (ex) Option buttons, or radio buttons allow users to make selections. Unlike selection lists, option buttons only allow the user to select one option at a time. Web Forms31 All option buttons belonging to the same field share a common name Labels are matched to the id values of the option buttons

32. Creating Check Boxes (ex) To create a check box, use: Where the name and id attributes identify the check box field and the value attribute specifies the value sent to the server if the check box is selected. To specify that a check box be selected by default, use the checked attribute as follows: or Web Forms32

33. Creating a Text Area Box Text area boxes allow users to enter comments about the products they’ve purchased. An input box would be too small to accommodate the length of text for this use. Web Forms33

34. Creating a Text Area Box To create a text area box, use the textarea element: default text Where the rows and cols attributes define the dimensions of the input box and the rows attribute indicates the number of lines in the input box. Web Forms34

35. Creating a Text Area Box (ex) Web Forms35

36. Working with Form Buttons Buttons are a type of control element that performs an action. Types of buttons: Command button Submit button Reset button File button Web Forms36

37. Creating a Command Button Command buttons are created using the tag: Submit buttons submit forms to the server for processing when clicked. Syntax is as follows: Reset buttons reset forms to their original (default) values. Syntax is as follows: Web Forms37

38. Designing a Custom Button (ex) The tag defines a clickable button. Inside a element you can put content, like text or images. Use the button element for greater artistic control over the appearance of a button. content where the type attribute specifies the button type (submit, reset, or button—for creating a command button) and content is page elements displayed within the button 38

39. Creating a File Button File buttons are used to select files so that their contents can be submitted for processing to a program. The Web page then only displays the file’s location, not the file’s contents. Web Forms39

40. Working with Hidden Fields (ex) Hidden fields are added to a form, but not displayed in the Web page. The syntax is as follows: <input type=“hidden” name=“name” id=“id” value=“value” /> Web Forms40

41. Working with Form Labels You can also expressly link a label with an associated text element for scripting purposes. The syntax for creating a form label is as follows: label text Where id is the value of the id attribute for a field on the form, and label text is the text of the label. Web Forms41

42. Web Form Example Web Forms Name: Web Forms42

43. Web Form Example Email: Pin: Click on the reset button to reset the form. Web Forms43