본문으로 건너뛰기
실습하기

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와 defaultValue​

input 요소에서 value와 defaultValue 속성은 값의 설정 및 초기화를 위해 사용됩니다.

두 속성 모두 <input> 요소의 값을 지정하지만, 동작 방식에는 차이가 있습니다.


value 속성​

  • value 속성은 <input> 요소의 현재 값을 나타냅니다.
  • 페이지 로드 시 value 속성이 설정되면, 초기 값으로 설정됩니다.
  • JavaScript로 value 속성을 변경하면, 입력 필드의 현재 값도 변경됩니다.
  • 사용자가 입력 필드에 값을 입력하거나 변경할 때마다 value 속성 값도 업데이트됩니다.
<input type="text" value="초기값">

defaultValue 속성​

  • defaultValue 속성은 <input> 요소의 기본값을 설정합니다.
  • 페이지 로드 시 설정된 기본값으로 초기화됩니다.
  • 사용자가 입력 필드의 값을 변경해도 defaultValue 속성 값은 변하지 않습니다.
  • 폼이 리셋되면 입력 필드의 값이 defaultValue 속성 값으로 되돌아갑니다.
<input type="text" defaultValue="기본값">

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!