Working with Document Object Model Form Data in Your Web Pages

HTML & CSS Essentials For Dummies

When you use HTML5 forms in your web pages, you usually incorporate quite a few different elements — text boxes, text areas, check boxes, and radio buttons. Your JavaScript code can use the DOM tree objects to manipulate all these elements. The following information shows you how to use the DOM tree to work with different types of form elements.

Text boxes

Because the input element is a one-sided tag, there’s no innerHTML property to store the text that's inside the text box.

Instead, you need to use the value attribute of the object to read any text that may already be in the text box (whether placed there by the value attribute or typed by the site visitor). To do that, you use the value object property:

var textbox = document.getElementById("test");
var data = textbox.value;</pre<
You can also use the value property to write data to the text box. That code looks like this:

var textbox = document.getElementById("test");
var answer = prompt("Enter text to change");
textbox.value = answer;

This provides for an easy way to create a message area on your web page for displaying short messages, such as status messages. Just place a textbox input element near the bottom of the web page, and change the value property of it with any message you need to display.

There are also a few other DOM object properties associated with textbox objects that can come in handy. The table below shows the DOM textbox properties available.

The textbox DOM Properties

The `textbox` DOM Properties
Property	Description
`autocomplete`	Sets or retrieves the value of the autocomplete attribute
`autofocus`	Sets or retrieves whether the text box gets the window focus when the web page loads
`defaultValue`	Sets or retrieves the default value assigned to the text box
`disabled`	Sets or retrieves whether the text box is disabled in the form
`form`	Retrieves the parent form the text box belongs to
`list`	Retrieves the data list associated with the text box
`maxLength`	Sets or retrieves the maximum length of the text box
`name`	Sets or retrieves the name attribute for the text box
`pattern`	Sets or retrieves the pattern attribute for the text box
`placeholder`	Sets or retrieves the placeholder attribute for the text box
`readOnly`	Sets or retrieves whether the text box is read only
`required`	Sets or retrieves whether the text box is a required field in the form
`size`	Sets or retrieves the value of the size attribute for the text box
`type`	Retrieves the type of element the text box is
`value`	Sets or retrieves the value attribute for the text box

With these few properties, you have full control to dynamically modify any text box that appears on the web page.

Text areas

The textarea DOM object works similar to the textbox object. Instead of the innerHTML property, you use the value attribute to retrieve any text from the text area or place any new text into the text area.

There are a few other properties that are unique to the textarea object:

cols: Sets or retrieves the number of columns assigned to the text area
rows: Sets or retrieves the number of rows assigned to the text area
wrap: Sets or retrieves whether text can auto-wrap within the text area

As you can tell, you can dynamically change the size of the text area in a web page using JavaScript and the DOM object properties. That can create quite an effect as your site visitor is filling out the form.

Check boxes

The checkbox object is another oddity in the DOM. A check box in a form provides for a yes/no type of answer — either the visitor checks the check box or the box is unchecked. You can test for that condition using the DOM checked property:

var pizza = document.getElementById("pizzabox");
if (pizza.checked) {
alert("your pizza will be delivered shortly");
}<

You can also set whether the check box is checked by assigning the property a true or false value:

pizza.checked = true;

The table below shows all the DOM object properties that are supported when using check boxes.

The checkbox DOM Properties

The checkbox DOM Properties
Property	Description
`autofocus`	Sets or retrieves whether the check box gets the focus when the web page loads
`checked`	Sets or retrieves the state of the check box
`defaultChecked`	Retrieves the default state of the check box
`defaultValue`	Retrieves the default value assigned to the check box
`disabled`	Sets or retrieves whether the check box is disabled
`form`	Retrieves the parent form the check box belongs to
`intermediate`	Sets or retrieves the intermediate state of the check box
`name`	Sets or retrieves the name assigned to the check box element
`required`	Sets retrieves whether the check box must be checked before submitting the form
`type`	Retrieves the type of element the check box is
`value`	Sets or retrieves the value associated with the check box

That gives you full control over how the check boxes behave in your web page.

Radio buttons

Working with radio buttons is always a complicated matter. All the radio buttons in the same group use the same name property, so the browser can handle them as a group. Remember, only one radio button in the group can be selected at any time.

Handling data from a radio button requires using the checked and value object properties, just like the checkbox object. Because all the radio buttons use the same name, the value attribute is crucial in determining if you’re working with the correct radio button in the form.

About This Article

About the book author:

Richard Blum has more than 30 years of experience as a systems administrator and programmer. He teaches online courses in PHP, JavaScript, HTML5, and CSS3 programming, and authored the latest edition of Linux For Dummies.