Guidelines
Practice
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="기본값">
코드의 별표로 강조된 부분을 따라 입력해 보세요.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help