The Text Field Widget
- The most common interface widget is the Text Field. A Text Field allows a user to type in a line of text and looks like the following:
Try it out...type in some text.
Behind the scenes, the above text field was created with the following HTML code
<FORM ACTION = ""> <INPUT TYPE = "TEXT" NAME = "demo" > </FORM>
| Attribute | Description |
|---|---|
| TYPE | Specifies the type of interface widget. For a Text Field, you use "TEXT" |
| NAME | Specifies the variable name associated with this widget |
| VALUE | Specifies initial default text that should appear in the text field |
| MAXLENGTH | Specifies the maximum number of characters allowed to be input into the widget |
| SIZE | Specifies the width of the field |
- Let's take a closer look at each of these attributes.
- The VALUE attribute allows you to specify default text. Here is an example:
And here is the code that we used to make that text field.
<FORM ACTION = ""> <INPUT TYPE = "TEXT" NAME = "demo" VALUE = "default text" > </FORM>The MAXLENGTH attribute
- The MAXLENGTH attribute allows you to specify the maximum number of characters allowed for input. Here is an example that only allows you to type in 5 characters. Try it out for yourself:
And here is the code that we used to make that text field.
<FORM ACTION = ""> <INPUT TYPE = "TEXT" NAME = "demo" MAXLENGTH= "5" > </FORM>The SIZE attribute
- The SIZE attribute allows you to specify the width of the text field itself. Here are two examples that show the attribute being used:
And here is the code that we used to make the text fields.
<FORM ACTION = ""> <INPUT TYPE = "TEXT" NAME = "demo" SIZE = "30" > <INPUT TYPE = "TEXT" NAME = "demo" SIZE = "20" > </FORM>
The
<Input> Tag
Table of Contents
The Password Widget
