Using Entities & Creating Forms

Jill R. Sommer

Institute for Applied Linguistics

Kent State University

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.

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.

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.

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.

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

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)

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.

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 <form> tags. All form elements must appear within these tags to belong to the form.

Form Basics

The <form> 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.

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")

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.

Form Basics: Method

If the method attribute is missing from the <form> 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 (&)

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.

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 <form> tag.

Follow the rules for the form field type you want to use on your site.

Form Tags

Setting up a Form

A single Web page may have several forms, each with a unique name

You cannot nest <form> tags within each other. Each set of <form> tags should appear independent of all other <form> 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.

Form Basics: Input Types

HTML forms are used to select different kinds of user input.

The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained in the next slides.

Input Types: Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

Input Types: Test Fields

Input Types: Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

Input Types: Radio Buttons

Input Types: Checkboxes

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

Input Types: Checkboxes

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.

The Action Attribute and the Submit Button

Another Radio Button Example

Another Radio Button Example

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.

Drop-down Boxes

Drop-down Boxes

Drop-down Boxes

Drop-down Box witha Pre-selected Value

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.

Text-Area

Text-Area

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

Creating a Button

Fieldset Around Data

This next example demonstrates how to draw a border with a caption around

your data.

Fieldset Around Data

Fieldset Around Data

Forms with Input Field and Submit Button

Forms with Input Field and Submit Button

Forms with Checkboxes

Forms with Checkboxes

Forms with Radio boxes

Forms with Radio boxes

Send an E-mail from a Form

Send an E-mail from a Form