Input tag property

입력창의 동작과 제약 조건을 세밀하게 제어하는 <input> 태그의 핵심 속성들에 대해 알아보겠습니다.

이 속성들은 사용자가 폼을 작성할 때의 편의성을 높여주고, 잘못된 데이터가 제출되지 않도록 막아주는 중요한 역할을 합니다.

---

1. autofocus (자동 커서 활성화)

페이지가 로드되자마자 해당 입력창에 커서가 자동으로 위치하게 만듭니다.

• 설명: 사용자가 마우스로 입력창을 클릭하지 않아도 바로 타이핑을 시작할 수 있게 돕습니다.
• 특징: 한 페이지 내에서 단 하나의 요소에만 사용할 수 있습니다. 로그인 페이지의 아이디 입력창 등에 주로 쓰입니다.

---

2. placeholder (안내 문구)

입력창이 비어 있을 때, 무엇을 입력해야 할지 알려주는 힌트를 연한 회색 글자로 표시합니다.

• 설명: 입력창의 용도를 직관적으로 전달하며, 실제 입력이 시작되면 자동으로 사라집니다.
• 주의: placeholder는 보조 수단일 뿐, label 태그를 완전히 대체할 수는 없습니다.

---

3. readonly (읽기 전용)

사용자가 내용을 볼 수는 있지만, 수정할 수는 없게 만듭니다.

• 설명: 서버에서 가져온 고정 데이터(예: 사용자 ID, 고정된 주문 번호)를 보여줄 때 사용합니다.
• 특징: 사용자가 내용을 고칠 수는 없지만, 폼을 제출할 때 그 데이터는 서버로 전송됩니다.

---

4. required (필수 입력)

폼을 제출하기 전, 해당 칸이 반드시 채워져 있어야 함을 브라우저에 알립니다.

• 설명: 이 속성이 붙은 칸이 비어 있으면 브라우저가 "이 필드를 입력하세요"라는 경고 메시지를 띄우며 제출을 막습니다.
• 활용: 아이디, 비밀번호, 이메일 등 서비스 이용에 꼭 필요한 정보에 사용합니다.

---

🖥️ 실전 예제 코드: "사용자 정보 수정 폼"

모든 속성을 적절히 배치하여 실무적인 폼을 구성해 보겠습니다.

HTML

 

<form action="/update-profile" method="post">
  <p>
    <label for="uid">아이디:</label>
    <input type="text" id="uid" name="userid" value="coding_kim" readonly>
  </p>

  <p>
    <label for="uname">이름:</label>
    <input type="text" id="uname" name="username" 
           placeholder="실명을 입력하세요" 
           autofocus 
           required>
  </p>

  <p>
    <label for="uemail">이메일:</label>
    <input type="email" id="uemail" name="useremail" 
           placeholder="example@mail.com" 
           required>
  </p>

  <button type="submit">수정 완료</button>
</form>

---

📋 속성 한눈에 비교하기

속성명	역할	데이터 수정 가능 여부	서버 전송 여부
autofocus	커서 자동 위치	가능	전송됨
placeholder	입력 힌트 표시	가능	입력값 전송됨
readonly	읽기 전용으로 설정	불가능	전송됨
required	필수 입력 체크	가능	전송됨

---

학습 정리

• **readonly**는 disabled 속성과 비슷해 보이지만, **disabled**는 서버로 데이터가 전송되지 않는다는 결정적인 차이가 있다.
• **required**는 자바스크립트 없이도 기본적인 입력 검증을 수행해 주어 매우 효율적이다.
• **placeholder**에 너무 긴 설명을 적기보다는 짧고 명확한 예시를 적는 것이 가독성에 좋다.

---

입력창의 세밀한 동작을 제어하는 4가지 핵심 속성을 완벽히 마스터하셨습니다!

---