input 셀렉터

셀렉터 :input는 폼 컨트롤 요소 - 입력 필드, 텍스트 영역, 드롭다운 목록 및 버튼을 선택합니다. 다음 태그들을 참고하세요: input, textarea, button, select. :input는 CSS 스펙에 속하지 않기 때문에, 현대 브라우저에서 성능을 향상시키기 위해서는 먼저 순수 CSS 셀렉터를 사용하여 요소를 필터링한 다음 .filter(':input')를 적용하는 것이 좋습니다.

문법

다음과 같이 폼 컨트롤 요소를 선택합니다:

javascript$(':input');

예시

위에서 설명한 이론에 따라, 모든 폼 컨트롤 요소를 선택하고 length 속성을 사용하여 그 수를 콘솔에 출력해 봅시다. 우리는 모든 13개의 태그가 포함된 것을 볼 수 있을 것입니다:

html<form>
  <input type="button" value="button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>option</option>
  </select>
  <textarea></textarea>
  <button>button</button>
</form>

csstextarea {
  height: 25px;
}

javascriptlet allInputs = $(':input');
console.log('태그 수: ' + allInputs.length);

$('form').submit(function(event) {
  event.preventDefault(); // 폼 제출을 방지합니다
});

함께 보기