Form properties & elements

Reading a form with JavaScript

A form is the part of a page where people type or choose things. A login box, a checkout page, and a search box are all forms. Each thing in a form that you can type in or click is called a control. Common controls are:

• Text boxes and number boxes, made with <input>.
• Checkboxes and radio buttons, also made with <input>.
• Drop-down menus, made with <select>.
• Big boxes for many lines of text, made with <textarea>.
• Buttons, made with <button>.

JavaScript reads a form in three steps:

1. Get the form.
2. Use form.elements to find one control by its name.
3. Read the property that fits that kind of control.

Which property you read depends on the control:

• Text boxes and number boxes: value.
• Checkboxes: checked.
• A group of radio buttons: one shared value for the whole group.
• Menus: value, selectedIndex, options, and selectedOptions.

For this lesson, you should know DOM objects and their properties. Some values look like numbers but are really text; the Type conversion lesson helps with those. The next lesson, Form events, shows how to react when someone changes a field. This lesson is only about reading the fields.

First, get the form. document.forms is a list of every form on the page. You can pick a form in two ways:

• By position: document.forms[0] is the first form.
• By its name attribute: document.forms.signup is the form with name="signup".

Once you have the form, form.elements is the list of controls inside that form. You can pick a control by its name, like form.elements.email. You can also pick it by position, like form.elements[0]. form.elements.namedItem("email") does the same as form.elements.email.

const form = document.forms.signup;
const email = form.elements.email;
console.log(form.name);
console.log(email.value);

Line 1 gets the form named signup. Line 2 gets the control named email from that form's own list, so a control in another form can't get mixed in. Line 3 prints the form's name, signup. Line 4 prints what is in the email box, ada@example.com.

The browser calls this list an HTMLFormControlsCollection. A collection is an object that works like a list: it has a length and numbered items, but it is not a real array. These tags go in the list: button, fieldset, input, object, output, select, and textarea. Two details:

• An image button, <input type="image">, is not in the list.
• A disabled control is still in the list. Disabled means greyed out: the user can't change it. The browser only leaves it out when it sends the form.

1const form = document.forms.signup;2const email = form.elements.email;3const age = form.elements.age;4const plan = form.elements.plan;5const snacks = form.elements.snacks;6 7email.value;          // always a string8age.valueAsNumber;    // number, or NaN when empty9plan.value;           // checked radio value, or ""10snacks.selectedOptions;

Two more links between forms and controls:

• Every control has an element.form property. It points back to the form the control belongs to.
• A <fieldset> puts some controls in a group. It has its own smaller list, fieldset.elements, with only the controls in that group.

Here is the most important rule: input.value is always a string. A string is text. Even a number box gives text. If a number box shows 4, then input.value is "4". If you add 1 to that text, JavaScript joins the two and gives "41".

1function readNumberInput(rawValue) {2  const value = String(rawValue);3  const plusOne = value + 1;4  const valueAsNumber = value === "" ? NaN : Number(value);5  const fixed = valueAsNumber + 1;6  return { value, plusOne, valueAsNumber, fixed };7}8 9const result = readNumberInput("4");10console.log(result.plusOne);11console.log(result.fixed);

This code doesn't use a real page. It copies what a number box does, so you can step through it. In plain words, line by line:

• Line 2 turns the input into text, like input.value does.
• Line 3 adds 1 to the text, so it gets "41".
• Line 4 makes a number from the text, like input.valueAsNumber does. An empty box gives NaN.
• Line 5 adds 1 to the number, so it gets 5.
• Lines 10 and 11 print 41 and then 5.

1function readNumberInput(rawValue) {2  const value = String(rawValue);3  const plusOne = value + 1;4  const valueAsNumber = value === "" ? NaN : Number(value);5  const fixed = valueAsNumber + 1;6  return { value, plusOne, valueAsNumber, fixed };7}8 9const result = readNumberInput("4");Run10console.log(result.plusOne);11console.log(result.fixed);

To get a number, read valueAsNumber. It works for number boxes (type="number") and sliders (type="range"). For an empty number box:

• value is the empty string, "".
• valueAsNumber is NaN, which means "not a number".

So check before you do math. Number.isNaN(x) gives true when x is NaN.

Date boxes (type="date") have valueAsDate. Their value is text like "2026-09-25". Their valueAsDate is a Date object, or null when the box is empty.

Two more words you will see on controls:

• A disabled control can still be read with form.elements. But the browser doesn't send it with the form.
• A readonly control can't be edited either. But the browser does send it with the form.

const form = document.forms.signup;
const bio = form.elements.bio;
bio.value = "Current note";
console.log(bio.value);
console.log(bio.textContent);

A <textarea> is a big box for many lines of text. Read what is in it now with its value property. Its textContent is the text written between its HTML tags, and typing doesn't change it. Line 3 sets the value to Current note. Line 4 prints Current note. Line 5 still prints Original HTML, the text from the HTML.

A radio button is a round button for choosing one answer. Radio buttons with the same name form one group, and only one button in the group can be checked. For a group named plan, form.elements.plan gives a RadioNodeList: a list of all the radio buttons named plan. Its value is the value of the checked button, or "" when none is checked.

A checkbox is a square box that is on or off. Each checkbox works on its own. Its checked property is a boolean: true when it is on, false when it is off.

1const newsletter = document.querySelector("#newsletter");2const pro = document.querySelector("#plan-pro");3const selectAll = document.querySelector("#select-all");4 5newsletter.checked = true;     // no input/change event fires6pro.checked = true;            // same name: other radio pops out7selectAll.indeterminate = true; // visual mixed state8selectAll.checked = false;

An event is a signal the browser sends when something happens, like a click. When your code sets checked or value, the browser does not send an input or change event. That is useful: your code can fix a field without pretending the user did it. If you do want your event code to run, send the event yourself with dispatchEvent.

A "Select all" checkbox can show a third look, a dash, when only some of the boxes below it are checked. Set checkbox.indeterminate = true to show the dash. It only changes how the box looks. checked stays true or false.

A <select> is a drop-down menu. Each choice inside it is an <option>. A select has four useful properties:

• value: the value of the chosen option, like "tea".
• selectedIndex: the position of the chosen option. Counting starts at 0. It is -1 when nothing is chosen.
• options: the list of all the options.
• selectedOptions: the list of chosen options. A menu with the multiple attribute lets the user choose more than one.

1const select = document.querySelector("select");2 3const tea = new Option("Tea", "tea", false, false);4select.add(tea);5select.value = "tea";6 7select.multiple = true;8select.options[0].selected = true;9const chosen = [...select.selectedOptions].map((option) => option.value);10tea.remove();

To make a new option, write new Option(text, value, defaultSelected, selected). The four parts are:

• text: the words the user sees, like "Tea".
• value: the value your code reads, like "tea".
• defaultSelected: true makes it the starting choice, the one the menu goes back to when the form is reset.
• selected: true chooses it right now.

Add the option to the menu with select.add(option). Take it out with option.remove().

selectedOptions is an HTMLCollection, not an array, so it has no map method. Spread it into an array first: [...select.selectedOptions].map(option => option.value).

In real pages, you read a form before you check it, show a preview, turn a button on, save a draft, or send it to a server. The function below reads a signup form. Each line reads the property that fits its control.

1function readSignup(form) {2  const elements = form.elements;3  return {4    email: elements.email.value.trim(),5    age: elements.age.valueAsNumber,6    plan: elements.plan.value,7    toppings: [...elements.toppings.selectedOptions].map((option) => option.value),8    acceptsTerms: elements.terms.checked,9  };10}11 12function readSignupSubmission(form) {13  return Object.fromEntries(new FormData(form));14}

In plain words, line by line:

• Line 2 keeps form.elements in a shorter name, elements.
• Line 4 reads the email text. trim() removes spaces at the start and the end.
• Line 5 reads the age as a number.
• Line 6 reads the value of the checked radio button in the plan group.
• Line 7 spreads the chosen toppings into an array, then keeps each option's value.
• Line 8 reads the terms checkbox as true or false.
• Lines 12 to 14 are a second, shorter reader that uses FormData, shown next.

const form = document.forms.signup;
const data = new FormData(form);
const signup = Object.fromEntries(data);
console.log(signup.email);
console.log(data.getAll("toppings").join(","));

new FormData(form) collects what the browser would send if the form were submitted. Line 3 turns it into a plain object with Object.fromEntries. Line 4 prints the email, ada@example.com.

That plain object keeps only one value for each name. But a menu with multiple can send the same name more than once, like toppings twice. Line 5 uses data.getAll("toppings") to keep every value, so it prints cheese,olives.

FormData leaves out checkboxes that are not checked, and it leaves out disabled controls. It keeps readonly controls.

The table below is a quick guide. Each row starts with a question you might ask about a form. Read across to see what to read and why.

• "A number box gives a number." Its value is a string. Read valueAsNumber, or change the text to a number yourself.
• "form.email is always safe." It can clash with the form's own properties, like submit. Use form.elements.email.
• "Disabled controls are not in form.elements." They are in the list. They are only left out when the form is sent.
• "A radio button is just a round checkbox." Radio buttons with the same name form a group, and only one can be checked. Read the group's value with form.elements.plan.value.
• "Setting checked from code sends a change event." Setting a property from code does not send any form event.
• "selectedOptions is an array." It is an HTMLCollection. Spread it into an array before you use array methods like map.

Key takeaways

• document.forms finds forms. form.elements finds the controls inside one form.
• Use form.elements.name, not form.name, because a control's name can clash with the form's own properties.
• input.value is always a string. Use valueAsNumber, valueAsDate, or your own conversion when you need another type.
• Checkboxes use checked. A radio group gives the value of its checked button through form.elements.plan.value.
• Menus have value, selectedIndex, options, and selectedOptions. Make new choices with new Option.

In one line: form properties let JavaScript find each control in a form and read what it holds right now.

Up next: Form events.