Handling HTML Forms - Part I




if-then-else

In our daily life we frequently come across conditional work. For example, suppose you make a guard stand at the entrance of some hall and tell him to ask every trespasser his name. "If the name is 'Ali', let him enter; else deny entrance." Re-read the last sentence. It is one of the best examples of conditional constructs.

In programming, too, we come across conditional code. For example, you ask the visitor to your site his name. If the name is 'Ali', let him visit; else deny entrance. Although not a working code, following snippet will make the syntax clear. Remember, the equality in JavaScript is checked with "==" rather than a single equal sign.

if (name == "Ali")
  {
  // do something
  }
else
  {
  // do something else
  }

Note a few things: the conditional construct starts with an if keyword. Then comes the condition part enclosed between brackets. Here we are checking for equality. That is why, the equal sign == has been used. We can check for a lot of other things in an if condition. You will see that part later. Next, there is some code enclosed between curly brackets. This code will be executed if the condition name == "Ali" is satisfied. Otherwise, the code following the keyword else will be executed. I think that's enough for now. We will see a working code example, but first let's review some HTML from tags.


HTML Forms - A Review

If you have visited a site or two, you might have the experience of filling in a form on the Web. It may be a login userid and password or some registration form. These types of forms can be created with plain HTML. Here, I will provide a brief review of HTML tags related to form creation. If you have no previous experience of creating forms, please visit some HTML tutorial site. I will recommend http://www.htmlgoodies.com.

First of all, a form is enclosed between <form> and </form>. Inside we can declare various form elements, like text boxes; selection drop down list; clickable buttons; and check boxes; etc. Following is an example of a simple form that accepts the visitors name and email.

<html>
<head>
</head>
<body>
<form name="myForm">
  Name   <input type="text" name="userName" size="30">
  <br>
  Email   <input type="text" name="userEmail" size="30">
  <br><br>
  <input type="button" value="Click here!">
</form>
</body>
</html>


Some Explanation

HTML is so simple that most of the things are self explanatory. I will only give you a brief explanation here. The text boxes are created by a type = "text" attribute, while clickable button by type = "button" attribute. In addition to this, we also give a name to almost every form element. In the last example, the names given to the two text boxes are userName and userEmail respectively. You can choose any name you like. We have already seen that an onClick event occurs when somebody clicks a button. We will make use of one other event onSubmit in our discussion. Let's now combine HTML forms with if conditions to do form processing. But first, you need to know how to pass values to functions.


The copyright of the article Handling HTML Forms - Part I in JavaScript is owned by Muhammad Ali Shah. Permission to republish Handling HTML Forms - Part I in print or online must be granted by the author in writing.

Go To Page: 1 2

Articles in this Topic    Discussions in this Topic