안녕하세요.
작은것을 좋은 하는 빅한입니다.
금일은 내용 필터 선택자에 이어서 형식 선택자(Form)에 대해서 알아보겠습니다.
Form 선택자는 하기에 앞서 HTML에서는 Form은 개인적으로 <input>요소의 모음 또는 그룹이라고 생각합니다.
이렇게 생각하는 이유는 대부분 <form>요소는 특정 주제에 대한 입력값들은 받게되는데요. 그 입력값은 대부분 <input>요소로 받기 때문에 그룹이라고 생각하게 된것 같습니다.
그럼 지금부터 Form 선택자에 대하여 정리해보겠습니다.
종류
<input>요소는 몇가지 요소로 나눠질수 있는데요. 주로 'type'이라는 속성으로 구분이 됩니다. 대표적인 text부터 시작해서 checkbox, radio, file, hidden, password, button, image, reset, submit이 있고 <input>요소 외에도 <textarea>, <select>요소 등이 있습니다.
이 들은 일종의 사용자가 입력받기 위한 component인데요. 이들을 그룹화 하기 위해서 <form>요소로 감싸주는 행위를 합니다. 또한 이렇게 감싸주므로 안에있는 데이터들을 다른 곳으로 전송을 하는 역활도 하고 있죠.
그럼 지금부터 이러한 <form>내부에 있는 입력 요소들을 선택하기 위한 방법이 어떤 종류가 있는지 한번 살펴보도록 하겠습니다.
-
:button - 버튼 요소의 모든 요소와 버튼 유형의 요소를 선택
-
:checkbox - 체크박스 유형의 모든 요소 선택
-
:checked - 체크되거나 선택된 모든 요소와 일치한 요소를 선택
-
:disabled - 비활성화된 모든 요소 선택
-
:enabled - 활성화된 모든 요소 선택
-
:file - 파일 유형의 모든 요소를 선택
-
:focus - 현재 포커스가 있는 요소 선택
-
:image - 이미지 유형의 모든 요소 선택
-
:input - 모든 input, textarea, select, button 요소 선택
-
:password - 패스워드 유형의 모든 요소를 선택
-
:radio - 라디오 유형의 모든 요소를 선택
-
:reset - reset유형의 모든 요소를 선택
-
:selected - 선택된 모든 요소를 선택
- :submit - submit 타입인 모든 요소를 선택
-
:text - text 유형의 모든 input 요소를 선택
예제 소스
파일 구성은 다음과 같습니다.
+ root
+ lib
- jquery.js
+ selector
- selector_form.html
예제 파일은 다음과 같습니다.
- selector_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/jquery.js"></script>
<style>
textarea {
height: 35px;
display: block;
}
input, button {
display: block;
}
div {
color: red;
height: 20px;
}
fieldset {
margin: 0;
padding: 0;
border-width: 0;
}
.marked {
background-color: yellow;
border: 3px red solid;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<form>
<fieldset>
<div><input type="button" value="Input Button"></div>
<div><input type="checkbox" disabled="disabled"></div>
<div><input type="file"></div>
<div><input type="hidden" disabled="disabled"></div>
<div><input type="image"></div>
<div><input type="password"></div>
<div><input type="radio"></div>
<div><input type="reset"></div>
<div><input type="submit" onclick="return false;"></div>
<div><input type="text"></div>
<div>
<select>
<option>Option</option>
</select>
</div>
<div><button onclick="return false;">Button</button></div>
<div><textarea></textarea></div>
</fieldset>
</form>
</td>
<td>
<button type="button" id="btn01">:button</button>
<button type="button" id="btn02">:checkbox</button>
<button type="button" id="btn03">:checked</button>
<button type="button" id="btn04">:disabled</button>
<button type="button" id="btn05">:enabled</button>
<button type="button" id="btn06">:file</button>
<button type="button" id="btn07">:focus</button>
<button type="button" id="btn08">:image</button>
<button type="button" id="btn09">:input</button>
<button type="button" id="btn10">:password</button>
<button type="button" id="btn11">:radio</button>
<button type="button" id="btn12">:reset</button>
<button type="button" id="btn13">:selected</button>
<button type="button" id="btn14">:text</button>
</td>
</tr>
</table>
<script>
$(function () {
$('#btn01').click(function(e){
$('div').removeClass('marked');
$('form :button').parent().addClass( "marked" );
});
$('#btn02').click(function(e){
$('div').removeClass('marked');
$('form input:checkbox').parent().addClass( "marked" );
});
$('#btn03').click(function(e){
$('div').removeClass('marked');
$('form input:checked').parent().addClass( "marked" );
});
$('#btn04').click(function(e){
$('div').removeClass('marked');
$('form input:disabled').parent().addClass( "marked" );
});
$('#btn05').click(function(e){
$('div').removeClass('marked');
$('form input:enabled').parent().addClass( "marked" );
});
$('#btn06').click(function(e){
$('div').removeClass('marked');
$('form :file').parent().addClass( "marked" );
});
$('#btn07').click(function(e){
$('div').removeClass('marked');
$('form input').on('focus',function(e){
var $focus = $('form :focus').addClass( "marked" );
setTimeout(function(){
$focus.removeClass('marked')
},1000);
})
});
$('#btn08').click(function(e){
$('div').removeClass('marked');
$('form :image').parent().addClass( "marked" );
});
$('#btn09').click(function(e){
$('div').removeClass('marked');
$('form :input').parent().addClass( "marked" );
});
$('#btn10').click(function(e){
$('div').removeClass('marked');
$('form :password').parent().addClass( "marked" );
});
$('#btn11').click(function(e){
$('div').removeClass('marked');
$('form :radio').parent().addClass( "marked" );
});
$('#btn12').click(function(e){
$('div').removeClass('marked');
$('form :reset').parent().addClass( "marked" );
});
$('#btn13').click(function(e){
$('div').removeClass('marked');
$('form :selected').closest('div').addClass( "marked" );
});
$('#btn14').click(function(e){
$('div').removeClass('marked');
$('form :text').parent().addClass( "marked" );
});
})
</script>
</body>
</html>예제 설명
예제에 있는 버튼 순서로 설명해 나가도록 하겠습니다.
공통적으로 각 버튼의 클릭시 선택자에 의하여 선택된 부모 요소에 marked라는 클래스를 부여하도록 하였습니다.
marked 클래스는 빨간 테두리에 노란 배경을하도록 style을 두었습니다.
:button
버튼 요소의 모든 요소와 버튼 유형의 요소를 선택
결과는 다음과 같습니다.
결과를 보면 'button' 타입이거나 button 요소일 경우 선택된것을 확인할수 있습니다.
주의해야할 점은 버튼들중 'file', 'reset' 타입은 선택되지 않은 것을 볼수 있습니다.
:checkbox
체크박스 유형의 모든 요소 선택
input 요소들중 타입이 checkbox인 요소만 선택된 것을 볼 수 있습니다.
:checked
체크되거나 선택된 모든 요소와 일치한 요소를 선택
input 요소들 중에서 속성으로 checked를 줄수있는 요소들 즉 radio, checkbox와 같은 요소들중에 체크된 요소를 선택하는 것을 볼 수 있습니다.
:disabled
비활성화된 모든 요소 선택
input 요소들 중에서 속성이 비활성화(disabled)인 요소들만 선택된 것을 확인 할수 있습니다.
:enabled
활성화된 모든 요소 선택
':disabled'와 반대로 input 요소들 중에서 속성이 활성화된 요소들만 선택된 것을 확인할수 있습니다.
:file
파일 유형의 모든 요소를 선택
input의 요소들 중에서 타입이 'file'인 요소만 선택된 것을 볼수 있습니다.
:focus
현재 포커스가 있는 요소 선택
input요소들 중 focus인 상태인 요소를 선택된 것을 볼수 있습니다.
focus와 같은 경우는 이벤트를 focus가 활성화 될때 시간간격을 두고 변경 후 일정 시간이 변하면 원래대로 변하도록 하였습니다.
:image
이미지 유형의 모든 요소 선택
input 요소 중 타입이 'image'인 요소만 선택된 것을 확인할수 있습니다.
현재 image는 타입만 준것으로 실제 이미지가 뜨지않아도 선택되는 것을 볼 수 있습니다.
:input
모든 input, textarea, select, button 요소 선택
모든 input 요소를 선택하는 것을 확인 할 수 있습니다.
:password
패스워드 유형의 모든 요소를 선택
input 요소 중에서 타입이 password인 요소가 선택된 것을 볼 수 있습니다.
:radio
라디오 유형의 모든 요소를 선택
input 요소 중에서 타입이 radio인 요소가 선택된 것을 볼 수 있습니다.
:reset
reset유형의 모든 요소를 선택
input 요소 중에서 타입이 reset인 요소가 선택된 것을 볼 수 있습니다.
:selected
선택된 모든 요소를 선택
input 요소 중에서 타입이 select요소중 선택된 요소가 있을 경우 선택되어지는 것을 볼 수 있습니다.
:submit
submit 타입인 모든 요소를 선택
input 요소들 중에서 타입이 submit인 요소들이 선택되어진것을 확인 할수 있습니다.
:text
text 유형의 모든 input 요소를 선택
input 요소 중에서 타입이 text인 요소가 선택된 것을 볼 수 있습니다.
마무리
지금까지 Form에 쓰이는 요소의 선택자에 대하여 알아보았습니다.
궁금하신 내용이나 추가했으면 하는 내용이 있으시면 댓글로 남겨주시면 감사하겠습니다.
여기까지 읽어주셔서 감사합니다.
'Development > JavaScript' 카테고리의 다른 글
| [jQuery] Visibility Filter(가시성 필터) (0) | 2019.12.10 |
|---|---|
| [jQuery] 내용 필터 선택자 (Content Filter) (0) | 2019.09.04 |
| [jQuery] 자식 필터 선택자(Child Filter) (0) | 2019.09.01 |
| [jQuery] 기본 필터 선택자(Basic Filter) (0) | 2019.06.30 |
| [jQuery] 속성 지시자(Attribute Selector) (0) | 2019.05.26 |
