5-1. 폼 양식
■ 폼 양식
부트스트랩에서는 다양한 폼 컨트롤을 다룰 수 있는 클래스를 제공합니다.
클래스 .form-control가 있는 폼 양식의 요소들은 패딩과 컨트롤 모양 등에서 적절한 양식 스타일이 적용됩니다.
<div class="container mt-3">
<h3>폼 양식의 예</h3>
<form>
<div class="mb-3 mt-3">
<label for="id" class="mb-1">아이디 :</label>
<input type="text" class="form-control" id="id" placeholder="Enter id" name="name">
</div>
<div class="mb-3">
<label for="pwd" class="mb-1">비밀번호 :</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<button type="submit" class="btn btn-primary">확인</button>
</form>
</div>
ex5-1.html의 실행 결과
■ 입력 창과 다중 입력 창
부트스트랩의 클래스 .form-control이 적용된 <input>과 <textarea> 요소의 예는 다음과 같습니다.
<div class="container mt-3">
<h3>입력 창</h3>
<div class="mb-3 mt-3">
<label for="subject" class="mb-1">제목 :</label>
<input type="text" class="form-control" id="subject">
</div>
<div class="mb-3 mt-3">
<label for="comment" class="mb-1">내용 :</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
<button type="submit" class="btn btn-primary">확인</button>
</div>
ex5-2.html의 실행 결과
■ 인라인 폼
다음은 수평으로 폼 요소를 배치하는 인라인 폼의 예입니다.
<div class="container mt-3">
<h3>인라인 폼</h3>
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" name="email">
</div>
<div class="col">
<input type="password" class="form-control" name="pwd">
</div>
</div>
</form>
</div>
ex5-3.html의 실행 결과
■ 입력 창의 크기
클래스 .form-control, .form-control-lg, .form-control-sm를 사용하면 입력 창의 크기를 변경할 수 있습니다 .
<div class="container mt-3">
<h3>입력 창의 크기</h3>
<form>
<input type="text" class="form-control form-control-lg mb-2" placeholder="Input large input">
<input type="text" class="form-control mb-2" placeholder="Input normal text">
<input type="text" class="form-control form-control-sm mb-2" placeholder="Input small input">
</form>
</div>
ex5-4.html의 실행 결과
