value="" 빈 옵션으로 기본 안내문 구현, != "" 비교로 미선택 처리, option value와 표시 텍스트의 관계
시작 오늘 분석할 코드
<select>는 드롭다운 목록에서 하나를 선택하게 하는 HTML 요소다. 라디오버튼처럼 단일 값을 전송하지만, 항목 수가 많을 때 화면을 훨씬 깔끔하게 만들 수 있다. 빈 value 옵션으로 "미선택" 안내문을 구현하는 패턴이 핵심이다.
form.html — 드롭다운 폼 (행정구역 일부)
<FORMname="form1"method="post"action="view.php"> 행정구역: <SELECTname="prefecture"><OPTIONvalue=""selected>----- 행정구역을 선택하여 주세요. -----</OPTION>// 첫 화면 시 드롭창에서 이게 selected 고정되어 있음<OPTIONvalue="서울특별시">서울특별시</OPTION><OPTIONvalue="부산광역시">부산광역시</OPTION><OPTIONvalue="대구광역시">대구광역시</OPTION>// ... 이하 생략 (전체 17개 시도 + 북한 지명 포함)</SELECT><INPUTtype="submit"value="송신"></FORM>
value=""빈 문자열 value를 가진 option. 안내문 역할 + 미선택 판단 기준
selected 속성페이지 로드 시 기본 선택 상태로 표시할 option에 추가
!= "" 비교select는 항상 값이 전송되므로 빈 문자열 여부로 미선택 판단
$_POST["prefecture"]선택된 option의 value 값. 기본 선택 유지 시 빈 문자열 ""
option 텍스트 vs value사용자에게 보이는 텍스트와 서버로 전송되는 value는 별개로 지정 가능
multiple 속성select에 추가하면 다중 선택 가능. 이 경우 checkbox처럼 name[]가 필요
1 select가 radio보다 나은 상황
항목이 많을 때 드롭다운이 적합한 이유
라디오버튼은 모든 옵션이 화면에 항상 펼쳐져 있어 항목이 3~4개를 넘으면 공간을 많이 차지한다. <select>는 사용자가 클릭할 때만 목록이 펼쳐지므로 항목이 많아도 공간을 적게 차지한다. 이 예시의 행정구역 22개처럼 목록이 길 때 select가 훨씬 낫다.
기술적으로 select도 단일 값을 전송하므로 PHP 처리는 라디오버튼과 동일하다. 다만 체크박스·라디오버튼과 달리 select는 항상 어떤 값이든 전송된다 — 기본 옵션이 선택된 채 제출돼도 그 option의 value가 온다.
radio (항목 22개)
22개 버튼이 모두 펼쳐짐 → 화면 공간 낭비 → 스크롤 필요 → 시각적 부담
select (항목 22개)
한 줄 드롭다운으로 표시 → 클릭 시 목록 펼침 → 공간 효율적 → 깔끔한 UX
2 value="" 빈 옵션의 역할
첫 번째 option이 안내문이면서 유효성 검사 기준이 되는 이유
첫 번째 option의 value=""는 두 가지 역할을 동시에 한다. 하나는 사용자에게 "선택하세요"라는 안내문 표시, 다른 하나는 선택 없이 제출됐을 때 PHP에서 != ""로 걸러낼 수 있는 유효성 검사 트리거다.
<OPTIONvalue=""selected>----- 행정구역을 선택하여 주세요. -----</OPTION>↑ value="" → PHP에서 빈 문자열로 수신 → !="" 조건이 false → "선택하세요" 출력<OPTIONvalue="서울특별시">서울특별시</OPTION>↑ value="서울특별시" → PHP에서 "서울특별시" 수신 → !="" 조건이 true → 값 출력
※ select는 아무것도 선택 안 해도 반드시 어떤 값이 전송된다. 이 점이 체크박스·라디오버튼(미선택 시 키 없음)과 다른 핵심 차이다.
3 isset 대신 != "" 를 쓰는 이유
select는 항상 값이 전송되므로 isset이 의미 없다
체크박스나 라디오버튼은 아무것도 선택 안 하면 $_POST에 키가 없어서 isset()이 필요하다. 하지만 select는 반드시 하나가 선택된 상태로 폼이 제출된다. 기본 option이 선택됐어도 그 value가 전송된다. 따라서 키 존재 확인이 아니라 값이 빈 문자열인지 확인하는 것이 올바른 방법이다.
// select에서 아무것도 고르지 않고 제출 시:$_POST["prefecture"] = ""// 키는 항상 존재, 값만 빈 문자열// 올바른 미선택 처리:if($_POST["prefecture"] != "") // 빈 문자열이 아닌지 확인// 불필요하지만 안전한 형태 (isset 추가해도 문제는 없음):if(isset($_POST["prefecture"]) && $_POST["prefecture"] != "")
⚠ 첫 번째 option의 value를 지정하지 않으면, 해당 option의 텍스트 자체("----행정구역을 선택하여 주세요.----")가 value로 전송되어 != "" 조건이 항상 true가 된다.
반응형
4 option value와 표시 텍스트 분리
사용자에게 보이는 것과 서버로 전송되는 것이 다를 수 있다
option 태그 내부 텍스트는 사용자에게 보이는 라벨이고, value 속성은 서버로 전송되는 실제 데이터다. 이 둘을 분리하면 화면에는 친절한 설명을 보여주면서 서버에는 DB에 저장할 코드를 전송할 수 있다.
<!-- 화면 텍스트와 전송 value가 같은 경우 (이 예시) --><OPTIONvalue="서울특별시">서울특별시</OPTION><!-- 화면 텍스트와 전송 value를 다르게 쓰는 경우 --><OPTIONvalue="11">서울특별시</OPTION>// DB 행정구역코드 "11"<OPTIONvalue="26">부산광역시</OPTION>// DB 행정구역코드 "26"
실무에서 value ≠ 텍스트를 쓰는 대표적 패턴
DB에 저장할 숫자 ID (텍스트: "관리자", value: "1")
짧은 코드 전송 (텍스트: "United States", value: "US")
내부 키값 (텍스트: "배송 준비 중", value: "PENDING")
5 selected 속성 — 기본 선택 상태 지정
페이지 로드 시 어느 option이 미리 선택되게 할 것인가
selected 속성을 가진 option이 페이지 로드 시 기본으로 보인다. 이 예시에서는 "선택하세요" 안내 option에 붙어 있어 폼이 처음 뜰 때 항상 이 항목이 보인다. 만약 어떤 option에도 selected가 없으면 브라우저는 첫 번째 option을 기본으로 선택한다.
<!-- 기본 선택: 안내문 (미선택 상태 유도) --><OPTIONvalue=""selected>선택하세요</OPTION><!-- PHP에서 이전 선택값을 다시 보여주는 패턴 --><?phpforeach($regionsas$r): ?><OPTIONvalue="<?= $r?>"<?phpif($_POST["prefecture"] == $r) echo"selected"; ?>><?= $r?></OPTION><?phpendforeach; ?>
6 자주 하는 실수
실수
증상
해결
첫 option에 value 속성 없음
안내 텍스트 전체가 value로 전송 → != "" 조건 항상 true → 미선택 체크 불가
댓글