• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery Input Selector Example

May 26, 2014 //  by Krishna Srinivasan//  Leave a Comment

This tutorial explains usage of input selector in jQuery. The input selector selects all the input elements in the document. It selects only form elements that can be represented as text box, password box, radio button, check box, submit button and reset button elements. The input element is used to create interactive controls for web based forms. It is written as “: input”, it must start with colon preceding with tag name.

JQuery Input Selector Syntax

[code lang=”xml”] $(“:input”)
[/code]

JQuery Input Selector Example

[code lang=”xml”] <!doctype html>
<head>
<title>JQuery Input Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Input Selector Example</h2>
<style>
input:valid
{
background: lightpink;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(":input").css("border","2px solid green");
});
</script>
<body>
<form>
<fieldset>
<legend>User Details</legend>
<p>Name : <input type="text" name="uname"/></p>
<p>Password: <input type="password" name="pwd"/></p>
<p>Email : <input type="email" name="address"/></p>
<p>Gender : <input type="radio" name="option" value="male"/>Male
<input type="radio" name="option" value="female"/>Female</p>
<p> Select your hobbies: <input type="checkbox" name="option1" value="Cricket"/>Cricket
<input type="checkbox" name="option1" value="Football"/>Football
<input type="checkbox" name="option1" value="Hockey" checked/>Hockey</p>
<input type="button" value="Submit"/>
<input type="button" value="Reset"/>
</fieldset>
</form>
</body>
</html>
[/code]
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“:input”).css(“border”,”2px solid green”); line defines input selector which selects all the elements of type input. It uses CSS style property to set all input elements border with green color.
  • The :valid selector allows to select input elements that contain valid content determined by its type attribute.

JQuery Input Selector Demo

When you run the above example, you would get the following output:

  • Run Input Selector Demo

JQuery Input Selector Example

Category: jQueryTag: JQuery Selectors

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Eclipse Tips : How To Configure MySql In Eclipse
Next Post: JQuery Multiple Attribute Selector Example jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact