Chapter 28. Scripting Text Elements
If buttons are the most common form control, text-based input elements are a close second. There are several types of text elements, making them the best tool for inputting data to submit to your web application. They are:
The textbox
The password textbox
The hidden textbox
The Multiline textbox
The differences between the textbox types are minimal. Let's start with the simple textbox.
THE TEXTBOX
You create a textbox with the <input/>
element and set its type
attribute to the value of text
, like this:
<input type="text" name="textBox" />
This HTML creates a textbox named textBox
. To access it in a form, you get the element either by its id
attribute (which this example does not have), or through the form it belongs to. Assuming this textbox resides in a form called theForm
, the following code gets a reference to this textbox:
var txtBox = document.theForm.textBox;
When you create a textbox, you can set its value
attribute to contain a text value. The value
attribute dictates what appears inside the textbox when the browser renders it. This attribute maps directly to the value
property, so you can get or set the text in a textbox by using the value
property like this:
txtBox.value = "Some new data";
The contents of the value
property are always a string, even if numeric characters are entered. So when you expect a textbox to be used for numeric data, it's always a good idea to convert the textbox's value to a number by using the parseInt()
or parseFloat() ...
Get JavaScript® 24-Hour Trainer now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.