jQuery :reset Selector

What You’ll Learn

The :reset selector matches every <input type="reset"> element — the control that restores a form to its default values. Available since jQuery 1.0; equivalent to [type=reset]; always prefer input:reset over bare :reset.

Introduction

Registration forms, settings panels, and search filters often include a reset button so users can undo edits and return to the starting state. jQuery’s :reset pseudo-class selects every input whose type attribute is reset.

Official jQuery documentation notes that :reset is equivalent to [type=reset], and recommends prefixing with input — bare $(":reset") implies $("*:reset"). When clicked, a reset control triggers the browser’s native form-reset behavior unless you intercept it.

Understanding the :reset Selector

Think of :reset as a shortcut for reset-type inputs only:

• input:reset → every reset button in scope.
• $("#signup input:reset") → reset controls in one form.
• input:button → different type — plain buttons, not reset.
• Clicking reset restores fields to their initial HTML default values.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":reset" )

// recommended — prefix with input:
$( "input:reset" )
$( "form input:reset" )

// equivalent attribute form:
$( "input[type=reset]" )

// native CSS (better performance):
document.querySelectorAll( 'input[type="reset"]' )

// avoid on large pages:
$( ":reset" )   // implies *:reset

Parameters

• No arguments — keeps elements whose type is reset.

Return value

• A jQuery object containing every matching reset input (zero or more).

Official jQuery API example

var input = $( "input:reset" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );

Examples Gallery

Example 1 follows the official jQuery input:reset demo. Examples 2–5 cover attribute equivalence, contrast with other button types, scoped form queries, and the native performance pattern.

var input = $( "input:reset" ).css({
  background: "yellow",
  border: "3px red solid"
});

$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
} );

For this type jQuery found 1.
Reset input styled yellow with red border
Submit, text, and checkbox inputs → unchanged

console.log( "input:reset →", $( "input:reset" ).length );
console.log( "[type=reset] →", $( "input[type=reset]" ).length );

input:reset → 1
[type=reset] → 1 (identical matched set)

$( "input:reset" ).addClass( "reset-highlight" );
$( "input:button" ).addClass( "btn-highlight" );

// :reset → input[type=reset] only
// :button → button tags + input[type=button]

Reset input → class "reset-highlight"
Button input → class "btn-highlight" (separate styling)

$( "#searchForm input:reset" ).addClass( "clear-btn" );

// loginForm reset buttons are not affected

#searchForm reset → .clear-btn class
#loginForm reset → unchanged

$( "input[type='reset']" ).on( "click", function() {
  console.log( "Form will reset to defaults" );
});

// Pure DOM (no jQuery pseudo-class):
document.querySelectorAll( "input[type='reset']" );

Click reset → console logs message
Browser then restores form fields to initial values

🚀 Common Use Cases

• Search filters — style or count input:reset in filter forms.
• Registration wizards — highlight the clear-all control at the bottom.
• Settings panels — confirm before native reset with a click handler.
• Multi-form pages — scope with $("#formId input:reset").
• Accessibility — pair reset inputs with descriptive value or aria-label text.
• Performance — prefer input[type="reset"] in hot paths.

📝 Notes

• Available since jQuery 1.0 — equivalent to [type=reset].
• jQuery extension only — not valid in native querySelectorAll(":reset").
• Always use input:reset — bare :reset implies universal scan.
• Matches input[type="reset"] — not button[type="reset"] (use element + attribute selectors for that).
• Does not match submit, button, text, or checkbox inputs.
• Clicking reset restores the form — use event.preventDefault() if you need custom clear logic instead.

💡 Best Practices