La tarea es encontrar todas las entradas que son descendientes (hijo o nieto) de un formulario y marcarlas con un borde rojo punteado usando jQuery.
Métodos y selectores utilizados:
- selector padre descendiente : este selector se utiliza para seleccionar todos los elementos que son descendientes de un elemento especificado.
Sintaxis:
("parent descendant")
-
Método css(): este método se utiliza para establecer o devolver una o más propiedades de estilo para los elementos seleccionados.
Acercarse:
- Cree la página HTML con el elemento de formulario con sus componentes como conjunto de campos o entradas, etc.
- Seleccione la entrada del elemento de formulario utilizando el selector de descendientes principal .
- Al final, aplique algunos estilos CSS para mostrar un resultado apropiado.
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA