Jayden 12

My Pages

Site Map

Welcome to my form tutorial. I made this for documentation for myself at work of all the options I have with forms. New techniques are coming up all the time and surely I have left something out, but this should cover most of what's available. Note that none of these forms actually do anything except reload this page.
There are eight basic types of input in standard HTML forms. Here are samples of each.
Form 1
1. Text Area
For large amount of user provided text, when user will want to review more than a few words at at time. Cariage returns are allowed.
2. Text Box
For small amount of user provided text. Cariage returns are not possible.
3. Password
Same as a text box but the input is hidden.
4. Select Choose one from a drop down menu.
Choose none, any or all from a menu (use CTRL click to select multiple).
5. Radio A B C
Alternative to option 3: choose one.
6. Checkbox   1 2 3
Alternative to option 4: choose none, any or all.
7. Buttons
No default function, use for custom actions.

Click when done.

Revert back to default values.

Used for attaching files from your hard drive.

If you want to use an image as a button.
8. Hidden
This input is hidden and is not technically input.
We can customize these inputs by adding maximum entry lengths and defaulting values.
Form 2
1. Text Area
2. Text Box
3. Select
4. Radio D E F
5. Checkbox   4 5 6
6. Button
Apply form validation (checking) and require fields to be entered. (This section not completed yet...)
Form 3
1. Text Area
2. Text Box

3. Radio G H I J
4. Checkbox   7 8 9
5. Button
Finally, we can add dynamic reactions to user input/activities using very simple DHTML and Javascript. Note the underlined letters, press ALT and that letter...
Form 4
1. Text Area
2. Text Box

3. Select
4. Radio K L M  
5. Checkbox   10 11 12
6. Button or click here to submit (note both of these will disappear on submission to avoid double clicking)

Use javascript to pass the results of your form from page to page.
Form 5
Favorite Color
Favorite Movie
Any pets?