[Bootstrap] Nav 사용 시 Form 태그 위치 주의.

기억하기 위해 기록 합니다.

 

[참고문서]

bootstrap ui nav document

 

정상 동작 코드)

<nav>
  <div class="nav nav-tabs nav-pills" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-terraform-configuration" data-toggle="tab" href="#terraform-configuration" role="tab" aria-controls="terraform-configuration" aria-selected="true">Step 1 - Terraform</a>
...중략...    
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
  
  <div class="tab-pane fade show active" id="terraform-configuration" role="tabpanel" aria-labelledby="nav-terraform-configuration">
    <form name="terraformForm">
...중략...
		</form>
	</div>

	<div class="tab-pane fade" id="kibana-installation" role="tabpanel" aria-labelledby="nav-kibana-installation">
...중략...
	</div>
</div>

 

비정상 동작 코드)

<nav>
  <div class="nav nav-tabs nav-pills" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-terraform-configuration" data-toggle="tab" href="#terraform-configuration" role="tab" aria-controls="terraform-configuration" aria-selected="true">Step 1 - Terraform</a>
...중략...    
  </div>
</nav>

<div class="tab-content" id="nav-tabContent">
	
	<form name="terraformForm">
  <div class="tab-pane fade show active" id="terraform-configuration" role="tabpanel" aria-labelledby="nav-terraform-configuration">
...중략...
	</div>
	</form>

	<div class="tab-pane fade" id="kibana-installation" role="tabpanel" aria-labelledby="nav-kibana-installation">
...중략...
	</div>
</div>

위 코드의 차이점은 <form> 태그의 위치 입니다.

 

정상적으로 동작 하는 코드에서는

- <div> tab-content 내부에 tab 영역에 해당 하는 <div> 안쪽에 선언이 되어 있고,

- 비정상적으로 동작하는 코드에서는 밖에 선언이 되어 있습니다.