All the HTML commands that we've covered so far don't give us a chance to communicate with visitors that will be visiting our HTML pages. Well, it's time to talk about forms. Using forms you can take different information from a visitor and send it to your server or your computer using special protocols:

<FORM>...</FORM>

This form command has several attributes. Between opening and closing form tags you can write HTML text and put form elements:

ACTION="link" - specifies a link or e-mail address where form information will be sent. If you don't know any server side programming languages, like ASP, PHP, Perl etc., use your e-mail address to receive the data that your visitors enter to your forms, like this: ACTION="mailto:your_email_address".

METHOD="protocol" - specifies the information protocol. The most used protocols are GET and POST.

ENCTYPE="encoding type" - specifies an information encoding type.

The most used form elements are: INPUT, TEXTAREA and SELECT. Every form element has NAME and VALUE attributes:

NAME="name" - specifies the name of the form element. Remember this is a form that will be sent to your server or to you through the e-mail. For example, when the e-mail arrives, it will say:

name=(whatever your visitor writes or other value)

You can replace "name" with whatever you want. It will arrive to you with that name.

VALUE="value" - specifies the value of the form element. This attribute is not always used with form elements.

Well, let's look at form elements:

<INPUT>

There are several INPUT types specified with the TYPE="type" attribute:

TYPE="TEXT" - this is the text box that allows your visitor to write one line of text. 

Command:

<INPUT TYPE="TEXT" NAME="name" VALUE="Name" SIZE=20 MAXLENGTH=50>

Result:

Enter your name:

TYPE="PASSWORD" - this is the password box similar to text input box but in this case the entered information is not visible - it is changed with "*" symbols in most cases.

Command:
  

<INPUT TYPE="PASSWORD" NAME="Passwd" SIZE=10 MAXLENGTH=20>

Result: 

Enter your password:

Additional attributes for TEXT and PASSWORD type elements:

SIZE="digit" - denotes how many characters long a box will be.

MAXLENGTH="digit" - specifies the maximal character quantity in the box. It can be greater than SIZE.

TYPE="RADIO" - this form element places a circle on the page and it is called the radio button. When you use radio buttons, only one can be checked.

Command:

You are:<BR>
<INPUT TYPE="RADIO" NAME="Select" VALUE="1">Student;
<INPUT TYPE="RADIO" NAME="Select" CHECKED VALUE="2">Pupil;
<INPUT TYPE="RADIO" NAME="Select" VALUE="3">I don't study.

Result:

You are:
Student;
Pupil;
I don't study.

TYPE="CHECKBOX" - this form element places a square on the page and it is called the checkbox. You can check as many checkboxes as you want. This is the major difference between radio buttons and checkboxes.

Command:
  

Why do you use this HTML tutorial?<BR>
<INPUT TYPE="CHECKBOX" NAME="ans1" VALUE="1">To get acquainted with HTML;
<INPUT TYPE="CHECKBOX" NAME="ans2" VALUE="1">To study HTML;

Result:  

Why do you use this HTML tutorial?<BR>
To get acquainted with HTML;
To study HTML;

Additional attributes for RADIO and CHECKBOX type elements:

CHECKED - denotes if radio or checkbox element is checked or not.

TYPE="HIDDEN" - this form element is not visible on the page but its value is sent to a server or e-mailed to you. It is used to send a special information or to keep the information sent to secondary forms.

TYPE="RESET" - this form element places a button on your page that resets all form element values to their initial values when clicked.

TYPE="SUBMIT" - this form element places a button on your page. When clicked the button sends all form information to your server or your e-mail address, it enacts the ACTION specified in the original FORM command.

Well, let's move on to the next form element - the text area box. This is a large box that allows your visitor to enter as many words as he/she wants:

Command:
  

<TEXTAREA NAME="name" ROWS=5 COLS=30>text</TEXTAREA>

Result:  

text

Attributes used with TEXTAREA element:

ROWS="digit" - specifies how many rows of text will be in your text area box.

COLS="digit" - specifies how many characters will be in each row. Specifying ROWS and COLS values you can make your text area box bigger or smaller.

TEXTAREA command has its closing tag - </TEXTAREA>. Text between opening and closing tags is used as initial text in the text area box.

The next form element is so called pop-up box. It allows your reader to choose out one or more items from a the list of options. The items are entered using OPTION command. The pop-up box HTML command is <SELECT>... ...</SELECT>. OPTION tags are put between opening and closing SELECT tags.

Command:
  

Choose several fruits:
<SELECT MULTIPLE NAME="list" SIZE="5">
<OPTION VALUE="1">Apple
<OPTION VALUE="2">Pear
<OPTION VALUE="3">Cherry
<OPTION VALUE="4" SELECTED>Plum
<OPTION VALUE="5">Banana
<OPTION VALUE="6">Kiwi
<OPTION VALUE="7">Orange
<OPTION VALUE="8">Mandarin </SELECT>

Result:  

Choose several fruits:
Apple Pear Cherry Plum Banana Kiwi Orange Mandarin

SELECT command attributes:

MULTIPLE - allows your visitor to select multiple items at once.

SIZE="digit" - denotes the size of the pop-up box.

The pop-up box item names go right after the <OPTION> tag. OPTION tag may have several attributes:

DISABLED - used if we don't want to allow our visitor to choose that option.

SELECTED - specifies a default option.

VALUE - denotes an option value that will be sent to your server or e-mailed to you if this option will be selected.

Another example:

Command:
  

Choose a fruit:
<SELECT NAME="list" SIZE="1">
<OPTION VALUE="1">Apple
<OPTION VALUE="2">Pear
<OPTION VALUE="3">Cherry
<OPTION VALUE="4" SELECTED>Plum
<OPTION VALUE="5">Banana
<OPTION VALUE="6">Kiwi
<OPTION VALUE="7">Orange
<OPTION VALUE="8">Mandarin </SELECT>

Result:  

Choose a fruit:
Apple Pear Cherry Plum Banana Kiwi Orange Mandarin

Well, that's a beginning on forms. There are lots of things you can do with forms when you know other web programming languages.

And congratulations! With this we finish our HTML basics tutorial. Now that you have HTML programming basics, you can make your own HTML pages and start learning new web programming languages, like JavaScript, Perl, PHP and so on.

After you make your first HTML documents, you'll probably want to publish them online, so all your friends could visit your website. Well, we recommend you to visit our ftp tutorial where you will find out how to do that.