집 >웹 프론트엔드 >CSS 튜토리얼 >부트스트랩 양식에서 ``내부에 ``를 중첩할 수 있나요?

부트스트랩 양식에서 ``내부에 ``를 중첩할 수 있나요?

Mary-Kate Olsen원래의: 2024-11-13 08:17:021141검색

Can I Nest a `` Inside a `` in a Bootstrap Form?

Bootstrap 양식의 Nest Div Inside Label

Bootstrap을 사용하여 가로 양식을 생성할 때 기본 템플릿은 각 입력 필드에 ID를 할당하는 경우가 많습니다. 이를 방지하기 위해 일부 개발자는 입력 필드와 해당 레이블을 블록 수준

내부 요소

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

이 접근 방식은 문제를 해결하는 것처럼 보이지만 HTML 표준과 충돌합니다.

비호환성 해결

HTML 사양에 따르면 요소에는

요소. 사양에는 요소의 콘텐츠 모델은 과 같은 인라인 요소를 포함하는 구문 콘텐츠만 허용합니다. 및 이 있지만

와 같은 블록 수준 요소는 제외됩니다.

따라서 블록 수준

인라인 요소의 동작이 올바르지 않습니다.

가능한 해결 방법

적절한 HTML 구조를 유지하면서 입력 필드에 ID를 사용하지 않으려면 요소의 "for" 속성을 사용하는 것이 좋습니다. <라벨> 특정 입력 필드와 연결하는 요소:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control">

위 내용은 부트스트랩 양식에서 ``내부에 ``를 중첩할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

bootstrap html for while using Attribute default this input issue

성명：

이전 기사：CSS 의사 요소에 호버 효과를 어떻게 만들 수 있나요?다음 기사：CSS 의사 요소에 호버 효과를 어떻게 만들 수 있나요?