[attribute] HTML - multiple 속성 ★ - 복수 (파일업로드/이메일입력/옵션선택) 허용 (= multiple속성 = 멀티플속성) ※ 1개 이상의 여러 데이터 허용

1. multiple 예제 - <input type="file"> 경우
2. multiple 정의
3. multiple 구문
4. multiple 예제 - <input type="email"> 경우
5. multiple 예제 - <select> 경우

multiple 예제 - <input type="file"> 경우

 

<form action="/action_page.php">

  <label for="files">파일선택(복수가능):</label>

  <input type="file" id="files" name="files" multiple><br>

  <input type="submit" value="확인">

</form>

 

결과보기

multiple 정의

 

복수(= 1개 이상의 여러)의 (파일업로드/이메일입력/데이터선택) 허용하는 참거짓 속성.

 

---

 

1. multiple 속성 사용 가능 태그 종류

<input>, <select>

• <input> 태그 경우, (file/email) 타입만 사용 가능.

 

2. <input type="file">, <select> 경우, 복수 선택 방법

• 윈도우(Windows): (Ctrl키 또는 Shift키) + 클릭
• 맥 (Mac): Command키 + 클릭

 

3. <input type="email> 경우, 복수 선택 방법

각 이메일은 콤마(,)로 구분 나열. (예) ,

 

4.

여러 데이터 입력받을 때, <select multiple> 대신 <input type="checkbox"> 사용 권장. (∵ <select multiple> 방식 경우 OS마다 멀티선택 방식도 다르고, 사용자에게 여러 데이터 선택 가능하다는 사실을 별도로 알려야 하기 때문.)

 

5.

• <input> 경우, IE10 이상 주요 최신 브라우저 지원.
• <select> 경우, 모든 브라우저 지원.

 

multiple 구문

 

• <input type="file" multiple>
• <input type="email" multiple>
• <select multiple>

 

---

[속성값]

 

없음.

 

multiple 예제 - <input type="email"> 경우

 

<form action="/action_page.php">

  <label for="emails">이메일(콤마로 구분해 복수 입력 가능):</label><br>

  <input type="email" id="emails" name="emails" multiple><br>

  <input type="submit" value="확인">

</form>

 

결과보기

multiple 예제 - <select> 경우

 

<form action="/action_page.php">

  <label for="langs">언어선택(복수가능):</label>

  <select name="langs" id="langs" multiple>

    <option value="html">html</option>

    <option value="css">css</option>

    <option value="js">js</option>

    <option value="jquery">jquery</option>

  </select>

  <br><br>

  <input type="submit" value="확인">

</form>

 

결과보기

---

PS. <input type="checkbox">로 여러 데이터 입력 받기

<?php

$langs = isset($_GET['langs']) ? $_GET['langs'] : array();

for($i=0; $i < count($langs); $i++){

    echo $langs[$i] . "<br/>";

}

?>

<?php if(!$langs) { ?>

<form method="get">

    <input type="checkbox" name="langs[]" id="html" value="html">

    <label for="html">html</label><br>

    <input type="checkbox" name="langs[]" id="css" value="css">

    <label for="css">css</label><br>

    <input type="checkbox" name="langs[]" id="js" value="js">

    <label for="js">js</label><br>

    <input type="checkbox" name="langs[]" id="jquery" value="jquery">

<label for="jquery">jquery</label><br>

    <input type="submit" value="확인">

</form>

<?php } ?>