jQuery :input Selector

What You’ll Learn

The :input selector matches every form control — input, textarea, select, and button elements — in one expression. jQuery extension since 1.0; official demo counts controls versus form children.

Introduction

Forms mix many control types — text fields, checkboxes, dropdowns, textareas, and buttons. When you need to style every control, disable a whole form, or count editable fields, listing each type separately is tedious. jQuery’s :input pseudo-class selects all form controls at once.

jQuery has supported :input since version 1.0. Official documentation states it selects all input, textarea, select, and button elements — basically every form control. Because it is a jQuery extension, prefer $("#form :input") or $("form *").filter(":input") over scanning the entire document with bare $(":input").

Understanding the :input Selector

:input matches these element types:

• <input> (text, checkbox, radio, file, button, hidden, etc.) → matches.
• <textarea> → matches.
• <select> → matches.
• <button> → matches.
• <label>, <fieldset>, <option> alone → no match.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":input" )

// typical usage:
$( ":input" )
$( "form :input" )
$( "#signupForm :input" )

// performance pattern — CSS scope, then filter:
$( "form *" ).filter( ":input" )

// NOT the same as input tag selector:
$( "input" )   // input tags only

Parameters

• None — :input takes no arguments. It always means form controls (input, textarea, select, button).

Return value

• A jQuery object containing every matched form control in document order within the search scope.
• Empty collection when no controls exist in scope.

Official jQuery API example

var allInputs = $( ":input" );
var formChildren = $( "form > *" );
$( "#messages" ).text(
  "Found " + allInputs.length + " inputs and the form has " +
  formChildren.length + " children."
);

Examples Gallery

Example 1 follows the official jQuery :input count demo. Examples 2–5 cover scoped .filter(":input"), comparison with the input tag, disabling all controls, and uniform styling.

var allInputs = $( ":input" );
var formChildren = $( "form > *" );
$( "#messages" ).text(
  "Found " + allInputs.length + " inputs and the form has " +
  formChildren.length + " children."
);

#messages → "Found N inputs and the form has M children."
N counts input + textarea + select + button; M is direct form child elements

var count = $( "#signupForm *" ).filter( ":input" ).length;
$( "#report" ).text( "Controls in #signupForm: " + count );

#report shows control count inside #signupForm only
Controls outside the form are excluded

console.log( ":input →", $( "form :input" ).length );
console.log( "input tag →", $( "form input" ).length );

:input → 5 (includes textarea, select, button)
input tag → 2 (text + checkbox only)

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

All controls in #lockedForm → disabled (grayed out)
Other form on page → still editable

$( "fieldset :input" ).css({
  width: "100%",
  boxSizing: "border-box",
  marginBottom: "8px"
});

Text input, textarea, select, and button → full width in fieldset
Labels unchanged

🚀 Common Use Cases

• Form audit — count controls with $("form :input").length as in the official demo.
• Read-only mode — .prop("disabled", true) on all :input in a form.
• Uniform styling — one CSS pass for inputs, textareas, selects, and buttons.
• Validation setup — attach handlers to every control in a wizard step.
• Reset helpers — iterate form :input to clear values (with type checks).
• Performance — $("#form *").filter(":input") instead of document-wide scans.

📝 Notes

• Available since jQuery 1.0 — jQuery extension, not native CSS.
• Matches input, textarea, select, and button — all form controls.
• Not the same as $("input") — tag selector is narrower.
• Prefer scoped queries — form :input or .filter(":input").
• Does not match option elements unless they are also inputs (they are not).
• Pair with :enabled, :disabled, or :checked for state filters.

💡 Best Practices