JQuery Form Elements Selector
From w3cyberlearnings
| Selector | jQuery Example | Description |
| :input | $(':input').css('border','2px solid blue'); | All input elements |
| :text | $(':text').css('border','2px solid blue'); | All input elements with type="text" |
| :password | $(':password').css('border','2px solid blue'); | All input elements with type="password" |
| :button | $(':button').css('border','2px solid blue'); | All input elements with type="button" |
| :image | $(':image').css('border','2px solid blue'); | All input elements with type="image" |
| :file | $(':file').css('border','2px solid blue'); | All input elements with type="file" |
| :checkbox | $(':checkbox').css({'color':'#fff','background-color':'blue'}); | All input elements with type="checkbox" |
| :radio | $(':radio').wrap('<span style="background-color:red"/>'); | All input elements with type="radio" |
| :reset | $(':reset').css('border','2px solid blue'); | All input elements with type="reset" |
| :submit | $(':submit').css('border','2px solid blue'); | All input elements with type="submit" |
Example TRY-IT
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Profile List</title>
<script
type="text/javascript"
src="jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(':password').css('border','2px solid blue');
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="age"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="NAME_VALUE" value="VALUE"/>Label 1 <br/>
<input type="checkbox" name="NAME_VALUE" value="VALUE"/>Label 2
</td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" name="RNAME_VALUE" value="VALUE1"/>1 Label<br/>
<input type="radio" name="RNAME_VALUE" value="VALUE2"/>2 Label<br/>
<input type="radio" name="RNAME_VALUE" value="VALUE3"/>3 Label<br/>
<input type="radio" name="RNAME_VALUE" value="VALUE4"/>4 Label<br/>
<input type="radio" name="RNAME_VALUE" value="VALUE5"/>5 Label<br/>
</td>
</tr>
<tr>
<td>Password 1</td>
<td><input type="password" name="pass1"/></td>
</tr>
<tr>
<td>Password 2</td>
<td><input type="password" name="pass2"/></td>
</tr>
<tr>
<td></td>
<td><button type="button">Process Now</button></td>
</tr>
<tr>
<td></td>
<td><input type="file" name="myfile" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit"/></td>
</tr>
<tr>
<td></td>
<td><input type="reset" name="rest" value="Reset"/></td>
</tr>
</table>
</form>
</body>
</html>
Related Links
Jquery and HTML Elements
