Input Tag 속성 (1/2)

 

🟦 Input Tag

사용자로부터 데이터를 입력받는 요소로 동작과 제약의 조건을 세밀하게 제어한다.

👉🏻  닫는 태그가 없는 빈 태그(Empty Tag)

 

🔵  <input> 핵심 속성 4가지

 

🔸 autofocus (자동 포커스)

페이지 로드 시 해당 입력 칸에 커서를 자동으로 위치시키는 기능.

• 설명: 사용자가 페이지를 열자마자 바로 입력을 시작할 수 있게 한다.
• 특징: 한 페이지에 하나의 요소에만 적용 가능. (로그인 페이지의 아이디 입력창 등에 주로 사용)

 

🔸 placeholder (안내 문구)

입력하기 전, 입력 칸 안에 안내 문구를 보여주는 기능.

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

 

🔸 readonly (읽기 전용)

사용자가 입력 칸의 내용을 볼 수는 있지만, 수정하지 못하도록 하는 기능.

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

 

🔸 required (필수 입력)

폼 제출 시 반드시 입력해야 하는 필드임을 지정하는 기능.

• 설명: 사용자가 값을 입력하지 않으면, 브라우저에서 자동으로 제출을 막는다. (경고 메시지: 이 필드를 입력하세요)
• 활용: 아이디, 비밀번호, 이메일 등 서비스 이용에 꼭 필요한 정보에 사용한다.

 

 

📍  POINT 📍 

✔️ readonly 는 disabled 과 비슷해 보이지만, disabled 는 서버로 데이터가 전송되지 않는다. ✔️

✔️ required 는 자바스크립트 없이도 기본적인 입력 검증을 수행해 주어 매우 효율적이다. ✔️

✔️ placeholder 는 간단하고 명확한 안내에 적합하다. ✔️

 

 

📋 인풋 태그 속성 요약표 📋

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

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<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>