HTML multiple 속성 완벽 가이드 – 하나의 필드에서 여러 값 입력하기

HTML의 multiple 속성은 사용자가 하나의 요소에서 두 개 이상의 값을 선택하거나 입력할 수 있도록 해주는 기능입니다. 이 속성은 <input> 요소와 <select> 요소에만 적용할 수 있다는 점을 기억하세요.

multiple 속성이란?

multiple 속성은 불리언(Boolean) 속성으로, 별도의 값을 지정하지 않고 속성 이름만 작성하면 활성화됩니다.

<select> 요소에 사용하면: 드롭다운 목록에서 여러 항목을 동시에 선택할 수 있습니다. (Ctrl 또는 Cmd 키를 누른 채 클릭)
<input type="file">에 사용하면: 파일 업로드 시 여러 개의 파일을 한 번에 선택할 수 있습니다.
<input type="email">에 사용하면: 쉼표(,)로 구분하여 여러 개의 이메일 주소를 입력할 수 있습니다.

문법(Syntax)

multiple 속성의 기본 문법은 다음과 같습니다.

<tagname multiple></tagname>

속성값 없이 태그 안에 'multiple'만 추가하면 되므로 사용법이 매우 간단합니다.

예제 코드

아래는 <select> 요소에 multiple 속성을 적용하여, 사용자가 좋아하는 과목을 여러 개 선택할 수 있게 만든 예제입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML multiple 속성 데모</h1>
<p>좋아하는 과목을 선택하세요:</p>
<select multiple>
<option>물리학</option>
<option>화학</option>
<option>생물학</option>
<option>수학</option>
<option>독일어</option>
</select>
</body>
</html>

실행 결과

위 코드를 실행하면 여러 항목이 표시된 선택 목록이 나타나며, 사용자는 Ctrl(Windows) 또는 Cmd(Mac) 키를 누른 상태에서 클릭해 여러 과목을 동시에 선택할 수 있습니다.

HTML multiple 속성 완벽 가이드 – 하나의 필드에서 여러 값 입력하기

정리

multiple 속성은 폼(form)에서 사용자 경험을 크게 향상시킬 수 있는 유용한 도구입니다. 특히 파일 업로드, 관심사 선택, 수신자 지정 등 여러 값을 받아야 하는 상황에서 활용도가 높으니, <input>과 <select> 요소와 함께 적극적으로 사용해 보세요.