How to find all inputs that are descendants of a form and mark them with a dotted red border in jQuery ?

How to find all inputs that are descendants of a form and mark them with a dotted red border in jQuery ?

Last Updated : 27 Apr, 2021

The task is to find all the inputs that are descendants (child or grandchild) of a form and mark them with a dotted red border using jQuery.

Methods and selectors used :

parent descendant selector: This selector is used to select all elements that are descendants of a specified element.
Syntax:
```
("parent descendant")
```
css() method: This method is used to set or return one or more style properties for the selected elements.

Approach:

Create the HTML page with the form element with their components like fieldset or inputs, etc.
Select the input of the form element using the parent descendant selector.
In the end, apply some CSS styling to show an appropriate result.

Example:

HTML

<!DOCTYPE html>
  <html>
  <head>
  <script src=
"https://code.jquery.com/jquery-git.js">
  </script>
  <meta charset="utf-8">
  <meta name="viewport" 
        content="width=device-width">
 
  <style>
      body{
          text-align:center;
          font-size:20px;
      }
     form {
        border: 5px green solid;
        padding: 2px;
        margin: 0;
        background: lightgreen;
     }
    div {
      color: red;
     }
    fieldset {
        margin: 1px;
        padding: 3px;
    }

  </style>
  </head>
  <body>
      <h2 style="color:green">GeeksforGeeks</h2>
  <form >
  <fieldset>
    
     <label for="fname">
       First name:</label>
     <br>
     <input type="text" id="fname" 
            name="fname" value="">
     <br>
     <label for="lname">
       Last name:</label>
     <br>
     <input type="text" id="lname" 
            name="lname" value="">
     <br>
     <label for="email">
       Enter your email:</label>
     <br>
     <input type="email" id="email" 
            name="email">
     <br>
     <label for="birthday">
       Birthday:</label>
     <br>
     <input type="date" id="birthday" 
            name="birthday">
     <br>
     <label for="quantity">
        Number:</label>
     <br>
     <input type="number" id="quantity" 
            name="quantity" min="1" max="5">
     <br>
     <input type="submit" value="Submit">
  </fieldset>
  </form>  
  
  <script>
      $( "form input" ).css( "border", "2px dotted red");
  </script>
  </body>
  </html>

Output:

How to find all inputs that are descendants of a form and mark them with a dotted red border in jQuery ?

B

bhaluram18

Improve

Article Tags :

Similar Reads

How to find all button inputs and mark them using jQuery ?

jQuery is a small and fast JavaScript library with a motto: "Write Less And Do More". To use JQuery you can either download the jquery library on your local machine or include the jquery library in your HTML code. Keep in mind that before learning JavaScript you have a basic knowledge of HTML, CSS,

How to find all input elements that are enabled using jQuery?

The jQuery " :enabled" pseudo-class selector helps to find all the input element that are enabled. This pseudo-class selector should only be used for selecting HTML elements that support the disabled attribute i.e (<button>, <input>, <textarea>, <select>, <option>, <

How to find all inputs with a value Green and change the text of next sibling span using jQuery ?

The purpose of this article is to find all the inputs with a value "Green" and changes the text of the next sibling span using jQuery. Used Methods - next() method - This method is used to returns the next sibling element of the selected element. text() method - This method is used to returns the te

How to find all inputs that don't have color name and appends text to the span next to it using jQuery ?

Given some input elements and the task is to find all inputs that don't have the name = "color" and append text to the span next to it using jQuery. In simple words, we have to find all the input with the name != "color" and then we have to append some text next to the span element. Used Method: nex

How to append an text message when an input field is modified in jQuery ?

In this article, we will see how to append an element with a text message when an input field is changed in jQuery. To append an element with a text message when the input field is changed, change() and appendTo() methods are used. The change() method is used to detect the change in the value of inp