skip to main | skip to sidebar

All Tutorials

Labels

3D Studio Max Tutorial (5)
Adobe Illustrator Tutorial (5)
Bryce Tutorial (7)
Cinema 4D Tutorial (20)
Corel Draw Tutorial (5)
Excel Tutorial (38)
Hardware (1)
HTML Tutorial (10)
Java Tutorial (2)
Operating System Installation Tutorial (13)
Outlook Configuration Tutoria (3)
PhotoShop Tutorial (11)
Virtual SCSI Controller Driver Tutorial (6)
w (1)
Windows tips and secrets (57)

Followers

About Me

Hassan Ahmad

View my complete profile

HTML Forms part 1

Posted in Labels: HTML Tutorial | at 03:19

Note: HTML forms are not useful without a client-side scripting language or server-side technology.
The note above should be enough to prompt you in learning a programming language... but let us get down to the business at hand.
The main use of HTML forms is to gather some kind of input/feedback from visitors. This input might be in the form of comments or a shopping cart system wherein your users select items and drop them in shopping baskets. Form objects (which we shall soon meet) have also been used for various tricks by client-side programmers.
A form begins with <FORM> and ends with </FORM>. HTML presents us with various form object/elements that are placed INSIDE the form tags.

<INPUT TYPE="TEXT">
<INPUT TYPE="PASSWORD">
<INPUT TYPE="RADIO">
<INPUT TYPE="CHECKBOX">
<INPUT TYPE="BUTTON">
<INPUT TYPE="RESET">
<INPUT TYPE="SUBMIT">
<INPUT TYPE="HIDDEN">
<INPUT TYPE="IMAGE">
<INPUT TYPE="FILE">
<SELECT>...</SELECT>
<TEXTAREA>...</TEXTAREA>
<BUTTON>...<BUTTON>
<OPTION>...</OPTION>

The first ten listed above are all variants of the <INPUT> element. However, since their TYPE is different, the other attributes taken by them differ.
We shall explore these along with their attributes, one by one.

The HTML form <INPUT TYPE="TEXT">

This form object is the most common. It defines a horizontal text field as:

The attributes associated with this tag are:

NAME: Sets a name for this form element. You can give any name to your text field as long as you don't duplicate it in the same form.
SIZE: Determines the size. The value taken is a number.
MAXLENGTH: Specifies the number of characters a user can submit thru this element.
VALUE: Specifies a default value that is displayed inside the text field when a user first opens the page.

Type your first name in the box: 
<INPUT TYPE="TEXT" SIZE="15" MAXLENGTH="20" 
NAME="first_name" VALUE="Your first name">

is displayed as:
Type your first name in the box:

The HTML form <INPUT TYPE="PASSWORD">

This object is very similar to the TEXT mentioned above and takes the same attributes. Its inclusion also causes the display of a text field. However, anything typed by the user inside this text field is replaced by *s or other characters that mask what you type. Try this out yourself.

Type your password in the box:
<INPUT TYPE="PASSWORD" SIZE="15" MAXLENGTH="20" 
NAME="yourpassword" VALUE="">

Type your password in the box:

Attributes:

NAME: Sets a name for the password field by which it is referred using scripting languages.
MAXLENGTH: Sets the maximum number of characters a user can input.
SIZE: Takes a number as value and specifies the size.
VALUE: Specifies a default value.

<INPUT TYPE="CHECKBOX">

Creates a checkbox. Its other attributes are:

CHECKED: This attribute takes no value. Including it in the tag causes the checkbox to be checked by default.
NAME: Specifies a name for the element.
VALUE: Assigns a value to the element.

<INPUT TYPE="CHECKBOX" NAME="your_answer"
VALUE="yes" CHECKED> Do you like this site?

Do you like this site?

<INPUT TYPE="RADIO">

Makes a radio button. The attributes taken are similar to those of a checkbox (above).

CHECKED: Puts the radio button to "ON" state. Takes no value.
NAME: Assigns a name to the radio button.
VALUE: Specifies a value that can be passed to the server.

<INPUT TYPE="RADIO" VALUE="yes" NAME="html" 
CHECKED> Do you like HTML?

Do you like HTML?

Important: What is the difference between a radio button and a checkbox?

These two elements are not the same though they share the same attributes.
Radio buttons are employed when a single reply is desired from a list of choices. In such cases, radio buttons with the same name but different values are grouped together. Since the buttons have the same name, the user is able to select only one. The value of the selected button along with its name is sent to the server.
Checkboxes on the other hand, can be used in two ways. One to get a 'yes'/'no' kind of response and the other to get a multiple selection.
We'll see this through examples.

Do you like Mozart's Symphony No.40?<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="yes" CHECKED> Yes<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="No"> No<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="notsure"> Can't Say<BR>

Do you like Mozart's Symphony No.40?
Yes
No
Can't Say
Try to select two radio buttons... you can't... that is because they have the same name. Thus, the code above presents a list of choices and expects only one selection.
Notice that the CHECKED attribute selects the first radio button when the page is first loaded. Depending on the selection, the associated value is sent to the server along with the radio button name. So, if the visitor selects Can't Say, the associated value notsure is sent along with button name, moz.

An example for checkboxes can be...

Which ice-cream flavors do you like?<BR>

<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="chocolate" CHECKED>
Chocolate<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="vanilla">
Vanilla<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="strawberry">
Strawberry<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="mint">
Mint<BR>

Which ice-cream flavors do you like?
Chocolate
Vanilla
Strawberry
Mint
Notice that in this case too, all checkboxes have the same name. However, you can select multiple boxes (try it out...). This is helpful when we desire zero or more values. Values of all checkboxes that are selected are sent to the server along with checkbox name for further processing by a CGI script.
Another use of checkboxes is to get a 'yes'/'no' kind of response as in:

<INPUT TYPE="CHECKBOX" VALUE="yes" NAME="mlist">
Would you like to subscribe to our mailing list?

Would you like to subscribe to our mailing list? Although, radio buttons can be employed for the same purpose, I prefer to use checkboxes since they display a better icon.

So, radio buttons or checkboxes are used depending on the type of question you have. A generalization would be to employ radio buttons for questions where only one reply is desired and checkboxes for questions where multiple replies are possible.