HTMLInputElement

Key Properties — specific to <input>

Property	Type	Description
value	string	What the user has typed (or the current value). Most used property. ▾
Read to get what the user typed. Write to set it programmatically. JS `const input = document.querySelector('input'); console.log(input.value); // what user typed input.value = 'Hello'; // set it programmatically input.value = ''; // clear the field`
type	string	"text", "checkbox", "radio", "file", "number", "email", "password", etc. ▾
The type controls what the input looks like and what `value` contains. JS `input.type = 'password'; // hides text input.type = 'number'; // only allows numbers console.log(input.type); // 'number'`
checked	boolean	For checkboxes and radio buttons — true if selected. ▾
JS `const checkbox = document.querySelector('input[type="checkbox"]'); console.log(checkbox.checked); // true or false checkbox.checked = true; // tick it programmatically`
placeholder	string	Hint text shown when the field is empty. ▾
JS `input.placeholder = 'Search…';`
disabled	boolean	Prevents interaction with the input when true. ▾
JS `input.disabled = true; // user can't type input.disabled = false; // re-enable`
readOnly	boolean	User can see the value but can't edit it. ▾
Unlike `disabled`, a readOnly input still submits with the form. JS `input.readOnly = true;`
maxLength	number	Maximum number of characters allowed. ▾
JS `input.maxLength = 10; // user can't type more than 10 chars`

Common Methods

Method	Returns	Description
focus()	void	Moves keyboard focus to this input. ▾
JS `input.focus(); // user can start typing immediately input.blur(); // remove focus`
select()	void	Selects all text in the input. ▾
JS `input.select(); // highlights all text, ready to be replaced`
addEventListener()	void	Listen for "input", "change", "focus", "keydown", etc. ▾
"input" fires on every keystroke. "change" fires when the user leaves the field. JS `input.addEventListener('input', () => { console.log('Current value:', input.value); }); input.addEventListener('change', () => { console.log('Committed:', input.value); }); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') console.log('Enter pressed'); });`

Quick Examples

JS

const input = document.querySelector('input');

// Read what user typed
console.log(input.value);

// Clear on button click
document.querySelector('button').addEventListener('click', () => {
  input.value = '';
  input.focus();
});

// Live character counter
input.maxLength = 100;
input.addEventListener('input', () => {
  const remaining = 100 - input.value.length;
  document.querySelector('#counter').textContent = remaining + ' left';
});

// Disable while loading
input.disabled = true;
fetch('/api/data').then(() => { input.disabled = false; });

Related Elements

Related Properties

Related Methods

Input Element