HTML 기타 <input> 태그와 공통 속성 정리

이번 글은 Frontend / Markup structure 영역에서 특정 목적을 가진 <input> 타입과, 대부분의 input 태그에서 공통으로 사용되는 속성들을 정리한다.

앞선 글에서 다룬 text, number, checkbox 같은 기본 입력과 달리, 이번 편의 내용은 실무에서 자주 등장하지만 의미를 정확히 알고 사용해야 하는 요소들이다.

etc input

06_etcinputtag.html

기타 인풋 태그

file

<br><br>

<label for="hdnIp">hidden</label><br>
<input 
  id="hdnIp"
  type="hidden"
>

---

email


제출

1. file

file 타입은 사용자가 파일을 첨부할 수 있도록 해준다.

accept 속성을 이용해 업로드 가능한 파일의 유형을 제한할 수 있다.

multiple 속성을 사용하면 파일 여러 개를 한 번에 선택해 업로드할 수 있다.

2. hidden

hidden 타입은 화면에 보이지 않는 입력 필드다.

사용자로부터 입력받지는 않지만, 폼 전송 시 함께 서버로 전달해야 하는 값을 저장할 때 사용한다.

예를 들어 사용자의 내부 식별 값, 권한 등급, 상태 값 등 사용자가 알아서는 안 되는 정보를 담는 데 활용된다.

3. email

email 타입은 이메일 형식으로 입력하지 않으면 브라우저에서 기본 안내 메시지를 출력한다.

다만 @만 포함해도 통과하는 등 검증이 완벽하지 않기 때문에, 실무에서는 정규 표현식(Regex)을 사용해 추가 검증을 수행하는 경우가 많다.

---

공통 속성

아래 속성들은 대부분의 <input> 태그에서 공통적으로 사용할 수 있는 속성들이다.

common input

07_commoninputtag.html

인풋 요소 공통 속성

value

<br><br>

<label for="afIp">autofocus</label><br>
<input id="afIp" type="text" placeholder="자동 포커스" autofocus>

<br><br>

<label for="roIp">readonly</label><br>
<input id="roIp" type="text" value="읽기만 가능, 전송됨" readonly>

<br><br>

<label for="daIp">disabled</label><br>
<input id="daIp" type="text" placeholder="입력 불가, 전송 안됨" disabled>

<br><br>

<label for="rqIp">required</label><br>
<input id="rqIp" type="text" placeholder="필수 입력" required>

<br><br><br>

<button type="submit">제출</button>

1. value

input 요소에 기본값을 미리 입력해 두는 속성이다.

웹 사이트에서 이전에 입력했던 아이디가 미리 표시되는 것과 같은 개념이다.

placeholder와 달리, value에 설정된 값은 폼 제출 시 서버로 그대로 전송된다.

2. autofocus

페이지가 렌더링될 때 자동으로 특정 input 요소에 포커스를 준다.

로그인 페이지에서 아이디 입력창에 커서가 자동으로 깜빡이는 것이 대표적인 예시다.

3. readonly

값을 수정할 수는 없지만, 폼 제출 시 서버로 전송되는 속성이다.

4. disabled

값을 수정할 수도 없고, 폼 제출 시 서버로도 전송되지 않는다.

일시적으로 사용할 수 없는 입력 항목을 표시할 때 주로 사용한다.

5. required

해당 입력값이 반드시 존재해야 폼 제출이 가능하도록 강제하는 속성이다.

---

정리

• file/hidden/email은 목적이 명확한 input 타입이다.
• email은 기본 검증만 제공하므로 추가 검증이 필요할 수 있다.
• value와 placeholder는 전송 여부에서 큰 차이가 있다.
• readonly는 전송됨, disabled는 전송되지 않음이라는 점이 중요하다.
• required는 브라우저 레벨에서 최소한의 입력 검증을 제공한다.