Input 속성
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 37번째.
텍스트 입력에 유용한 다른 속성들은 다음과 같습니다:
placeholder: 입력 필드에 기대되는 값을 설명하는 짧은 힌트를 제공합니다 (예: "Enter your name").value: 입력 필드의 초기값을 설정합니다.maxlength: 입력 필드에 허용되는 최대 문자 수를 지정합니다.
다음은 placeholder가 있는 텍스트 입력을 만드는 방법의 예입니다:
<input type="text" name="username" placeholder="Enter username">이 예제에서는 이름이 "username"이고 "Enter username"이라는 placeholder가 있는 텍스트 입력 필드가 있습니다. 입력 필드가 비어 있으면 필드 안에 placeholder 텍스트가 표시됩니다. 사용자가 입력을 시작하면 placeholder 텍스트가 사라집니다.
챌린지
쉬움다음 텍스트 입력 필드를 포함하는 폼이 있는 HTML 문서를 작성하세요:
- name이 "firstname"이고 placeholder가 "Enter your first name"인 텍스트 입력 필드.
- name이 "lastname"이고 placeholder가 "Enter your last name"인 텍스트 입력 필드.
- name이 "email"이고 placeholder가 "Enter your email"인 텍스트 입력 필드. 이 입력 필드의 최대 길이를 "50"자로 설정하세요.
치트 시트
텍스트 입력에 유용한 속성들:
placeholder: 입력 필드에 필요한 값을 설명하는 짧은 힌트를 제공합니다value: 입력 필드의 초기값을 설정합니다maxlength: 입력 필드에 허용되는 최대 문자 수를 지정합니다
placeholder가 있는 텍스트 입력의 예:
<input type="text" name="username" placeholder="Enter username">placeholder 텍스트는 입력 필드가 비어 있을 때 표시되며, 사용자가 입력을 시작하면 사라집니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
