? jQuery Form Selectors

? Quick Overview

jQuery Form Selectors are special selectors used to select form elements such as input fields, textboxes, checkboxes, radio buttons, and select dropdowns easily.

? Key Concepts

Select form elements based on type and state
Work with checked, disabled, enabled inputs
Simplify form validation and manipulation

? Syntax / Theory

Form selectors allow you to directly target form-related elements without complex CSS selectors.

:input – Selects all input, textarea, select, button
:text – Selects text inputs
:password – Selects password fields
:radio, :checkbox
:checked – Selects checked inputs
:disabled, :enabled
:selected – Selects selected options

? Code Example

? View Code Example

// Select all form elements
$(":input").css("border","2px solid blue");

// Highlight checked checkboxes
$(":checked").css("background","yellow");

// Disable all text inputs
$(":text").prop("disabled", true);

? Live Output / Explanation

All input elements receive a blue border. Checked elements are highlighted, and text inputs become disabled.

? Interactive Example

? View Code Example

// Show selected option value
$("select").change(function(){
alert($(this).val());
});

? Use Cases

Form validation
User input highlighting
Dynamic enable/disable of fields
Handling user selections

✅ Tips & Best Practices

Use form selectors for cleaner code
Combine with events like change and submit
Avoid overusing global selectors in large forms

? Try It Yourself

Highlight only enabled inputs
Count checked checkboxes
Disable a submit button until all fields are filled