HTML form input examples
When you are creating an HTML form, there are several different options for input elements
to use. If you can efficiently use the non-textbox components as much as possible, you
will make your form easier on your users. To start your HTML form, just enter the
opening and closing tags <FORM> and
</FORM>. Between these two tags, you will
fit as many other elements as necessary. Here, each of them will be explained in
detail along with examples of exact source code needed to implement them.
The 'textbox' form input type
The most common input method on an HTML form is the text box. To add one of these
to your form, use the code in this way:
<INPUT TYPE="text" NAME="name" VALUE="" SIZE=15>.
This creates a single-line box
that is 15 characters wide, and allows the user to enter as much text as he wants.
When you refer to this box from a form mail script, you will use its "NAME" value.
Multiline textbox
For a text box with multiple lines, use the following code:
<TEXTAREA NAME="Address" ROWS=3 COLS=30 >
</TEXTAREA>
Instead of having
just a single line to input on, the user can perform carriage returns to make better
formatting of the text. This is also easier if the user will be inputting
a large amount of text - address or 'comments' for example. It's much easier to have
it all in a large text area, and be able to scroll through it.
The 'Select' input type
The next input method is the select menu, which you have surely seen in many other web sites.
These allow for a certain number of pre-designated answers to be chosen from.
Use the following code:
<select multiple name="colors">
<option> RED </option>
<option> GREEN </option>
<option> YELLOW </option>
<option> BLUE </option>
<option> ORANGE </option>
</select>
You can add unlimited options to this. Create a dropdown list
when the user is to select from a big set of values. When the number of
options is limited to less than 5, you can consider using radio buttons instead.
Check boxes
You can use check boxes for any Boolean entries that you want your user to make, such as
a list of yes or no questions. Use this code:
<INPUT TYPE = "checkbox" NAME = "color[]" VALUE = "green"> green
<INPUT TYPE = "checkbox" NAME = "color[]" VALUE = "red"> red
<INPUT TYPE = "checkbox" NAME = "color[]" VALUE = "blue"> blue
Instead of just being able to choose one color, the user can decide which colors he
likes or dislikes from the list. This may not be implemented as much as the others,
but it will still come in handy from time to time.
Radio buttons
You can use the radio button when you have clusters of items with circles next to them,
and only one circle from each group can be selected at a time. Use this code:
<INPUT TYPE = "radio" NAME = "answer" VALUE = "true" CHECKED> True
<INPUT TYPE = "radio" NAME = "answer" VALUE = "false"> False
Any of the radio buttons with the same name will fall into the same cluster, and only
allow one at a time to be checked.
Submit button
You need to have a submit button in the form to let the users submit the form.
Use the following code to create a submit button:
<input type='submit' name='Submit' value='Submit'>
These are the basic ingredients of an HTML form. Once you have created your form,
you need to process the form submision data. The articles below might help.
Related pages
|
