JavaScript DOM

JavaScript Forms and Inputs

Written by Swapnil RajaPublished 24 Aug 2026

JavaScript reads and sets form values through the value and checked properties.

Forms are how most pages take information from a visitor.

value is always a string, even for a number input.

Example

javascript

document.body.innerHTML = '<input id="name" value="Ada">';

console.log(document.getElementById("name").value);

The output is Ada.

Reading Form Values

value holds the current contents of a text, number or select input.

checked is a boolean for checkboxes and radio buttons.

Values from a form are always strings until you convert them.

Syntax

javascript

input.value;
checkbox.checked;

Setting these properties updates what the visitor sees.

Setting a Value

Assigning to value changes what is in the box.

Example

javascript

document.body.innerHTML = '<input id="name" value="Ada">';

const input = document.getElementById("name");
input.value = "Grace";

console.log(input.value);

The visitor sees the new value straight away.

Numbers Come Back as Strings

This is the classic form bug: adding two values joins them instead.

Number converts it properly.

Example

javascript

document.body.innerHTML = '<input id="age" type="number" value="20">';

const raw = document.getElementById("age").value;

console.log(typeof raw);
console.log(Number(raw) + 5);

Without Number, the result would be 205.

Checkboxes

Use checked, not value, to find out whether it is ticked.

Example

javascript

document.body.innerHTML = '<input id="agree" type="checkbox" checked>';

const box = document.getElementById("agree");

console.log(box.checked);

box.checked = false;

console.log(box.checked);

value on a checkbox is the value it submits, not its state.

Select Elements

value gives the value of the chosen option.

Example

javascript

document.body.innerHTML =
  '<select id="size"><option value="s">Small</option>' +
  '<option value="l" selected>Large</option></select>';

console.log(document.getElementById("size").value);

The output is l, the value of the selected option.

Simple Validation

Trimming first stops a box of spaces counting as filled in.

Example

javascript

document.body.innerHTML = '<input id="name" value="   ">';

const value = document.getElementById("name").value.trim();

console.log(value === "" ? "please enter a name" : value);

Real forms should be checked on the server as well.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Forms and Inputs</title>
</head>
<body>

  <h1>Forms and Inputs</h1>

  <input id="name" value="Ada">
  <input id="age" type="number" value="36">
  <input id="agree" type="checkbox" checked>

  <p id="out"></p>

  <script>
    const name = document.getElementById("name").value;
    const age = Number(document.getElementById("age").value);
    const agreed = document.getElementById("agree").checked;

    document.getElementById("out").textContent =
      name + " is " + (age + 1) + " next year. Agreed: " + agreed;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try removing the conversion:

Drop the Number call and watch the ages join instead of add.

Important Points

value holds the contents of an input.
value is always a string, even for number inputs.
Use Number before doing arithmetic with it.
checked is the boolean state of a checkbox.
Trim text before deciding whether a field is empty.

Conclusion

Reading form values is the starting point of nearly every interactive page.

The string-versus-number trap is worth remembering, because it is silent.

The Events section covers reacting when the visitor types or submits.

PreviousJavaScript DOM Collections NextJavaScript Events