Lesson 3: HTML Form

One of the best thing about HTML is its simplicity and plain text format so it is viewable on any system. Not all files are viewable in all systems. Try to open a newest Microsoft Office doc on an old machine you are not likely able to. HTML isn't the only plain text language that describes a document. Some of these are quite difficult to work with. For example, see the Rich Text Format for Microsof Word, or see the math formatter Latex.

We haven't finish covering some common tags. Let's talk about the <title>, <p>, <pre>, <sup>,<sub> tag, and literals such as a hard space &nbsp;. See, the & has special meaning. You can do the © logo, or even Greek letter such as π. See here for a reference.

Now, we can continue with our <form>, the single most important addition of HTML I think. Without it all you see are formatted text with links.

I am tired of the javascript:alert(); so does the internet community. It is now to be used only occasionally for testing purpose only.

Enter the <div> tag, which simply denotes a block (a division) on your webpage you can give it a name and interact with it.

Last Name:
First name:

Now we are doing event-driven programming as opposed to traditional top-down approach like a recipe.

Next I am going to show you the function, which is like the most important concept of programming (and mathematics).

Let's rewrite the onclick above to use a function. Some programming language distinguish between procedure (subroutine) and function, and javascript just use the function.

Let's change that form above and create our own addition calculator.

Enter a:
Enter b:

Besides text box we can do radio buttons, checkboxes and more. Another form:

So are you:
Male
Female
What type of vehicle do you have (if any)?
I have a bike
I have a car

Choose your favorite flavor
Vanilla Strawberry Chocolate Orange

You can type a lot of things in this box (even drag the lower-right corner):

You will need a form action to use the submit button (and processing form is out of our scope, sorry), but we can look at method=GET