1. Using Entities & Creating Forms Jill R. Sommer Institute for Applied Linguistics Kent State University

2. Using Entities  Many symbols are frequently published that do not appear on the standard English keyboard, such as the cent and copyright symbols. In HTML, these are called character entities.  Character entity symbols also include language diacritical marks and mathematical symbols.

3. Using Entities  HTML enables you to include these symbols in a Web page by typing an ampersand symbol (&), followed by a keyword or number, and then a semi-colon (;)  When the browser sees this character entity value, it replaces it with the appropriate symbol.

4. Using Entities  For example, to have a browser display the copyright symbol (©), you need to type © or © in your HTML file.  The numerical values are taken from the ASCII values for the various characters, but they can be difficult to remember so named character entity values were created to make it easier for Web page authors to use.

5. Using Entities  The most important ones to remember are: (non-breaking space) & (ampersand) and " (quotation mark)  If you use an editor, it will most likely convert your diacritical marks.

6. For Specific Entities, See:  http://www.htmlhelp.com/reference/html40/ entities/latin1.html  http://www.htmlhelp.com/reference/html40/ entities/symbols.html  http://www.htmlhelp.com/reference/html40/ entities/special.html

7. Form Basics  Forms allow users to sign guest books, answer surveys, register for information, order merchandise online, etc.  Forms used to run using Common Gateway Interface (CGI) programs, but now forms can be handled using technologies like Active Server Pages (ASP), JavaServer Pages (JSP), or PHP (a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML)

8. Form Basics  Forms are used to transfer information.  Forms have two functions: to allow the user to send information to the server and to allow the server to track the user.  Forms are useless on their own. They need to interact with a processing program on the back end or server that allows us to implement the functionality of the form.

9. Form Basics  A Web page form can consist of many different form elements. These form elements can include elements such as text fields, radio buttons, drop-down lists, and submit and reset buttons  The beginning and end of a form is noted by a set of tags. All form elements must appear within these tags to belong to the form.

10. Form Basics  The tag also includes attributes that you can use to specify how and where the form data gets passed (action, method, and enctype).  The two attributes that you use to handle the form data are the action and method attributes. They determine how the form data is sent.

11. Form Basics: Action  The action attribute can be set to the URL of an application that can process the form data.  The server can also route the form data to an e-mail address. This is accomplished by setting the action attribute to an e-mail address: (action="mailto:results@mysite.com")  For this to work, you need to set the method attribute to post (method="post")

12. Form Basics: Method  The method attribute defines how the form data gets passed to the program specified in the action attribute.  The get method tacks data onto the end of the URL to pass it to the server. The get method can be problematic if the browser limits how long the URL line can be.  The post method includes the form data as part of the HTTP request.

13. Form Basics: Method  If the method attribute is missing from the tag, the get method is used to submit the form data.  Using the get method, the form data is attached to the end of the URL line. A question mark (?) separates the actual URL address and the name/value pairs. Each name/value pair is separated from the other with the ampersand symbol (&)

14. Form Basics: Method  The post method for passing data to the program is more common and more browser compatible.  The post method sends all the form element‘s names and values to the standard input channel. The program can then access this data and process it.  The post method can handle large amounts of data.

15. Form Basics: Enctype  The default enctype attribute is application/x-www.form.urlencoded.  This type is used if the enctype attribute is missing from the opening tag.  Follow the rules for the form field type you want to use on your site.

16. Form Tags

17. Setting up a Form  A single Web page may have several forms, each with a unique name  You cannot nest tags within each other. Each set of tags should appear independent of all other tag sets.  Each form can be named by using the name attribute. This name is used by languages such as JavaScript to refer to the form and its elements.

18. Form Basics: Input Types  HTML forms are used to select different kinds of user input.  The most used form tag is the tag. The type of input is specified with the type attribute. The most commonly used input types are explained in the next slides.

19. Input Types: Text Fields  Text fields are used when you want the user to type letters, numbers, etc. in a form.

20. Input Types: Test Fields

21. Input Types: Radio Buttons  Radio Buttons are used when you want the user to select one of a limited number of choices.

22. Input Types: Radio Buttons

23. Input Types: Checkboxes  Checkboxes are used when you want the user to select one or more options of a limited number of choices.

24. Input Types: Checkboxes

25. The Action Attribute and the Submit Button  When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

26. The Action Attribute and the Submit Button

27. Another Radio Button Example

29. Drop-down Boxes  Drop-down boxes are an easy way to offer your visitors a number of choices while saving space.  A drop-down box is a selectable list.

30. Drop-down Boxes

33. Drop-down Box with a Pre-selected Value

35. Text-Area  This next example demonstrates how to create a text-area (a multi-line text input control).  A user can write text in the text-area.  You can write an unlimited number of characters in a text-area.

36. Text-Area

38. Creating a Button  You can create buttons and define your own text on the button.  Buttons can be quite useful if you want to make your page unique

39. Creating a Button

40. Fieldset Around Data This next example demonstrates how to draw a border with a caption around your data.

41. Fieldset Around Data

43. Forms with Input Field and Submit Button

45. Forms with Checkboxes

47. Forms with Radio boxes

49. Send an E-mail from a Form