HTML의 multiple 속성은 사용자가 하나 이상의 값을 입력하거나 선택할 수 있도록 허용하는 기능입니다. 이 속성은 별도의 값을 지정하지 않는 불리언(Boolean) 속성이며, <input> 요소와 <select> 요소 모두에서 사용할 수 있습니다.
multiple 속성이란?
HTML 폼에서 여러 파일을 한 번에 업로드하고 싶다면 multiple 속성을 활용하면 됩니다. 사용자가 Ctrl(또는 Mac의 Cmd) 키를 누른 채 클릭하여 여러 파일을 동시에 선택할 수 있게 됩니다.
multiple 속성이 지원하는 입력 타입은 다음과 같습니다.
- file: 여러 개의 파일을 동시에 업로드할 수 있습니다.
- email: 쉼표로 구분하여 여러 개의 이메일 주소를 입력할 수 있습니다.
또한 <select> 요소에 multiple 속성을 추가하면 드롭다운 목록에서 여러 항목을 동시에 선택할 수 있습니다.
사용 예제
아래 코드를 실행하면 multiple 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다. 파일 선택 버튼을 클릭한 후 여러 파일을 선택해 보세요.
<!DOCTYPE html>
<html>
<head>
<title>HTML multiple 속성 예제</title>
</head>
<body>
<form>
<input type="file" name="name" multiple><br><br>
여러 개의 파일을 선택한 후 제출 버튼을 클릭하세요.<br>
<input type="submit" value="제출">
</form>
</body>
</html>정리
multiple 속성은 HTML5에서 도입된 간단하지만 강력한 기능으로, 복잡한 자바스크립트 없이도 다중 파일 업로드나 다중 선택 기능을 손쉽게 구현할 수 있습니다. 파일 업로드 폼이나 이메일 입력 필드를 만들 때 적극적으로 활용해 보시기 바랍니다.