“ <옵션> ” 태그는 사용자가 드롭다운 메뉴 또는 웹 양식의 선택 목록에서 선택할 수 있는 옵션을 정의하는 데 사용됩니다. “ <옵션> ” 태그를 사용하면 개발자가 사용자가 옵션을 선택할 수 있는 옵션 집합을 만들 수 있습니다. 설문 조사, 온라인 쇼핑 사이트, 등록 양식 등 다양한 응용 프로그램에 활용되고 있습니다.
이 문서에서는 실제 예제와 함께 HTML의 옵션 태그를 보여줍니다.
옵션 태그는 무엇이며 HTML에서 어떻게 사용합니까?
옵션 태그는 ' <선택> ' 그리고 ' <데이터 목록> ” 태그. '의 경우 <데이터 목록> ” 태그를 사용하면 브라우저에서 자동 완성할 수 있는 옵션 목록이 생성됩니다. ' 사이의 관계를 더 잘 이해하기 위해 몇 가지 예를 살펴보겠습니다. <옵션> ' 태그를 ' <선택> ' 그리고 ' <데이터 목록> ” 태그:
예제 1: 드롭다운 목록 생성
“ <옵션> ” 태그는 “ <선택> ” 태그를 사용하여 웹 페이지에 드롭다운 목록을 만듭니다. “ <옵션> ” 드롭다운 목록에 각 옵션/목록 항목을 만듭니다. 더 나은 이해를 위해 아래 코드 조각을 따르십시오.
< h2 > 프로그래밍 언어 h2 >
< 상표 ~을 위한 = '프로그램 무기' > 프로그래밍 무기 선택: 상표 >
< 선택하다 ID = '프로그램 목록' >
< 옵션 값 = '' > 옵션을 선택하세요 옵션 >
< 옵션 값 = '씨++' > C++ 옵션 >
< 옵션 값 = '.그물' > 닷넷 옵션 >
< 옵션 값 = 'nodejs' > 노드 js 옵션 >
선택하다 >
위의 코드 조각에서:
- 먼저 “ <레이블> ” 태그는 데이터를 표시하기 위해 사용되며 “ <선택> ” 태그를 사용하여 ~을 위한 ' 기인하다.
- 그 후, “ <선택> ” 태그는 드롭다운 목록에 대한 환경을 만드는 데 사용됩니다.
- 다음으로 “ <옵션> ” 태그는 드롭다운 목록 항목으로 배치할 목록 항목을 생성하는 데 사용됩니다.
드롭다운 목록의 구조를 설정한 후 이제 몇 가지 기본 스타일을 적용해 보겠습니다.
상표 {디스플레이: 블록;
여백 하단: 5px;
}
선택하다 {
패딩: 5px;
테두리 반경: 5px;
폭: 200px;
}
CSS 속성에 대한 설명은 다음과 같습니다.
- 먼저 ' 상표 ” 요소를 추가한 다음 “block” 및 “5px” 값을 CSS “ 표시하다 ' 그리고 ' 여백 바닥 ' 속성.
- 다음으로 “ 선택하다 ” 요소가 선택되고 “5px”, “5px” 및 “200px” 값을 CSS에 제공합니다. 심 ”, “ 경계 반경 ' 그리고 ' 너비 ” 속성, 각각. 이러한 속성은 사용자 가시성을 향상시키는 데 활용됩니다.
위의 코드 스니펫을 실행한 후 웹 페이지는 다음과 같습니다.
위의 출력은 드롭다운이 ' <옵션> ' 태그를 ' <선택> ” 태그.
예제 2: 자동 완성 목록 생성
“ <옵션> ” 태그는 “ <데이터 목록> ” 태그를 사용하여 자동 완성 목록을 만듭니다. '와 함께 사용됩니다. <입력> ” 태그는 자동 완성 목록 내에서 사용할 수 있는 옵션으로 채워집니다. HTML을 사용하여 자동 완성 목록을 생성하는 코드는 아래 코드 스니펫에 나와 있습니다.
< 상표 ~을 위한 = '프로그램 도구' > 또는 유형 프로그래밍 도구: 상표 >< 입력 유형 = '텍스트' ID = '프로그램 도구' 목록 = '도구' >
< 데이터리스트 ID = '도구' >
< 옵션 값 = '씨++' >
< 옵션 값 = '집회' >
< 옵션 값 = '.그물' >
< 옵션 값 = 'PHP' >
< 옵션 값 = '루비' >
< 옵션 값 = '빠른' >
< 옵션 값 = '노드 js' >
< 옵션 값 = '반응' >
< 옵션 값 = '몽고' >
< 옵션 값 = '자바' >
< 옵션 값 = '파이썬' >
데이터리스트 >
위의 코드 조각에서:
- 먼저 '를 추가합니다. <레이블> ” 태그는 HTML 요소와 함께 텍스트를 표시합니다.
- 다음으로 ' <입력> ” 태그는 사용자가 수동으로 채우거나 자동 완성 목록 내에서 사용할 수 있는 옵션으로 자동 채울 수 있습니다.
- 그 후 ' <데이터 목록> ” 태그를 지정하고 “ ID ” 속성 값은 “ 목록 '의 속성 <입력> ” 태그.
- 다음으로 ' <옵션> ” 태그를 '
위의 코드 조각을 실행하면 웹 페이지가 다음과 같이 나타납니다.
출력은 '를 활용하여 자동 완성 목록이 생성되었음을 보여줍니다. <옵션> ” 태그를 '의 조합으로 <데이터 목록> ' 그리고 ' <입력> ” 태그.
결론
“ <옵션> ” 태그를 사용하면 개발자가 사용자가 옵션을 선택할 수 있는 옵션 목록에 대한 옵션을 만들 수 있습니다. 이 “