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