Form Selectors
In this page:
Input Selector
':input' matches every form control on the page, including textareas, selects, and buttons, not just <input> tags. It's the broadest of jQuery's form-related selectors.
Example: Input Selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input><textarea></textarea><button>Go</button>
<script>
console.log($(":input").length);
</script>
</body>
</html>Text Input Selector
The ':text' selector narrows that down to just single-line text inputs, ignoring every other control type like checkboxes or buttons. It's shorthand for input[type="text"] but slightly slower since it can't use a native browser lookup.
Example: Text Input Selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="text"><input type="checkbox">
<script>
console.log($(":text").length);
</script>
</body>
</html>Password Selector
The ':password' selector targets only password fields, which is useful when you need to validate or mask that specific input differently from regular text fields.
Example: Password Selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="password"><input type="text">
<script>
console.log($(":password").length);
</script>
</body>
</html>Checkbox and Radio
':checkbox' and ':radio' let you select those specific control types directly, which is often paired with .prop(checked) to read or set whether they're currently selected.
Example: Checkbox and Radio
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="checkbox" checked><input type="radio">
<script>
console.log($(":checkbox").prop("checked"));
</script>
</body>
</html>Submit and File
jQuery also provides ':submit' for submit buttons and ':file' for file-upload inputs, rounding out the full set of form-control selectors you can target individually.
Example: Submit and File
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="submit"><input type="file">
<script>
console.log($(":submit").length, $(":file").length);
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: