jQuery form selectors example

jQuery come with many form selectors to access the form elements more easily and efficiently. Here’s a simple jQuery form selectors reference.

1. TextBox – $(‘input:text’)

To select a textbox


To get the textbox value


To set the textbox value

$('input:text').val("New Text");

2. Password – $(‘input:password’)

To select a password


To get the password value


To set the password value

$('input:text').val("New Text");

3. Textarea – $(‘textarea’)

To select a textarea


To get the textarea value


To set the textarea value

$('textarea').val("New Text in Textarea");

4. Radio Buttons – $(‘input:radio’)

To select a radio button


To get the selected radio button option


To select the first radio button option

$('input:radio[name=radiobutton-name]')[0].checked = true;

More detail…

5. Check Box – $(‘input:checkbox’)

To select a checkbox


To check whether a checkbox is checked


To check a checkbox


To unchecked a checkbox


More detail…

6. Upload File – $(‘input:file’)

To select a file


To get the file value


7. Hidden value – $(‘input:hidden’)

To select a hidden value


To get the hidden value


To set the hidden value

$('input:hidden').val("New Text");

8. Select(dropdown box) – $(‘select’)

To select a dropdown box


To get the selected drop down box value


To set the drop down box value to “China”


More details…

9. Submit button – $(‘input:submit’)

To select a submit button


10. Reset button – $(‘input:reset’)

To select a reset button


jQuery form selectors

<title>jQuery form selector example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">


<h1>jQuery form selector example</h1>

<h2>Message = <label id="msg"></label></h2>

<form name="testing" action="#">
	TextBox : <input type="textbox" value="This is message from textbox" />
	Password : <input type="password" value="This is message from password" />
	TextArea : <textarea>This is message from textarea</textarea>
	Radio : <input name="sex" type="radio" value="Male" checked>Male</input>
	        <input name="sex" type="radio" value="Female">Female</input>
	CheckBox : <input type="checkbox" name="checkme">Check Me</input>
	File : <input type="file"></input>
	Hidden : <input type="hidden" value="This is message from hidden"/>
	Country : <select id="country">
			<option value="China">China</option>
			<option value="United State">United State</option>
	<input type="submit"></input> <input type="reset"></input>

<button id="text">input:text</button>
<button id="password">input:password</button>
<button id="textarea">textarea</button>
<button id="radio">input:radio</button>
<button id="checkbox">input:checkbox</button>
<button id="file">input:file</button>
<button id="hidden">input:hidden</button>
<button id="select">select</button>
<button id="submit">input:submit</button>
<button id="reset">input:reset</button>

<script type="text/javascript">
    $("#text, #password, #hidden, 
          #textarea, #file, #submit, #reset").click(function () {
	  var str = $(this).text();
	  $('input, textarea, select').css("background", "#ffffff");
	  $(str).css("background", "#ff0000");
    $("#radio").click(function () {
	  $('input, textarea, select').css("background", "#ffffff");
    $("#checkbox").click(function () {
	  var str = $(this).text();
	  $('input, textarea, select').css("background", "#ffffff");
	  	$('#msg').html("Checkbox is checked");
	  	$('#msg').html("Checkbox is uncheck");
    $("#select").click(function () {
	  $('input, textarea, select').css("background", "#ffffff");


About the Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.


11 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
6 Comment authors
Mithun PattankaroutletadeljQuery form, 100 Best plugins, tools & tutorials « Zeeshan Akhter10 forms based on jQuery scripts and plug-ins to enhance - Open News Recent comment authors
newest oldest most voted

Hi, I am trying to get the specific fields from specific form. I tried this: jQuery(“form#formname input:text”).css…
But this no works in IE!
If I remove form#formname works! I have more forms in page and I need select only one!

Mithun Pattankar
Mithun Pattankar

This is one place to get all info about form’s & Jquery


Thank you a lot for giving everyone remarkably breathtaking opportunity to read from this website. It really is very nice and also packed with a good time for me personally and my office colleagues to visit your site not less than 3 times in 7 days to read through the new guides you have got. And indeed, I’m just at all times happy with your eye-popping strategies you serve. Some 4 tips in this posting are truly the most impressive we have all had.


thank yooooooooooooooou, :)

jQuery form, 100 Best plugins, tools & tutorials « Zeeshan Akhter

[…] jQuery Form Selectors Example […]

10 forms based on jQuery scripts and plug-ins to enhance - Open News

[…] Source / Demo […]

10 jQuery Form – Accessibility and Functionality | jQuery4u

[…] Source Demo […]

jQuery forms, 100 best

[…] jQuery Form Selectors Example […]

Virendra Dugar
Virendra Dugar

Good Article.

Found another interesting article that explains how to use selectors with different examples.



jQuery form selectors example post for thanx.

jQuery Tutorials

[…] Form selectors examples jQuery selectors for form elements : TextBox, Password, Textarea, Radio Buttons, Check Box, Upload File, Hidden value, Select(dropdown box), Submit button and Reset button. […]