HTML의 accept 속성은 원래 <input> 요소와 <form> 요소 모두에 사용할 수 있었지만, HTML5에서는 <form> 요소의 accept 속성을 더 이상 지원하지 않습니다. 따라서 이 글에서는 <input> 요소의 accept 속성을 중심으로 설명합니다.
<input type="file">을 사용할 때 사용자가 업로드할 수 있는 파일 유형에 필터를 적용하고 싶다면 accept 속성을 활용하세요. 파일 선택 대화상자에서 지정된 형식의 파일만 우선적으로 표시되므로, 사용자 경험과 입력 데이터의 유효성이 크게 향상됩니다.
accept 속성 문법
accept 속성의 기본 문법은 다음과 같습니다.
<input accept="extension|audio/*|video/*|image/*|media_type">
주요 매개변수
- extension: 사용자가 선택할 수 있는 파일 확장자를 지정합니다. (예: .gif, .jpg, .png, .doc)
- audio/*: 모든 오디오(사운드) 파일을 선택할 수 있습니다.
- video/*: 모든 비디오(동영상) 파일을 선택할 수 있습니다.
- image/*: 모든 이미지 파일을 선택할 수 있습니다.
- media_type: 유효한 미디어 타입을 지정합니다. (예: image/png, image/tiff, image/bmp 등)
여러 형식을 동시에 허용하려면 쉼표로 구분하여 지정할 수 있습니다. 예를 들어 accept=".jpg, .jpeg, .png"처럼 작성하면 세 가지 확장자를 모두 허용합니다.
accept 속성 예제
다음은 accept 속성에 파일 유형을 image/png로 지정한 예제입니다.
<!DOCTYPE html> <html> <body> <h2>과목별 등수</h2> <form action=""> <label for="stinfo">학생:</label> <input type="text" id="stinfo"><br> <label for="sub">과목:</label> <input type="text"><br> <label for="rank">등수:</label> <input type="number"><br> <label for="marks">점수:</label> <input type="number"><br><br> <label for="result">결과 성적표 업로드</label><br> <input type="file" name="img" accept="image/png"><br><br> <input type="submit"> </form> </body> </html>
실행 결과
위 예제에서 성적표를 업로드하기 위해 “파일 선택” 버튼을 클릭하면, accept 속성에 “image/png”가 지정되어 있기 때문에 파일 선택 창에 PNG 형식의 파일만 표시됩니다.
참고 사항
accept 속성은 어디까지나 브라우저에 제공하는 힌트(hint)일 뿐이라는 점에 유의해야 합니다. 사용자가 파일 선택 대화상자에서 필터를 직접 변경하면 다른 형식의 파일도 선택할 수 있으므로, 보안과 데이터 무결성을 위해 서버 측에서도 반드시 파일 형식 검증을 함께 수행하는 것이 좋습니다.