Check if Element is Input or Select dropdown in JavaScript

# Table of Contents

# Check if an Element is an Input using JavaScript

Use the tagName property to check if an element is an input.

The tagName property returns the tag name of the element on which it was accessed. Note that the property returns DOM tag names in uppercase.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" name="first_name" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const element = document.getElementById('first_name');

// ✅ Check if the element is an Input
if (element.tagName.toLowerCase() === 'input') {
  console.log('element is an input');
} else {
  console.log('element is NOT an input');
}

// -----------------------------------------------

// ✅ Check if the element is Textarea
if (element.tagName.toLowerCase() === 'textarea') {
  console.log('element is a textarea');
} else {
  console.log('element is NOT a text area');
}

// -----------------------------------------------

// ✅ Check if the element is input of a specific type
if (
  element.tagName.toLowerCase() === 'input' &&
  element.getAttribute('type') === 'text'
) {
  console.log('element is an input of type text');
} else {
  console.log('element is NOT an input of type text');
}

check if element is input or select dropdown

The code for this article is available on GitHub

The tagName property returns the tag name of the element on which it was accessed.

Note that DOM element names are upper-cased. For example, if accessed on an img element, the tagName property returns "IMG".

index.js

Copied!
const element = document.getElementById('first_name');

console.log(element.tagName); // 👉️ "INPUT"

This is why we used the String.toLowerCase() method to convert the result to lowercase.

Our second example checks if the element is a textarea.

In the third example, we check if the element is an input of type text.

index.js

Copied!
const element = document.getElementById('first_name');

// ✅ Check if the element is input of a specific type
if (
  element.tagName.toLowerCase() === 'input' &&
  element.getAttribute('type') === 'text'
) {
  console.log('element is an input of type text');
} else {
  console.log('element is NOT an input of type text');
}

The code for this article is available on GitHub

We used the logical AND (&&) operator, which means that both conditions have to be met for the if block to run.

The getAttribute method returns the value of the provided attribute on the element.

If the attribute doesn't exist on the element, the method returns null or empty string, depending on the browser's implementation.

If you need to make sure that the value stored in the element variable is not null or undefined, use the optional chaining (?.) operator.

index.js

Copied!
const element = null;

// ✅ Check if the element is an Input
if (element?.tagName?.toLowerCase() === 'input') {
  console.log('element is an input');
} else {
  console.log('element is NOT an input');
}

// -----------------------------------------------------

// ✅ Check if the element is Textarea
if (element?.tagName?.toLowerCase() === 'textarea') {
  console.log('element is a textarea');
} else {
  console.log('element is NOT a text area');
}

// -----------------------------------------------------

// ✅ Check if the element is an input of a specific type
if (
  element?.tagName?.toLowerCase() === 'input' &&
  element?.getAttribute('type') === 'text'
) {
  console.log('element is an input of type text');
} else {
  console.log('element is NOT an input of type text');
}

The code for this article is available on GitHub

You could get a null value back if you provide a non-existent id to the getElementById method or a non-existent selector to the querySelector method.

The optional chaining (?.) operator allows us to short-circuit if the reference points to a null or an undefined value.

Instead of throwing an error, the operator short-circuits returning undefined.

The else block runs in all three examples and no error is thrown.

# Check if an Element is a Select dropdown using JavaScript

Use the tagName property to check if an element is a select dropdown.

The tagName property returns the tag name of the element on which it was accessed. Note that the property returns tag names of DOM elements in uppercase.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <select name="fruits" id="fruit-select">
      <option value="">--Choose an option--</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="kiwi">Kiwi</option>
    </select>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const select = document.getElementById('fruit-select');

if (select.tagName === 'SELECT') {
  console.log('✅ element is a select dropdown');
} else {
  console.log('⛔️ element is not a select dropdown');
}

check if element is select dropdown

The code for this article is available on GitHub

The tagName property returns the tag name of the element on which it was accessed.

It should be noted that DOM element names are upper-cased. For example, if accessed on a div element, the tagName property would return "DIV".

index.js

Copied!
const select = document.getElementById('fruit-select');
console.log(select.tagName); // 👉️ "SELECT"

You could use the String.toLowerCase() method to convert the tag name to lowercase.

index.js

Copied!
const select = document.getElementById('fruit-select');

if (select.tagName.toLowerCase() === 'select') {
  console.log('✅ element is a select dropdown');
} else {
  console.log('⛔️ element is not a select dropdown');
}

The code for this article is available on GitHub

This approach is a bit more intuitive because readers of your code might get confused by the capitalized SELECT string.

If you need to make sure that the value stored in the select variable is not null or undefined before accessing the tagName property, use optional chaining.

index.js

Copied!
const select = null;

if (select?.tagName?.toLowerCase() === 'select') {
  console.log('✅ element is a select dropdown');
} else {
  console.log('⛔️ element is not a select dropdown');
}

You could get a null value back if you provide a non-existent id to the getElementById method or a non-existent selector to the querySelector method.

The optional chaining (?.) operator allows us to short-circuit if the reference points to a null or undefined value.

Instead of throwing an error, the operator short-circuits returning undefined.

In the example above, the select variable has a value of null, therefore the else block is run.

# Check if an Element is a Checkbox using JavaScript

To check if an element is a checkbox:

Use the tagName property to check if the value is an input element.
Verify that the type property on the element has a value of checkbox.
If both conditions are met, the element is a checkbox.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <input type="checkbox" id="subscribe" name="subscribe" />
      <label for="subscribe">Subscribe</label>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const checkbox = document.getElementById('subscribe');

if (
  checkbox.tagName.toLowerCase() === 'input' &&
  checkbox.getAttribute('type') === 'checkbox'
) {
  console.log('✅ element is a checkbox');
} else {
  console.log('⛔️ element is not a checkbox');
}

check if element is checkbox

The code for this article is available on GitHub

The tagName property returns the tag name of the element on which it was accessed.

It should be noted that DOM element names are upper-cased. For example, if accessed on a span element, the tagName property would return "SPAN".

index.js

Copied!
const checkbox = document.getElementById('subscribe');

console.log(checkbox); // 👉️ "INPUT"

This is why we used the String.toLowerCase() method to convert the result to lowercase.

We used the logical AND (&&) operator, which means that both conditions have to be met for the if block to run.

The getAttribute method returns the value of the provided attribute on the element.

If the attribute does not exist on the element, the method returns null or empty string, depending on the browser's implementation.

If you need to make sure that the value stored in the checkbox variable is not null or undefined, use the optional chaining (?.) operator.

index.js

Copied!
const checkbox = null;

if (
  checkbox?.tagName?.toLowerCase() === 'input' &&
  checkbox?.getAttribute('type') === 'checkbox'
) {
  console.log('✅ element is a checkbox');
} else {
  console.log('⛔️ element is not a checkbox');
}

The code for this article is available on GitHub

You could get a null value back if you provide a non-existent id to the getElementById method or a non-existent selector to the querySelector method.

The optional chaining (?.) operator allows us to short-circuit if the reference points to a null or undefined value.

Instead of throwing an error, the operator short-circuits returning undefined.

The checkbox variable stores a null value in the example, therefore the else block is run.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Check if Element is Input or Select dropdown in JavaScript

# Table of Contents

# Check if an Element is an Input using JavaScript

# Check if an Element is a Select dropdown using JavaScript

# Check if an Element is a Checkbox using JavaScript

Borislav Hadzhiev