[CSS] input[type=text] : CSS 선택자(selector) 문법

Lethargin 2023. 4. 24. 20:28

- 'input'요소 중에서 type이 'text'인 요소를 선택하는 역할임

-input요소에는 type속성으로 다양한 종류의 입력 요소를 생성 가능한데, 이 중에서 text 입력요소를 선택하기 위해 사용
(문서의 구조와 상관없이 type속성이 text인 input요소를 선택할 수 있으므로, 좀더 유연하고 일반적인 코드 작성 가능)

예시1)

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const form = document.querySelector('form')
      
      form.addEventListener('submit', (event) => {
        const text = document.querySelector('input[type=text]')
        if (text.value.indexOf('@') >=0) {
          alert('정상적으로 제출합니다!')
        } else {
          alert('이메일 형식을 입력해주세요!')
          event.preventDefault()
        }
      })
    })
  </script>
</head>

<body>
  <form action="">
    이메일 형식을 입력해주세요!<br>
    <input type="text" name="test" id="">
    <input type="submit" value="글자">
  </form>
</body>
</html>

여기서

const text = document.querySelector('input[type=text]')

=> 문서 내에서 type 속성이 text인 input 요소를 찾아서 이를 text 변수에 할당

+) 추가

-사용자로부터 어떠한 입력을 받을 때 사용하는 요소 : form (입력 양식)

-HTML에서는 input태그, textarea태그, button태그, select태그가 폼양식에 해당함