• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

HTML forms are used to collect user input. The <form> element defines an HTML form . When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server. However, there are exceptions.

Javascript is sometimes used to create magic with form fields. An example could be when turning options in a drop-down menu into normal links.
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.

The <form> tag tells the browser where the form starts and ends. You can add all kinds of HTML tags between the <form> and </form> tags. 

<form>
<!-- Here goes form fields and HTML -->
</form>


To let the browser know where to send the content we add these properties to the <form> tag:

• action=address The action attribute defines the action to be performed when the form is submitted.
  The common way to submit a form to a server, is by using a submit button.
  Normally, the form is submitted to a web page on a web server.
  If the action attribute is omitted, the action is set to the current page.



• method=post or method=get

The address is the url of the php/cgi script the content should be sent to. The post and get methods are simply two different methods for submitting data to the script.

TEXT FIELD
Text fields are one line areas that allow the user to input text.

If you want several lines you should use a text area instead. Syntax:<input type="text" size=""
  maxlength=""
  name=""
  value=""
  align=""
>
  The size option defines the width of the field. That is how many visible characters it can contain.

The maxlength option defines the maximum length of the field. That is how many characters can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible in the field at one time.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will appear in the box as the default value.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

PASSWORD FIELDS
Password fields are similar to text fields.

The difference is that what is entered into a password field shows up as dots on the screen. This is, of course, to prevent others from reading the password on the screen.

 Syntax:
<input type="password" size=""
  maxlength=""
  name=""
  value=""
  align=""
 >
The size option defines the width of the field. That is how many visible characters it can contain.

The maxlength option defines the maximum length of the field. That is how many characters can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible in the field at one time.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will appear in the box as the default value.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

HIDDEN FIELDS
Hidden fields are similar to text fields, with one very important difference!

The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:

 Syntax:
<input type="hidden"
  name=""
  value=""
 >


The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will appear in the box as the default value.

.TEXT AREA
Text areas are text fields that can span several lines.

Unlike most other form fields, text areas are not defined with an <input> tag.

Instead you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want the area to end.

Everything written between these tags will be presented in the text area box.. Syntax:
< textarea
rows=
cols=
name=
tabindex=

wrap=
off
virtual

physical"
 > content goes here</textarea>
The cols and rows settings are straightforward and simple. They specify how many columns and rows you want in your text area.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.
CHECK BOX

 Check boxes are used when you want to let the visitor select one or more options from a set of alternatives. If only one option is to be selected at a time you should use radio buttons instead.
 Syntax:
<input type="checkbox"
 name=
  value=
  align=
  tabindex=
checked
 >
The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.


RADIO BUTTON

Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives.
  Syntax:
<input type="radio"
 name=
  value=
  align=
  tabindex=
checked
 >
The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.



DROPDOWN MENU

Drop-down menus are probably the most flexible objects you can add to your forms.

Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed).

The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space.
But that is also a disadvantage, because people can't see all options in the menu right away.

There is a workaround for this - with the size setting, you can customize the menu so it shows more than just one option at a time, but when you do that - you also lose the advantage of taking up less space.
  Syntax:
<select
 name=
  size=
  multiple=
>
  <option
selected
  value=
></option>
</select>

The <select> tag defines the menu.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The size option defines how many items should be visible at a time. Default is one item.

The multiple setting will allow for multiple selections if present.



The <option> tag defines the single items in the menu.

The value setting defines what will be submitted if the item is selected. This is not always the same as what it says in the menu. If our field was defined this way:

<option value="ID">Idaho</option>

then, in the menu it would say "Idaho" but when the form was submitted the abbreviated "ID" would actually be sent.

You can force an item to be default selected by adding the selected option: <option selected>


SUBMIT BUTTON

When a visitor clicks a submit button, the form is sent to the address specified in the action setting of the <form> tag.

Since visitors aren't always perfectionists you might consider adding a javascript validation of the content before it is actually sent.
  Syntax:
<input type="submit"
name=
  value=
  align=
  tabindex=
 >
The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.



RESET BUTTON

When a visitor clicks a reset button, the entries are reset to the default values.
.
  Syntax:
<input type="reset"
name=
  value=
  align=
  tabindex=
 >
The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.


IMAGE BUTTON

Image buttons have the same effect as submit buttons. When a visitor clicks an image button the form is sent to the address specified in the action setting of the <form> tag.

Since visitors aren't always perfectionists you might consider adding a javascript validation of the content before it is actually sent.  Syntax:
<input type="image"
name=
  src=
  align=
  border=
  width=
  height=
  vspace=
  hspace=
  tabindex=
 >
The name setting adds an internal name to the image button so the program that handles the form doesn't confuse it with the other fields.

The src setting defines the URL of the image.

The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.

The border setting defines the width (in pixels) of the border around the image.

The width setting defines the width of the image.

The height setting defines the height of the image.

The vspace setting defines the spacing over and under the image (in pixels).

The hspace setting defines the spacing to the left and right of the image (in pixels).

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.