HTML Select 목록 옵션

소개

HTML <option> 태그는 HTML 폼의 드롭다운 목록에서 옵션을 정의하는 데 사용됩니다. <select> 태그 및 <datalist> 및 <optgroup>와 같은 변형에 연결됩니다. 이 태그는 사용자가 선택 목록에서 선택할 수 있도록 돕습니다. 이 랩에서는 <option> 태그를 사용하여 HTML 드롭다운 목록을 구현하는 단계를 안내합니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요소 생성

선호하는 텍스트 편집기에서 index.html이라는 HTML 파일을 생성합니다.

기본 HTML 폼을 생성하는 것으로 시작합니다:

<form></form>

요소 생성 및 옵션 추가

<form> 요소 내부에 드롭다운 목록을 생성할 <select> 요소를 추가합니다.

<form>
  <select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</form>

여기서는 <select> 태그 내부에 value 속성이 "option1", "option2", 및 "option3"으로 설정된 세 개의 <option> 태그를 추가했습니다.

프롬프트 추가

프롬프트 텍스트를 추가해 보겠습니다. <select> 태그 내부에 다음 코드를 추가합니다:

<select>
  <option value="" disabled selected>Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

여기서는 다음과 같은 속성을 가진 새로운 <option> 태그를 추가했습니다:

• value="": 값을 빈 문자열로 설정합니다.
• disabled: 옵션을 선택할 수 없도록 비활성화합니다.
• selected: 드롭다운 목록의 기본 선택 항목을 나타내는 데 사용됩니다.
• <option> 태그 내부의 텍스트는 프롬프트 역할을 합니다.

제출 버튼 추가

폼을 제출하려면 제출 버튼이 필요합니다. <select> 태그 뒤에 다음 코드를 추가합니다:

<form>
  <select>
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <br /><br />

  <input type="submit" value="Submit" />
</form>

파일을 저장하고 웹 브라우저에서 실행하여 드롭다운 목록이 작동하는 것을 확인하십시오.

요약

이 랩에서는 HTML <option> 태그를 사용하여 드롭다운 목록을 만드는 방법을 배웠습니다. HTML 폼을 생성하는 것으로 시작하여 <select> 요소를 추가하고, value 속성을 사용하여 옵션을 추가했으며, 프롬프트 텍스트를 추가했습니다. 마지막으로, 폼을 제출하기 위해 제출 버튼을 추가했습니다. <option> 태그는 동적 HTML 폼을 생성하는 데 중요한 역할을 합니다.