HTML에서 기본값 선택

이 글에서는 HTML 드롭다운에서 특정 옵션을 처음부터 선택된 상태로 만드는 방법을 설명합니다. <select> 안에서 원하는 <option>에 selected 속성을 넣으세요. 속성에 값을 명시하거나 값 없이 불리언 형식으로 쓸 수 있습니다. 아래 두 예제는 옵션과 값을 동일하게 구성했으므로 두 표기법을 바로 비교할 수 있습니다.

selected="selected"로 기본 옵션 설정하기

페이지가 처음 로드될 때 선택할 옵션의 시작 태그에 selected="selected"를 작성하세요. 이 속성은 <option>에 넣어야 하며, <select>에 넣거나 별도의 <selected> 태그로 작성하면 안 됩니다. 이 예제에서는 세 번째 옵션이 처음에 선택되고, 제출되는 값은 3입니다.

선택된 옵션은 목록에서 원래 위치를 유지합니다. 이 속성은 초기 선택 상태를 지정할 뿐, 해당 옵션을 다른 선택 항목보다 위로 옮기지 않습니다. 페이지를 이용하는 사람은 다른 옵션을 선택할 수 있으며, 그러면 그 옵션이 현재 선택 항목이 됩니다.

name 속성은 컨트롤의 폼 필드 이름을 지정하고, 선택된 옵션의 value는 폼을 제출할 때 해당 필드에 전달되는 값을 제공합니다. for와 id 값이 일치하도록 연결하면 레이블이 컨트롤에 연결되므로, 보조 기술을 사용하는 사람도 선택 값을 이해할 수 있습니다. 페이지에서 다른 항목을 처음 선택된 상태로 표시하려면 selected 속성을 그 옵션으로 옮기세요.

다음 HTML은 정적인 마크업 예제입니다. 페이지의 소스 코드를 보여 주며, 실행 결과는 아닙니다.

<label for="number">Choose a number:</label>
<select id="number" name="number">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected="selected">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

이 실행 가능한 JavaScript 예제는 마크업에 나온 옵션 값을 모델링하고 selected로 표시된 옵션의 값을 보여 줍니다. 브라우저에서의 동작은 위 HTML 예제가 설명합니다.

const options = [
  { value: "1", selected: false },
  { value: "2", selected: false },
  { value: "3", selected: true },
  { value: "4", selected: false },
  { value: "5", selected: false },
];

const initialValue = options.find((option) => option.selected).value;
console.log(initialValue);

3

불리언 selected 속성 사용하기

selected는 불리언 속성입니다. 속성이 있으면 해당 옵션이 처음에 선택된 상태가 됩니다. HTML에서는 selected처럼 값을 생략하거나, 위에서 본 명시적 형식인 selected="selected"로 쓸 수 있습니다. 여기서는 두 표기법이 같은 선택 상태를 나타내며, 속성 이름은 selected 그대로 써야 합니다.

이 대응 예제에서는 두 번째 옵션이 처음에 선택됩니다. 이 옵션의 value는 2이고, 독자에게 표시되는 텍스트는 Two입니다. 각 옵션에 value를 지정하면 폼에 전달되는 값과 화면에 표시되는 레이블을 구분할 수 있습니다. 독자가 선택을 바꾸기 전에 폼을 제출하면 선택된 옵션의 값이 제출됩니다.

HTML을 간결하게 작성하려면 이 불리언 형식을 사용하세요. 선택하려는 옵션 하나의 시작 태그 안에 속성을 넣으면 됩니다. 옵션 뒤에 <selected>를 작성하지 마세요. 그것은 속성 표기법이 아닙니다. 옵션은 목록에 표시된 위치를 유지하며, 독자는 다른 값을 선택할 수도 있습니다.

이 예제도 정적인 마크업이며, 실행 결과를 나열한 것이 아닙니다.

<label for="number-short">Choose a number:</label>
<select id="number-short" name="number">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>