Form Elements - Part 1

A form is made up of many individual elements, including areas in which to key text and buttons to trigger the form submission. In this post we will examine basic text boxes, radio buttons, and check boxes.

The text box form element is a box into which a user can key text. Text boxes are good for accepting data when a user must enter a value such as a name or address. To create a text box, as well as many of the other form elements, you will use the <input> tag. For a textbox, you will need to supply values for the type and name attributes. The type attribute should be set to text and the value supplied for the name attribute should be descriptive, without spaces.

<input type=”text” name=”lastName”>

Radio buttons are a form element that allows a user to choose an option from a series of choices. The user’s choice is mutually exclusive, meaning that only one item may be selected from the choices presented. As with text boxes, radio buttons are created with the <input> tag. The value of the type attribute is set to radio. The value of the value attribute, should match the option available to select (Nov, Dec, etc). Finally, the name attribute is EXTREMELY important. The value of the name attribute should be descriptive with no spaces. All selections that belong to the same group MUST have the same name.

<input type=”radio” name=”birthMonth” value=”dec”>

Check boxes are similar to radio buttons in that they provide a set of predefined choicesrom which the user may select. Unlike a radio button, with check boxes the user may select more than one option.  The type attribute is set to checkbox and the value attribute should match the option available to select. As with radio buttons, all check boxes that belong to the same group MUST have the same name attribute.

<input type=”checkbox” name=”musicGenre” value=”punk”>

The w3.org’s explanation of forms.

A quick, concise tutorial on forms.

Today’s Objectives:

• Identify the different kinds of text boxes
• Explain the uses of radio buttons and checkboxes
• Place text boxes, radio buttons, and checkboxes in a Web page.

Classwork: Lesson 6-1 and vocabulary.

Prep Questions:

• The <form> tag has several attributes, among them the method attribute. Explain the options that the get and post values provide for the method attribute.
• Can more than one form be placed on a Web page? Can a <form> tag be nested inside another form tag?

Chapter 3 Quiz & Unit Review

Today we took the chapter three quiz. Following the quiz, we reviewed the objectives from unit one (chapters one through three).

Objectives:

• Demonstrate mastery of chapter three objectives
• Review Unit one objectives

Homework: Study for unit 1 exam, Monday the February 2.

Forms - Form Tag & Attributes

Forms are used to collect information over the Internet from a user. Forms are essential for communication between the user and the Webmaster. They can be utilized for many purposes. Some forms may be used for logging-in to a website while others may be significantly more complex allowing the user to shop or send Web mail.

In the following posts, we will look at the common form elements, their purpose, how to organize forms, and provide an opportunity to practice building simple, as well as more complex forms.

Let’s start with the first tag necessary to create a form, the form tag (<form></form>). All elements of a form must be placed in-between the opening and closing form tag. If a form element is not between these tags, it will not function as a part of the form.  Although a Web page may have more than one form tag on it, it is not recommended. Even though multiple forms may exist on a page, they must not be nested (one inside the other).

The form tag has three attributes that are important to understand. The first being the name or id, the second the  method attribute, and finally the action attribute.

The name or id attribute is used to identify one form from another. The value used should be descriptive of the forum and its purpose. It should NOT contain a space or reserved characters.

The second attribute that is rather important is the method attribute. The method attribute specifies the manner in which the form data is sent. There are two possible values the the method attribute can use: get and post. Get appends the form data to the URL of the page to which the data is sent. This is a severe privacy issue if telephone numbers, social security numbers, or other sensitive data is part of the form.

Post on the other hand, does not append the form information to the URL. Data is sent behind the scenes along with a request for the new Web page. Since the data is not visible in the URL, post is more secure than with the previously mentioned get method. In addition, post allow a larger amount of text to be sent to the corresponding action page than the get method.

The final attribute of significance, is the action attribute. This attribute specifies the action that will take place when the submit button is pressed. A form may accept user data, it cannot work alone. It needs a another file that will accept the data and process it in some way. The easiest way to process the data from a form is by giving an email address as the data’s destination (mailto:farmer@dairy.com). While this is easy, it is not practical for large amounts of data. Not to mention, their is no way to rapidly sort the data. This requires a database. The more practical solution is to select a Web page that is a .php or .asp script file.These programming languages can process the form data and properly insert it in a database.

The w3.org’s explanation of forms.

A quick, concise tutorial on forms.

Today’s Objectives:

• Understand what a form can be used for
• List and explain the purpose of the name, method, & action attributes (for the form tag)
• Place a form into a Web page

Classwork: Lesson 6-1 and vocabulary.

Prep Questions:

• A tool that accepts user data from a Web page.
• A text box designed to gather short bits of information.

Business Organization - Current Issues

Topics brought up include:

• Starbucks
  • Are store owners compensated when stores are closed?
  • If profits are down 69%, how is this measured?
• Citibank
• Wells Fargo and Wachovia
  • Will Wachovia cost Wells Fargo too much to keep?
• Yahoo
• British Airways and Iberia
  • What was the benefit that brought the companies together?
  • What has caused British Airways to fall from the lead position in the merger?

Objectives:

• Discuss current issues in regards to business organization

Homework: Study for the chapter 3 quiz, Friday the 30th. Unit 1 exam, Monday the February 2.

Other Business Structures

Examples of nonprofit institutions include organizations such as schools, churches, hospitals, welfare groups, and adoption agencies. Most of these organizations are legally incorporated to take advantage of unlimited life and limited liability. They are similar to profit-seeking businesses, but do not issue stock, pay dividends, or pay income taxes.

Their activities often produce revenues in excess of expenses, but they use the surplus to further the work of their institutions, not to pay dividends to shareholders. Their efforts are difficult to analyze economically, however, because the value of their products is not easy to measure. Even so, they are an important part of our economic system.

Examples of nonprofit organizations:

• cooperatives
• labor, professional, and business organizations
• government

Objectives:

• Describe nonprofit organizations
• Explain the direct and indirect role of government in our economy

Wikipedia’s definition of a nonprofit organization.

Here are the IRS rule regarding a nonprofit organization.

Homework: Find an article and write a summary - business organization (sole-proprietorship, partnership, corporation) problems (lawsuit, takeover, stock issues, etc.) due Wednesday the 28th due Thursday the 29th. Chapter 3 quiz, Friday the 30th. Unit 1 exam, Monday the February 2.

Note: A question was asked regarding the difference between a nonprofit organization and a not-for-profit organization, here is an answer.

Interactivity - Quiz

In wrapping-up our look at basic interactive components. Here are a few reminders:

• Organize your site. This begins with your navigation. Decide what qualifies as top-navigation and what will be sub-navigation.
• While simple hyperlinks work, spruce up your navigation with rollovers (make sure to preload the images).
• If you use audio, really try to use a compressed format (i.e. .mp3). Please don’t use MIDI sounds!
• Consider using Flash buttons or animations to add to your page (while 99% of browsers have the Flash player, think about your audience).
• If you will be using an item multiple times, consider turning it into a Library item.

Today’s Objectives:

• Insert a multimedia object into a Web page
• Construct a rollover navigation bar
• Demonstrate mastery of lesson 5 objectives

Classwork: Create a Web page with a rollover navigation bar and an embedded MIDI file that plays automatically on load. Take the lesson 5 quiz.

Prep Questions:

• See quiz.

Note: Well done on the quiz average score was 16/20 or 80%!

Interactivity - Flash Buttons

Adobe’s Flash is a powerful multimedia application that uses vector graphics to create highly compressed multimedia for the Web. Flash files can be placed into a Web page. They can consist of animated text, animated characters, sound interactive buttons, and much more. At this stage in the game, your imagination is the only limit. The extension for a Flash file is .swf, which stands for Shockwave/Flash. Because Adobe owns Dreamweaver and Flash, they integrate very well with each other. This helps make the creation of interactive Websites much easier.

Since Dreamweaver 4, users have had the ability to create Flash buttons and Flash text. Today, we’ll look at the benefits of using Flash buttons. When a traditional rollover effect is created, the author must construct individual images of each state (up, over, down, etc.). This can get rather tedious. In comparison, when creating a Flash button, pre-made buttons are shown with the option to download additional styles. This speeds up the process significantly. All the author needs to do is select a style, type the button text, select the font, where the button object is to be saved, the link URL, and background color. Voila! Instant Flash animated button. This usually takes less than a minute.

If you do add a Flash button to your Web page, keep in mind that user must have a Flash plug-in in order to view it. Most browsers include the Flash plug-in and it is safe to assume, in most cases, that people have the Flash plug-in. However, if they have an older plug-in they may be prompted to update and this can be annoying. Think of your audience (as always) before using Flash buttons.

Today’s Objectives:

• Create a Flash button
• Insert and format Flash files
• Create simple Flash objects in Dreamweaver

Classwork: Construct a navigation bar with rollover effects and embed a sound file (Lesson 5 - Assignment 2).

Prep Questions:

• Name the extension for a library item.
• T/F You should preload the images for a rollover.
• Define interactive.

Here are some links to help you with creating Flash buttons in Dreamweaver:

• Web Templates Zone
• Prime Graphix
• Adobe Flash Player Stats

Note: Lesson 5 quiz is tomorrow, Wednesday the 28th.

Growing a Business

There are generally two methods a business can use to grow.  The first is reinvesting its profits. The second method, is to expand though a merger. Both methods have benefits as well as drawbacks.

When a business seeks to grow through reinvestment, they are using their revenue from sales to invest in capital  or labor (factory machinery, new technologies, more workers, etc.).  After subtracting expenses from sales, the business is left with net income. It is this figure that determines the ability of a business to reinvest in labor  or capital. This reinvestment allows the business to produce additional products and increases their sales (hopefully their net income). The major drawback to this method is the slower realization of growth. A company must rely on its profits and may not be able to raise enough money to invest as rapidly as desired.

When a firm grows through a merger, it may do so for a number of reasons. It may seek to grow faster, become more efficient, acquire or deliver a better product, eliminate a rival, or improve it’s image. Several drawbacks to this strategy exist, including too rapid of growth (unsustainable), loss of identity, and increased government regulation/interference.

Objectives:

• Explain how businesses can reinvest their profits to grow and expand
• Recognize the reasons that cause firms to merge
• Identify two different types of mergers

Here is a resource that takes an in-depth look at mergers.

Homework: Find an article and write a summary - business organization (sole-proprietorship, partnership, corporation) problems (lawsuit, takeover, stock issues, etc.) due Wednesday the 28th due Thursday the 29th. Chapter 3 quiz, Friday the 30th. Unit 1 exam, Monday the February 2.

Corporations

A corporation is a kind of business organization made up of a number of people who, according to law can act as a single person. Corporations account for approximately one-fifth of the firms in the United States and about 90% of all sales. A corporation is a form of business organization recognized by law as a separate legal entity having all the rights of an individual. This status gives the corporation the right to buy and sell property, enter into legal contracts, and to sue and be sued.

Some of the advantages of corporations include:

• ease of raising capital
• owners have limited liability
• business’s life is unlimited

Some of the advantages of corporations include:

• charter is expensive
• corporate income is taxed twice
• subject to government regulation.

Objectives:

• Describe the characteristics of a corporation
• Explain some of the advantages and disadvantages of a corporation

Here is a link to a resource that explains how to form a corporation, advantages, and disadvantages.

Homework: Find an article and write a summary - business organization (sole-proprietorship, partnership, corporation) problems (lawsuit, takeover, stock issues, etc.) due Wednesday the 28th.

Interactivity - Navigation

Frustrated users are not a recipe for success. One of the more overlooked aspects of Web site design is site navigation. Either poorly labeled categories or icons that are not readily identifiable often lead to user confusion. Just as important is the clear presentation of areas or categories of the Web site. Too often categories are not well thought out, overlap, or are repetitive. This can result in long lists of links and user frustration.

To aid in accomplishing clear navigation, here are some tips:

• Before beginning coding, draw an navigational hierarchy for the Web site. How do the pages link? To what category will they belong?
• Too create strong categories, look at the purpose of your Web site, ask friends/potential users to explain what they are looking for. Use this to construct your categories.
• Keep the number of categories to a minimum. Remember quality is more important than quantity. These will be your top-navigation and will appear on every page.
• Clearly name your categories.
• Look at your categories and break them into sub-categories. These will be your sub-navigation. These links will only appear on pages belonging to their top-navigation.
• Keep placement of navigation consistent (up high but below the banner).
• Add a Home link.

Today’s Objectives:

• Differentiate between top-navigation and sub-navigation
• Create a Flash button

Classwork: Construct pages to link with navigation and build a Flash button (Lesson 5 - Assignment 1).

Prep Questions:

• Define rollover.
• Explain top and sub-navigation.
• Can one generally assume that the Flash player plug-in is installed on most browsers?

Here are some links to help you with creating effective navigation:

• Design Effective Navigation in 10 Steps: http://www.sitepoint.com/article/navigation-10-steps/
• Navigation and Symbolism: http://www.wpdfd.com/issues/24/navigation/
• 25 Examples of Creative Navigation: http://vandelaydesign.com/blog/galleries/creative-navigation/
  

Note: Lesson 5 quiz is Wednesday the 28th.

Next Page »