Text Fields

In web forms, you can create single-line text fields (including password text fields) or multi-line text fields into which the user may type information, e.g. a name, an email address, comments, etc.

Single-line Text Field

There are two types of single-line text fields: text and password. Both are created using the input element with the type attribute having a value of either "text" or "password" respectively. The input element is an empty element, i.e. no content appears between the start and end tags, and hence only the start tag <input> is required.

Below is an example of a single-line text field. The user clicks inside the text field to display the flashing text cursor and then begins typing. In the source code, we see that the control name defined for this text field is "firstname". The current value automatically becomes whatever the user types in.

SOURCE CODE

<input type="text" name="firstname">

Here's a password text field. This type of text field disguises the user input as a series of asterisks or dots. Try typing in some text to see this in effect.

SOURCE CODE

<input type="password" name="login">

In the HTML source code, you can insert text and other HTML elements to create 'labels' and to control the presentation of your web form. The example below inserts the word "Password" before the input element. A <br> tag is then added to place the text field below the label.

Password:

SOURCE CODE

Password:<br><input type="password" name="login">

Multi-line Text Field

Multi-line text fields are created by using the textarea element which requires both a start tag <textarea> and an end tag </textarea>. The height of the text field is established by inserting the rows="nn" attribute-value pair where nn equals the height in number of text lines. The width of the text field is established by inserting the cols="nn" attribute-value pair where nn equals the width in number of character widths.

Here's a multi-line text field which is 15 rows high and 50 character widths wide.

Your comments:

SOURCE CODE

Your comments:<br>
<textarea rows="15" cols="50" name="comments">
</textarea>

Quite often, the input that you require from the user would be better acquired by supplying a list of choices through which the user can quickly scan through and make a selection. Checkboxes and radio buttons offer two methods of creating such lists...