Skip to content
W3S101

js_input_examples

JavaScript and HTML Input Element Examples

Section titled “JavaScript and HTML Input Element Examples”

This section outlines common ways JavaScript is used to interact with HTML input elements and forms, enabling dynamic and responsive user interfaces.

Button (<button>, <input type="button">) Element

Section titled “Button (<button>, <input type="button">) Element”

Manipulating button elements:

  • Enable or disable a button: buttonElement.disabled = true/false;.
  • Get the name attribute of a button: buttonElement.name.
  • Determine the type of a button (e.g., ‘button’, ‘submit’, ‘reset’): buttonElement.type.
  • Get or set the value attribute (often relevant for input type buttons): buttonElement.value.
  • Get or set the text displayed on a button: buttonElement.textContent or buttonElement.innerHTML.
  • Find the form a button belongs to: buttonElement.form (returns the parent form element or null).

Event handling (e.g., buttonElement.addEventListener('click', ...) is crucial for button interactivity.

Form (<form>) Element

Section titled “Form (<form>) Element”

Interacting with HTML forms:

  • Programmatically submit a form: formElement.submit().
  • Reset a form to its initial values: formElement.reset().
  • Access individual form elements: formElement.elements (an HTMLFormControlsCollection), which can be accessed by name or index (e.g., formElement.elements['username'] or formElement.elements[0]).
  • Get the value of each element in a form by iterating through formElement.elements.
  • Find the accept-charset attribute of a form: formElement.acceptCharset.
  • Get or set the action attribute (URL for submission): formElement.action.
  • Get or set the enctype attribute (encoding type for submission, e.g., ‘multipart/form-data’): formElement.enctype.
  • Find the number of elements in a form: formElement.elements.length.
  • Get or set the HTTP method for sending form data (‘GET’ or ‘POST’): formElement.method.
  • Get the name attribute of a form: formElement.name.
  • Get or set the target attribute (where to display the response): formElement.target.

For modern asynchronous form submissions (e.g., using fetch or XMLHttpRequest), the FormData object is very useful: const formData = new FormData(formElement);.

Select (<select>) and Option (<option>) Elements

Section titled “Select (<select>) and Option (<option>) Elements”

Working with dropdown lists and their options:

  • Enable or disable a dropdown list: selectElement.disabled = true/false;.
  • Get the form containing the dropdown list: selectElement.form.
  • Get the number of options in the dropdown: selectElement.options.length or selectElement.length.
  • Control display for multiple selections: selectElement.size (number of visible options), selectElement.multiple = true/false;.
  • Get the selected option’s value (for single select): selectElement.value.
  • Get the index of the selected option (for single select): selectElement.selectedIndex.
  • Access individual options: selectElement.options[index].
  • Check if an option is selected: optionElement.selected (boolean).
  • Get or set the text of an option: optionElement.text or optionElement.textContent.
  • Get or set the value of an option: optionElement.value.
  • Dynamically add options: const newOption = new Option('Text', 'value'); selectElement.add(newOption);.
  • Remove options: selectElement.remove(index); or selectElement.options[index] = null;.

For multi-select lists, you’ll need to iterate through selectElement.options to find all selected options.

Other Input Types (<input type="text">, <input type="checkbox">, etc.)

Section titled “Other Input Types (<input type="text">, <input type="checkbox">, etc.)”

Common tasks with various input fields:

  • Get or set the value of a text input, password, email, etc.: inputElement.value.
  • Check if a checkbox or radio button is selected: inputElement.checked (boolean). Set to true or false to change state.
  • Get the name, type, id attributes.
  • Control read-only state: inputElement.readOnly = true/false;.
  • Control required state: inputElement.required = true/false;.
  • Access validation properties (e.g., inputElement.validity, inputElement.validationMessage) for HTML5 form validation.

Attaching event listeners for ‘input’, ‘change’, ‘focus’, ‘blur’ events is common for creating interactive forms. For more details on specific input types and their unique properties/methods, refer to MDN Web Docs.