1. 1 Creating Web Forms in HTML Web forms collect information from customers 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

2. 2 Forms Interact with Server-Based Programs 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 The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in perl Other popular languages include: –Python - PHP –ASP- Java/ JSP –ColdFusion- the Unix shell –C/C++- Visual Basic

3. 3 Creating the Form Element Forms are created using the form element, created as follows: input elements - elements are elements places within the form. - name is the name of the form and id is the id of the form. They should have the same value.

4. 4 Creating Input Elements Inside a Form A list of input elements go inside the form tags. The general syntax of input elements is as follows: - type specifies the type of input field, - name and id are the field’s name and id.

5. 5 Input Types

6. 6 Creating a Text Input Field To create a text input field: <input type=“text” name=“name” id=“id” value=“value” size=“value” maxlength=“value’ /> name and id identify the field, value assigns the field’s default value, size defines the width of the input box in characters, maxlength specifies the maximum number of characters that a user can enter into the field.

7. 7 Adding a Form Label You can expressly link a label with an associated input element for scripting purposes. The syntax for creating a form label is as follows: label text id is the value of the id attribute for a field on the form label text is the text of the label

8. 8 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:

9. 9 Creating Hidden Fields Hidden fields are added to a form, but not displayed in the Web page. They are used to pass information to the server script that the user need not enter. The syntax is as follows: <input type=“hidden” name=“name” id=“id” value=“value” />

10. 10 Creating Option Buttons Option buttons, or radio buttons allow users to make selections (only one button is selected at a time). To create a radio button, use: name and id attributes identify the field value is what’s sent to the server if the radio button is selected All option buttons belonging to the same field share a common name Labels are matched to the id values of the option buttons

11. 11 Creating Check Boxes To create a check box, use: name and id attributes identify the field value is what’s sent to the server if the check box is selected To specify that a check box (or radio button) be selected by default, use the checked attribute as follows:

12. 12 Creating Form Buttons File buttons are used to select files so that their contents can be submitted for processing to a program. 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: Command buttons are useful for user-defined actions: Image buttons let you use an image as a button:

13. 13 How a File Button Behaves 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.

14. 14 Designing Your Own Custom Buttons Use the button tag for greater artistic control over the appearance of a button content content is the HTML that displays the button.

15. 15 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 Choice1 Add the multiple attribute to the select element to create multiple selections. Add the selected attribute to the option element to create a default preselected item.

16. 16 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: …

17. 17 Creating Option Groups in Selection Lists Use option groups to organize selection lists into distinct groups. itema1 itema2 … itema1 itema2 … …

18. 18 Creating Text Area Boxes Text areas are good for long, multi-line text input: default text rows and cols define the dimensions of the input box and the rows attribute indicates the number of lines

19. 19 Additional Data Types in HTML5 Example:

20. 20 Some New HTML5 Attributes placeholder – hint for how the input should look. autocomplete – currently only works in Firefox and Opera required – syntax is required = “required” pattern – used to require input in the format of a regular expression Example:

21. 21 Organizing Input Elements into a Field Set HTML and XHML allow you to organize input elements into a group of fields called field sets Most browsers place a group box around a field set to indicate that the fields belong to a common group fields fields are the individual fields within a set. To add a caption to a field set, add the following tag after the opening tag: text

22. 22 Some Important 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: … - action specifies the filename and location of the program that processes the form - method attribute specifies how your Web browser sends data to the server. -enctype attribute specifies the format of the data stored in the form’s field. The default enctype is the value application/x-www-form-urlencoded.

23. 23 The Action Attribute in a Form The action attribute indicates what program to run when the form is submitted: <form action=“http://www.lh.org/cgi- bin/donate” method=“post” id=“donateform”> … The mailto action is a special action that accesses the user’s own e-mail program for mailing form information to a specified e-mail address: <form action=“mailto:adavis@langear.com” method=“post” id=“donateform”> …

24. 24 The Method Attribute in a Form The method attribute can have one of two values: - The get method is the default; get appends the form data to the end of the URL specified in the action attribute –The post method sends form data in a separate data stream, allowing the Web server to receive the data through “standard input”