 |
Forms Input |
| |
HTML |
Result |
| |
Text
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=text>
</form>
|
|
| |
This is the standard text box that gets displayed whenever
you request a form. All following form commands will have the "Post"
method attached to them and the action is to email someone.
|
| |
Password
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=password>
</form>
|
|
| |
The password puts *'s instead of characters when anything
is typed into the text area.
|
| |
Checkbox
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=checkbox>
</form>
|
|
| |
The checkbox can either be empty or filled in, it's a true
/false option.
|
| |
Radio Button
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=radio>
</form>
|
|
| |
The radio button can either be empty or filled in, it's
a true/false option.
|
| |
Images
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type="image" src="email.gif"
width=100 height=62>
</form>
|
|
| |
As you can see you can load images within your forms
this could be used instead of the boring "submit" button, shown
later down the page.
|
| |
Hidden
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=hidden value="
Form on anything">
</form>
|
|
| |
A hidden tag is used in a form when there is some
information that you
wish to include in a form that you don't want the user to see.
It is normally used in conjunction with the password type. It returns
useful information about specific forms. As you can see, if you have
multiple forms that are the same that get sent to you, you can add a
hidden tag to it, so when it is sent to your email account, there will
a value telling you what the form is about. This is why the hidden tag
should include a value tag.
|
| |
Submit
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=submit>
</form>
|
|
| |
Submit is a button created so that you can click on it
and it sends the form data, via the action requested. The name
of the button can be changed by using the value tag.
|
| |
Reset
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=reset>
</form>
|
|
| |
Reset is a button used for clearing a form of all data.
The name of the button can be changed by using the value tag.
|
| |
Forms Input Cont... |
| |
HTML |
Result |
| |
Name
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=text name="fred">
</form> |
|
| |
The name tag is standard with every type used within a form,
this allows the browser to distinguish between different type
tags and also allows for multiple actions(ie, checkboxes) to work
together to produce one output. |
| |
Value
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=text name="fred"
value="turtle">
</form> |
|
| |
The value tag can be used with almost every type found within a form,
this allows the user to basically give big hints on what goes where
on a form, by saying "email here" in a text box in which you want a
user's email address, most times makes it easier upon a user.
|
| |
Checked
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=radio name="fred"
checked>
</form> |
|
| |
The checked tag can be used with radio tags or the checkbox tag.
This basically makes one in a group of radio tags or checkboxes already
clicked on, you might use this in simple query's such as male or female,
do you want to include your email address yes or no??.
|
| |
Size
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=text name="fred"
size=30>
</form> |
|
| |
The size tag determines the size of a area, this is normally used
on such tags as the input type=text, this normally limits the size of the
text box for a certain width. The default is set to 20 characters. This is
a decent width, and this doesn't limit the amount of informaton that can
be typed into the text field.
|
| |
Maxlength
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=text name="fred"
maxlength=15>
</form> |
|
| |
As you saw above, the size command modifies the size of
the text box that is viewed with no limit on the actual amount of data
that can be entered into it. The new tag maxlength creates a limit
on the amount of information entered into a text box. Test it, click into
the text box and attempt to fill it with characters.
|
| |
Forms Multiple Options |
| |
HTML |
Result |
| |
Pull Down Menu's
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<select>
</select>
</form> |
|
| |
To make a Pull down menu, we use the tags <select> and
</select> instead of the <input> tag. As you can see, the basic
tags themselves give you a pull down menu, but it has no length, no data
,nothing. So let's name it (As all form tags should be named) and give
it a few options.
|
| |
Name's and Options
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<select name="hero">
<option>Batman
<option>Superman
<option>Robin
<option>Flash
</select>
</form> |
|
| |
As is standard the Pull Down Menu is named, Notice how
each option is a separate entity. You can have as many options as you
require
|
| |
Values and Selected
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<select name="hero">
<option value="Batman">Batman
<option value="Superman">Superman
<option value="Robin">Robin
<option value="Flash selected>Flash
</select>
</form> |
|
| |
By claiming a Value for each option, the option then has
meaning when it is selected. The selected tag, means that the list
doesn't always have to start at the top of the menu.
|
| |
Scrolling List
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<select name="hero" size=5>
<option value="Batman">Batman
<option value="Superman">Superman
<option value="Robin">Robin
<option value="Flash">Flash
<option value="Storm">Storm
<option value="Cyclops">Cyclops
<option value="Archangel">Archangel
<option value="Prof X" selected>Prof X
<option value="Jubilee">Jubilee
</select>
</form> |
|
| |
As you can see, the only difference between a Pull Down Menu
and a Scrolling list is the Size tag. By specifiy a size the actual height
of the Pull Down Menu is modified. You can also have an option selected
should you so desire.
|
| |
Radio buttons
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=radio name="hero"
value="Batman">Batman<br>
<input type=radio name="hero"
value="Superman">Superman<br>
<input type=radio name="hero"
value="Robin" checked>Robin<br>
<input type=radio name="hero"
value="Flash">Flash<br>
</form> |
|
| |
As you have by now no doubt noticed, a selection of radio
tags such as those shown, enable you to select one option of the choice
avaliable. Also note that a choice can be either checked or not checked.
|
| |
Check boxes
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<input type=checkbox value="yes"
name="Batman">Batman<br>
<input type=checkbox value="yes"
name="Superman">Superman<br>
<input type=checkbox value="yes"
name="Robin" checked>Robin<br>
<input type=checkbox value="yes"
name="Flash">Flash<br>
</form> |
|
| |
For check boxes the name changes and the value
stays the same and with radio buttons, the value changes but the
name stays the same. This is because you are allowing for multiple
choices with a check box, whereas a radio button is a one or the
other.
|
| |
Forms Text Boxes |
| |
HTML |
Result |
| |
Text Area
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<textarea name="stuff">
</textarea>
</form> |
|
| |
This is a standard area where unedited text can be sent,
though it is quite possible to add restrictions to modify the box so
that it is more usable by people.
|
| |
Rows and Columns
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<textarea name="stuff"
rows=10 cols=3>
</textarea>
</form> |
|
| |
As you can see, you can make the text area any shape
you desire, you can make wide ones by modifying the cols tag or
you can make very tall ones by changing the rows allocated.
|
| |
Wraps - Off
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<textarea name="stuff"
rows=3 cols=15
wrap=off>
</textarea>
</form> |
|
| |
Wrap off is the default wrap status of the text area.
What this means is that the text in the box does not wrap, but it is
sent exactly the way it was typed in.
|
| |
Wraps - Virtual
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<textarea name="stuff"
rows=3 cols=15
wrap=virtual>
</textarea>
</form> |
|
| |
Wrap virtual means that the text in the box wraps,
but it is sent as one long continuous string.
|
| |
Wraps - Physical
<form method="post"
action="mailto:xxxxx@xxxx.xxxx">
<textarea name="stuff"
rows=3 cols=15
wrap=physical>
</textarea>
</form> |
|
| |
Wrap physical means that the text in the box wraps,
and it is sent that way too. This allows for understandable feedback.
|