Text Input:

The most common, and basic, “input” element type is type="text".

This creates a “text box” where users can type in information that is available to the browser.

Type in this example text input element!

Plain Text Input Element

This following code demonstrates how to create an input element of type="text". Please notice the use of the <p>...</p> element to display information text in front of the text box.

NOTE: Technically, you can omit the “type” from the input element if you want a text box. But good style dictates that you should be explicit in your code so as to prevent errors. So don’t.

Your first name is:

Password Input Element

The type="password" for input elements creates a “password input box”.

This attribute creates a single line text entry field where the characters are hidden with *s.

NOTE: You would never use this type of field to send sensitive data such as SSN’s. For such situations, a site should create a web socket or use an Secure Socket Layer (SSL) connection with a server to guarantee secure delivery of data.

What's the magic word?

Textarea Input Element

The textarea input type can be used to create an input field element where users can enter longer responses.

NOTE: This field uses an opening and closing tag pair. Any text between these tags will initially inhabit the box.

How are you feeling today?

I feel...

Altogether Now

---

Additional Elements

autofocus

The autofocus attribute is used to set the “focus” of a browser to the specified form element after the page loads.

NOTE: Unlike most attributes, there is no “value” to assign. Therefore the attribute it passed in alone.

Refresh the page. See how the cursor is blinking inside the first example input box? This means it is “focused,” and can take input right away.

maxlength

The ‘maxlength’ attribute is used to limit the number of characters a user may enter into a text field. As an example, a text field that expects a year, may be limited to maxlength="4" characters.

NOTE: Type in the below text box. You will find (at least in most browsers) that you cannot type more than 4 characters.

Enter the last 4 digits of your Student ID:

cols & rows

You can specify the number of cols and rows through the appropriate attributes. This changes the size of the displayed element, as well as how text will look when typed.

• cols is the width of the textarea in character widths (i.e. this is the number of characters that will fit from left to right).
• rows is the number of visible lines.

NOTE: Typically, and as is the case with many size parameters that you can set in HTML, you should override these parameters with CSS. See the following code example.

Why should we consider you for the job? Include qualifications, past experience, and references.

placeholder

The placeholder attribute can be used to place grey text in a text field. This text will disappear when the user focuses the element by clicking in it.

This text can be used to offer hints about the type of text that is expected or to encourage the user to type in the field.

NOTE: Notice how the text box has grey text (should work in most browsers), and that when you click in there or begin typing it goes away.

What do you do for fun?

size

You can use the size attribute to set the display (in character widths) for the text input box.

What do you do for fun?

value

The value attribute can be used to “pre-fill” a text box. Unlike placeholder, when you click in the text box, the “pre-filled” text is not replaced. Instead, the user can edit it freely, remove it, or keep it.

NOTE: This can be used to fill in “input” elements with data that would be used “most of the time”.

What year were you born?

Altogether Now, but Better

{ TODO: }

Read pages 152-154 of Chapter 07 in Duckett.

---