HTML Forms

HTML Forms and How to Make Them.

For testing and better understanding:
-Copy this form.
-Paste into a text document.
-Save the file as test.html
-Open text.html in your browser.
-Fill in the form and click the Submit Button.
-Look at the Query String in your browser's Address field.
---The values from our form are on the query string and could be used in a javascript if we were so inclined.


<form action=test.html method=get>

<input type=text name=a>
<input type=checkbox name=b>
<input type=radio name=c>

<select name=d>
<option value=happy>HappY Times
<option value=bored>Tired times
</select>

<textarea name=e></textarea>

<input type=hidden name=f value="Chris Happy">
<input type=password name=g>

<input type=button value="Push Me">
<input type=submit value="Submit Me">
</form>

NOTE: The names of our fields (a,b,c,d,e,f,g) can be anything we want them to be.

FORM TAG
-Our first line is our opening form tag. It contains two pieces of information. The action and the method
---The action is basically the URL we want this form to submit to. Many times it is to a CGI script. In our example we will submit to the same page we are on.
---The method can be GET or POST. POST would most often be used when the form is to be submitted to a Perl or PHP script. GET can be useful for HTML pages that will contain Javascript. Since we don't have a Perl script here, we will use GET. GET puts the form values on the query string.

TEXT FIELD
-Our first input is a text field. Users can type text in it. We can define it further with 2 properties.
---<input type=text name=a size=15 maxlength=25>
---NOTE: maxlength can be beaten, don't depend on it for security.
---We could also make our field "read only" like so: <input type=text name=a readonly> Again, this can be beaten by the user so don't depend on it for security.

CHECKBOX
-Our second input is a checkbox. If selected, it will have the value of "on".

RADIO BUTTON
-Our third input is a radio button. If selected, it will have the value of "on".

SELECT MENU
-Our fourth is a select menu. We named our menu in the select tag.
---Each option gets its own value.
---Can be defined further with size property. <select name=d size=5>

TEXTAREA
-Our fifth is a textarea. We can define it further with 2 properties.
---<textarea name=e cols=20 rows=5>

HIDDEN
-Our sixth is a hidden field.
---This is only for neatness. It is NOT secure since users can view this by looking at the source code.

PASSWORD
-Our seventh is a password field. Dots or asterisks will be placed when the user types in this field. This will prevent over-the-shoulder snooping, but it is not secure. (If you tested at the beginning, you might have noticed that the password was passed unhidden on the query string.)

BUTTONS
-Our last two elements are buttons.
---The first is just a button. It can be used with onClick Javascript to make things happen.
---The second is a submit button, which as its name states, will submit the form.


Resources:
Javascript Query String
Javascript Tutorials
HTML Tags
Perl Tutorials
HTML Tutorials
onClick Javascript
HTML Codes

Previous Article: HTML Subscript Text

Next Article: HTML Title Tag