jQuery :input Selector

What Is :input?

:input (since jQuery 1.0) selects every form control — input, textarea, select, and button. It is broader than $("input"), which matches only <input> tags. Scope to a form when you can; on large pages prefer $("form *").filter(":input").

$(":input")                     // all form controls
$("form :input")                // controls inside a form
$("form *").filter(":input")    // official performance pattern
$("input")                      // <input> tags only — narrower!

// Avoid on large pages:
$(":input")                     // whole-document scan

How to Use :input

Scope to a form, then count, disable, serialize, or style every control.

1. Prefer $("form :input") over bare $(":input") on large pages.
2. Remember it includes textarea, select, and button — not just input.
3. For speed: $("#form *").filter(":input") (official tip).
4. Use type-specific selectors (:text, :checkbox, …) when you need one kind only.
5. Compare with $("form > *") when labels/fieldsets sit as direct children.

Pseudocode

matches = []
for each element in search context:
    if element.tag is input
       or element.tag is textarea
       or element.tag is select
       or element.tag is button:
        matches.add(element)

return matches

// Faster pattern:
candidates = querySelectorAll("form *")
return filter candidates with :input rules

Cheat Sheet

Keep these facts handy while selecting form controls.

Live Preview

Run different selectors against a small sample form and see how many controls match.

$(":input")
matched: 5

/* input + textarea + select + checkbox + button */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console with jQuery loaded, or use Try It Yourself for a live editor.

var allInputs = $(":input");
var formChildren = $("form > *");

$("#messages").text(
  "Found " + allInputs.length + " inputs and the form has " +
  formChildren.length + " children."
);

Found 5 inputs and the form has 5 children.
:input = controls · form > * = direct children

console.log(":input →", $(":input").length);
console.log("input tag →", $("input").length);
console.log("textarea →", $("textarea").length);
console.log("select →", $("select").length);
console.log("button →", $("button").length);

:input → 5
input tag → 2
textarea → 1
select → 1
button → 1

var $signup = $("#signup :input");
var $login = $("#login :input");

$("#out").text(
  "signup controls: " + $signup.length +
  " · login controls: " + $login.length
);

signup controls: 3 · login controls: 2

var $controls = $("#survey *").filter(":input");

$("#out").text("Filtered controls: " + $controls.length);

// Same idea with a form context:
// $("form").find("*").filter(":input")

Filtered controls: 4
CSS query first → then :input filter

$("#checkout :input").prop("disabled", true);

$("#out").text(
  "Disabled " + $("#checkout :input:disabled").length + " control(s)"
);

Disabled 4 control(s)
Text, select, checkbox, and button are all off

Performance Notes

Official jQuery docs note that because :input is not CSS, it cannot use the querySelectorAll boost. Select with a pure CSS selector first, then .filter(":input").

Key Takeaways