-
Notifications
You must be signed in to change notification settings - Fork 0
/
aula11_Seletores-formularios.html
83 lines (62 loc) · 2 KB
/
aula11_Seletores-formularios.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
<head>
<title>JQuery: Seletores de formulários</title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<style type="text/css">
.test{
border: 2px solid blue;
padding: 5px;
}
</style>
<script type="text/javascript">
/* https://api.jquery.com/category/selectors/form-selectors/ */
//quero a regra do css pra TODOS OS <input>
/*$(document).ready(function(){
$(':input').css('background-color','#f0f0f0');
})*/;
//quero adicionar a classe 'test' nos controles:
/* $(document).ready(function(){
$(':button').addClass('test');
$(':checkbox').addClass('test');
$(':file').addClass('test');
});*/
// todo elemento que está 'checado' (checked) terá a borda vermelha
// <input type="checkbox" checked>A
// segundo: todo elemendo selecionado 'selected' com borda
// Select: <select>
// <option selected="selected">Portugal</option>
// disabled="disabled"
$(document).ready(function(){
$(':checked').css('background', 'yellow');
$(':selected').css('border', '5px solid red');
$(':disabled').css('background-color', 'pink');
});
</script>
</head>
<body>
<form>
Nome: <input type="text"/><br/>
<br/>
Senha: <input type="password" disabled="disabled"/><br/>
<br/>
Radio: <input type="radio" name="s"/> Masc
<input type="radio" name="s"/> Fem<br/>
<br/>
File: <input type="file"/><br/>
<br/>
Checks <input type="checkbox" checked="checked"/> A
<input type="checkbox"/> B
<input type="checkbox"/> C<br/>
<br/>
Select: <select>
<option>Brasil</option>
<option selected="selected">Portugal</option>
<option disabled="disabled">USA</option>
</select><br><br/>
<textarea></textarea><br><br/>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
<input type="button" value="Button"/>
</form>
</body>
</html>