[Bootstrap] Form

1. Form

• HTML에서 사용자의 입력을 받아 서버로 전달하기 위해서 사용하는 태그
• Bootstrap에서는 Form 태그를 통해 입력 화면을 만들 경우 화면을 효율적으로 이용할 수 있도록 클래스를 제공하고 있습니다.

2. Form 주요 CSS 클래스

• form-group : label 태그와 input 태그를 하나의 그룹으로 묶어 관리할 수 있도록 합니다.
• form-control : input 태그에 사용하며, 폼안의 입력창에 css 설정함
• form-inline : form 태그에 적용하며 폼안의 form-group들을 inline 형식으로 배치함
• form-horizontal (BS3) : form 태그에 적용하며 적용한 폼안의 form-group들은 기본적으로 가로로 배치되며 화면이 줄어들면 제목과 입력이 세로로 배치됨

Bootstrap 4 Form 클래스 기본적인 구성

		<form action="#" method="post">
			<div class="form-group">
				<label for="a1">입력1</label>
				<input type="text" id="a1" class="form-control">
			</div>
			<div class="form-group">
				<label for="a2">입력2</label>
				<input type="text" id="a2" class="form-control">
			</div>
		</form>

Bootstrap 4 form-inline 클래스 적용

위 그림에서 form-group들을 세로로 구성하는 것이 아닌 가로로 구성하기 위해서 form-inline 클래스를 적용할 수 있습니다.

		<form action="#" method="post" class="form-inline">
			<div class="form-group" style="margin-right: 10px;">
				<label for="a3">입력3</label>
				<input type="text" id="a3" class="form-control">
			</div>
			<div class="form-group">
				<label for="a4">입력4</label>
				<input type="text" id="a4" class="form-control">
			</div>
		</form>

 

Bootstrap 4 form-horizontal 효과 적용

form-horizontal 클래스는 Bootstrap3에서 사용하는 클래스로써 기본적으로 form-group을 가로로 유지하고 브라우저 창이 좁아질때 세로로 배치하는 클래스입니다. Bootstrap4에서는 form-horizontal 클래스를 사용할 수 없으므로 row와 col-sm-* 클래스를 활용하여 같은 효과를 내줍니다.

		<form action="#" method="post">
			<div class="form-group row">
				<label for="a5" class="col-sm-4">입력5</label>
				<div class="col-sm-8">
					<input type="text" id="a5" class="form-control">
				</div>				
			</div>
			<div class="form-group row">
				<label for="a6" class="col-sm-4">입력6</label>
				<div class="col-sm-8">
					<input type="text" id="a6" class="form-control">
				</div>				
			</div>
		</form>

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Form/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial