html 형식 옵션 메뉴의 옵션 및 optgruop 태그 사용법에 대한 자세한 설명

옵션 태그를 사용하여 양식컨트롤에서 각 항목을 정의하세요. 브라우저는 태그의 콘텐츠를 메뉴 또는 태그의 스크롤 목록에 표시합니다.
valueAttribute

value 속성을 사용하여 각 옵션의 값을 설정합니다. 사용자가 옵션을 선택하면 브라우저가 이를 서버로 보냅니다. value 속성이 지정되지 않은 경우 옵션 값은 태그의 내용으로 설정됩니다. 아래 예에서 HTML 옵션을 살펴보세요.

coption value=dog>dog <option>dog

둘 다 동일한 값을 갖습니다. 첫 번째는 태그에 설정된 값을 출력하고 두 번째는 기본적으로 태그 자체의 내용으로 설정됩니다. "dog"

selected 속성

기본적으로 모든 다중 selected 태그의 옵션은 모두 선택 취소(state)되어 있으므로 클라이언트가 양식을 서버에 올릴 때 이러한 옵션은 매개변수 목록에 포함되지 않습니다. 태그에 선택된 속성을 포함하면 사용자가 하나 이상의 옵션을 미리 선택한 다음 선택 취소할 수 있습니다.

선택한 속성의 HTML 버전에 값이 없습니다. XHTML 버전에는 selected=selected 값이 있습니다. 명시적으로 미리 선택된 옵션이 없으면 라디오의

태그가 첫 번째 옵션을 미리 선택합니다.

label 속성

일반적으로 요소가 사용자에게 표시될 때 태그의 콘텐츠는 요소의 마크업을 생성하는 데 사용됩니다. 그러나 label 속성이 제공되면 해당 값을 라벨로 사용해야 합니다.

태그

양식의 옵션 메뉴는 매우 길어서 표시하고 사용하기 어려울 수 있습니다. 이 경우 일부 관련 옵션 을 그룹화한 다음 이러한 그룹을 중첩된 계단식 메뉴 세트로 사용자에게 제공하는 것이 도움이 될 수 있습니다. 은 HTML 4.0에 새로 도입된 태그입니다. 비록 사용이 제한되어 있지만 HTML 및 XHTML 양식에 이 기능을 제공합니다.

태그 내에서만 사용할 수 있으며 < 태그만 포함할 수 있습니다. 브라우저는 메인 의 각 태그에 대한 하위 메뉴를 생성합니다. 예를 들어 HTML에서는 을 사용하여 장소 이름별로 정렬된 양식 메뉴를 표시할 수 있습니다.

<select name=state>
 <optgroup label=龙岗区>
      <option>布吉镇
      <option>坂田镇
</optgroup>
<optgroup label=宝安区>
      <option>龙华镇
      <option>西乡镇
</optgroup>
</select>

아직

태그를 완벽하게 지원하는 브라우저가 없기 때문에(일반 브라우저에서는 단순히 스크롤 메뉴로 표시됨) 독자에게 그러한 메뉴가 어떻게 보이는지 보여줄 수 없습니다. 그러나 대부분의 그래픽 사용자 인터페이스에서 흔히 사용되는 기능인 친숙한

드롭다운 메뉴

와 매우 유사할 수 있습니다. 마우스나 키보드로 선택하면

예를 들어, "주" 예에는 "북동부" 및 "남부"라는 하위 메뉴가 있을 수 있으며 각 하위 메뉴에는 포함된 주의 목록이 표시됩니다.

안타깝게도

태그의 가장 큰 장애물은 중첩이 불가능하여 하위 메뉴가 한 레이어로만 제한된다는 것입니다. 그러나 XHTML의 향후 버전에서는 이 제한이 초과될 수 있습니다. 사용자에게 표시할

메뉴에서 관련 요소를 함께 정리하세요.

위 내용은 html 형식 옵션 메뉴의 옵션 및 optgruop 태그 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

html option 菜单

원천：php.cn

이전 기사：html: optgroup 태그 사용, 그룹화, 읽기 전용 및 트리 스타일로 표시 다음 기사：HTML China는 카테고리 선택 드롭다운 상자의 Optgroup 태그를 지원합니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• 자신만의 PHP 프레임워크를 처음부터 구축하는 방법에 대한 비디오 자료
  2023-03-15 16:54:01
• PHPMailer가 QQ 메일함을 사용하여 이메일 전송 기능을 완성하는 방법에 대한 분석 예
  2023-03-15 12:26:02
• PHP의 IMAP에서 이메일을 받는 방법 소개
  2023-03-14 18:58:01
• PHP에서 배열 중복 제거를 신속하게 구현하는 방법의 예
  2023-03-14 11:30:01
• HTML에서 태그의 모든 속성 사용 요약
  1970-01-01 08:00:00
• PHP에 대한 기본 지식 요약(초보자가 시작하는 데 필요함)
  2023-03-16 15:20:01
• JavaScript에서 typeof 사용 소개
  1970-01-01 08:00:00
• JavaScript의 verify() 메소드 사용 소개
  1970-01-01 08:00:00
• HTML5 자리표시자 속성에 대한 자세한 소개
  1970-01-01 08:00:00
• ReactJS의 양식에서 단일 선택, 다중 선택 및 역선택을 구현하는 방법
  1970-01-01 08:00:00

최신 이슈

옵션을 표시할 때 matSelect 스타일 수정 옵션이 켜져 있을 때 매트 선택의 속성을 변경하는 방법은 무엇입니까? <mat-selectclass="selector"><mat...

에서 2024-04-05 09:23:19

0

1

1374

v-select 옵션에 각 항목의 개수(.length)를 추가합니다. v-select의 각 항목 옵션에 api의course.length를 추가하고 활동 기반 필터에 데이터를 표시하고 싶습니다. 예를 들어, v-select의 항목에는...

에서 2024-03-31 21:05:16

0

1

377

관련 주제

더>

• HTML 저작권 기호
• HTML 온라인 편집기
• html 웹페이지 제작
• HTML 공간
• HTML이 무엇인가요?
• HTML 글꼴 크기를 설정하는 방법
• HTML을 TXT로
• HTML 텍스트 상자 코드를 작성하는 방법

인기 추천

• url은 무슨 뜻인가요?
• DOM은 무엇을 의미하나요?
• 이미지 크기를 변경하는 방법
• HTML에서 글꼴을 굵게 만드는 방법
• HTML 이미지의 크기를 설정하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1421781
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4266356
• 
  JAVA 초보자용 비디오 튜토리얼

  2520214
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  506611
• 
  PHP 제로 기반 입문 튜토리얼

  861674

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1421781 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2520214 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  506611 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215672 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  887127 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  7282 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  5683 학습 시간
• 
  Go 언어 실습 GraphQL

  4771 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  679 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  24082 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved