Making A Textbox

Our first form field will be a simple and versatile textbox like this:

This box is just a single <input> tag in a <form>. Lets start by making the form:

<form name="form1">

</form>

All we did was code an opening and closing <form> tag and name the form. It's important to get used to naming all of your form stuff. These names will be used when the form is processed.

Next, we need to make an <input> that makes the actual textbox:

<form name="form1">

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

</form>

Inputs can be of several different types. For a textbox, use TYPE="text". Also note that I named the textbox. Textboxes are always one line of text in height, but we can make the box as long as we want by using the SIZE attribute in the <input> tag.

<form name="form1">

<input type="text" size=20 name="textbox1">

</form>

The above would make the textbox 20 characters wide. Remember that the size is in characters, not pixels. Fifteen to twenty characters are average values that cover most needs.

Note that the <input> tag does not require a closing </input> tag. The closing tag exists and can be used, but it is not required by any browser and is rarely used.

You can add default text to your textbox with the VALUE attribute.

<input type="text" value="E-mail Goes Here" name="emailbox">

Now the string "E-mail Goes Here" will appear in the textbox when it's loaded.

Password Boxes

A password box works just like a textbox except that the asterisks are displayed instead of the typed in text. The text value is maintained for backend programming. It just can't be seen. This is how a lot of password inputs on log in forms are handled. Here's the code:

<input type="password" size=15 name="passwordbox">

And below is the box in action. Try typing something into it.

Neat, huh? Now you can keep your viewers input safe from prying eyes.

Textarea

Above is a <textarea> as opposed to a simple text box. It is made with a <textarea> tag instead of an <input> tag. Here's how one's coded:

<form name="form2">

<textarea name="bigbox">
</textarea>

</form>

Notice here that a closing </textarea> tag must be used. This is unlike the <input> textbox. Anything you type between the <textarea> and </textarea> tags will appear inside the box. You do not have to include any text inside your textarea.

<form name="form2">

<textarea name="bigbox">

Default text for the box would go between the two <textarea> tags.

</textarea>

</form>

The primary use of the textarea is to let the viewer input a large amount of text. The default text can be instructions or examples of the desired input. Default text is not required. It can be overwritten by the user. Try this out with the box at the top of this section.

You can size a <textarea> using ROWS and COLS. These dimensions are numerical values representing the number of character lines high (rows) and characters wide (cols) you want the box to be. The box above was sized like this:

<textarea name="bigbox" rows=8 cols=30>

Default text

</textarea>

Word Wrapping

You can turn "word wrapping" on or off in a <textarea> by using the WRAP attribute. Defaults vary, but usually word wrapping is turned on when a textarea is made.

<textarea wrap=off> -- turns off word wrapping.

<textarea wrap=virtual> -- turns word wrapping on in "virtual" mode.

<textarea wrap=physical> -- turns word wrapping on in "physical" mode.

I'm not entirely clear on the practical differences between "virtual" and "physical". They both turn on word wrapping and I can't see the difference between the two. The "physical" setting claims that text between the <textarea> tags will be presented in the box as typed in the code -- sort of like the <pre> tag. The virtual setting seems to do the same thing.

Anyway, you can turn off word wrapping with WRAP=off. Notice that no quotes are used around these values. To turn word wrapping "on" use either "physical" or "virtual".

Disabled & Read-Only

The box above is "disabled". Notice that it has a "greyed-out" appearence. You can't delete or overwrite the text in the box. This is used when a textbox is being used to display text instead of providing an area for input. It's made by using the DISABLED attribute in your <textarea> tag.

<textarea disabled name="bigbox" rows=8 cols=30>

If you don't like the greyed look you can get a similar effect by using a READONLY attribute instead of DISABLED.

<textarea readonly name="bigbox" rows=8 cols=30>

This prevents the viewer from being able to focus or type in the box, but it doesn't change the appearance of the box from a regular <textarea>. You can use the READONLY and DISABLED attributes in your <input> tag for a textbox, too. The effect is the same for the textbox as the <textarea>

Putting Text Around Fields

In most forms you'll want to put some instructional text around your <inputs> to tell viewers what type of data to enter. Like this:

The text tells the user to put their name in the textbox. You can add text in a <form> just like you do anywhere else on your page. The code for the above box is:

<form name="form3">

<div align="center">
<p>NAME</p>
<input type="text" size=15 name="box4">
</div>

</form>

Note that you can use any HTML you'd like between the <form> tags, but that input fields, must always be in <form> tags. You can code them without <form> tags, but they'll be useless to JavaScript validation and backend scripting. They'll be for display purposes only.

You can put text labels and instructions beside the text field, too. By default, <input>s are are inline elements that don't cause a line break. You must add <br> or other tags to make line breaks. Here's a side-by-side example:

The code for the above looks like this:

<form>
Name: &nbsp;&nbsp;
<input type="text" size=15>
</form>

Summary & Exercises

You can make a textbox for a single line of text input by using the <input type="text"> tag inside <form> tags. This box can have a length set by the SIZE attribute.

You can make a <textarea> to receive larger amounts of text data. This is sized with ROWS and COLS.

You can use these boxes for display only by putting DISABLED or READONLY in the appropriate tag.

You can use text and any other HTML inside the <form> tags to format the fields and add instructional text. The <br> tag can be used to vertically space fields and &nbsp; used for horizontal spacing. You can even use tables or CSS to position the fields.

Make the simple form with four fields below. Use tables to layout the fields in different ways.

Now lets start making a form that we'll use throughout the forms tutorials. Make and save this page.

To Next Advanced HTML Lesson

Back To Advanced HTML Index