입력태그 <input>

✏️ input 태그

웹브라우저 화면을 통해 사용자가 데이터를 입력할 수 있도록 하는 입력 요소 중 대표적인 요소
input 태그의 핵심은 type 속성!

<input type="데이터 유형">

지정한 type 값에 따라 목적이나 형태가 변경됨

대표적인 input type 예시

• text : 디폴트값, 생략가능, 텍스트 입력
• email : 이메일 입력
• password : 비밀번호 입력, 입력값 자동 마스킹
• search : 검색할 텍스트 입력
• date : 날짜와 시간을 지정

수치를 입력받는 input type 예시

• color : 색깔을 선택
• number : 수치 선택
• range : 수준(달성도) 선택

---

✏️ label 태그

입력 요소에 label을 붙혀서 사용자에게 좀 더 직관적인 입력 요소를 제공함
코드의 가독성 및 명확성 향상

label 태그 사용법

1️⃣ label 태그로 직접 input 태그 감싸기

<label> 라벨명 <input> </label>

2️⃣ id 속성으로 label 연결하기

<label for="id명">
라벨명
</label>
<input id="id명">

---

✏️ placeholder 추가하기

<input type="타입" placeholder="플레이스홀더문구입력">

예시 코드 실행 결과