FORM FIELDS
These fields can be added to your forms:
- Text field
- Password field
- Hidden field
- Text area
- Check box
- Radio button
- Drop-down menu
- Submit button
- Reset button
- Image button
TEXT FIELD
Text fields are one line areas that allow the user to input text.
SETTINGS:
Below is a listing of valid settings for text fields:
| HTML | EXPLANATION |
EXAMPLE |
| text size= maxlength= name= value= align= tabindex= |
One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field. Alignment of the field. Tab order of the field. |
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. The alignments are explained in the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name=”myform” action=”http://www.mydomain.com/ myformhandler.cgi” method=”POST”>
<div align=”center”>
<br><br>
<input type=”text” size=”25″ value=”Enter your name here!”>
<br><br>
</div>
</form>
</body>
</html>
And the resulting output from it:
PASSWORD FIELD
Bottom of Form
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.
SETTINGS:
Below is a listing of valid settings for password fields:
|
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. The alignments are explained in the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name=”myform” action=”http://www.mydomain.com/myformhandler.cgi” method=”POST”>
<div align=”center”>
Enter Password : <input type=”password” size=”25″>
<br><br>
</div>
</form>
</body>
</html>
And the resulting output from it:
| Enter Password : |
HIDDEN FIELD
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:
To submit information that is not entered by the visitor.
SETTINGS:
Below is a listing of valid settings for hidden fields:
| HTML | EXPLANATION | EXAMPLE |
| hidden name= value= |
Hidden field Name of the field. Value of the field. |
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 sent once the form is submitted.
AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name=”myform” action=”http://www.mydomain.com/myformhandler.cgi” method=”POST”>
<div align=”center”>
<input type=”text” size=”25″ value=”Enter your name here!”>
<input type=”hidden” name=”Language” value=”English”>
<br><br>
</div>
</form>
</body>
</html>
And the resulting output from it:
The hidden field does not show, but still, when the form is submitted the hidden field is sent with it.
In this example the hidden field would tell the program that handles the form, that the users preferred language is English.

Discussion
No comments yet.