본문으로 건너뛰기

<input> 입력 태그

input 입력 태그

웹 페이지에서 사용자로부터 정보를 입력받을 때는 <input />를 사용합니다.

예를 들어, 회원 가입 페이지에서 아이디나 비밀번호를 입력받을 때 이 input 태그를 사용합니다.


코드 예시:

input 태그
<input type="text" />

input 기본 속성

input 태그는 여러 가지 속성으로 제어할 수 있으며, 크게 type, name, placeholder, value 속성을 사용합니다.

input 태그 기본 속성
<input type="text" name="city" placeholder="도시명을 입력하세요" value="서울" />

input type 속성

input은 사용자로부터 여러 가지 type의 정보를 입력받을 수 있습니다.

  • text: 일반 텍스트 입력

  • password: 비밀번호 입력. 입력된 내용이 별표(*)로 표시

  • checkbox: 체크박스 형태로 선택 항목 제공

type에 따라 input의 동작과 모양이 달라집니다.


코드 예시:

input 태그 type 속성
<input type="text" placeholder="텍스트 입력" />

<input type="password" placeholder="비밀번호 입력" />

<input type="checkbox" name="subscribe" value="yes" /> 뉴스레터 구독하기

name, placeholder

  • name: 이 input의 이름을 정의해요. 보통 폼을 제출할 때 서버로 전송되는 이름을 정의합니다.

  • placeholder: 입력란에 미리보기 텍스트를 표시합니다. 사용자에게 어떤 정보를 입력해야 하는지 힌트를 줄 수 있습니다.


value와 기본값 설정

input에 기본값을 설정하려면 value 속성을 사용합니다. value 속성을 사용하면 사용자에게 기본값을 제안하거나, 미리 정의된 값을 제공할 수 있습니다.


코드 예시:

input 태그 value 속성
<input type="text" name="city" value="서울" />

input은 "서울"이라는 기본값을 갖고 시작합니다.


코드의 별표로 강조된 부분을 따라 입력해 보세요.