부트스트랩4는 양식제어와 관련한 다음 요소들을 지원합니다.

• input
  
• textarea
  
• checkbox
  
• radio
  
• select
  

부트스트랩4 Input

부트스트랩4가 지원하는 HTML5 input types : text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color

타입을 적절하게 선언되어야 입력 스타일이 완벽하게 조정됩니다.

<form>
    <div class="form-group">
      <label for="usr">성명:</label>
      <input type="text" class="form-control" id="mb_name">
    </div>
    <div class="form-group">
      <label for="pwd">비밀번호:</label>
      <input type="password" class="form-control" id="mb_password">
    </div>
</form>

부트스트랩4 Textarea

<form>
    <div class="form-group">
      <label for="comment">내용:</label>
      <textarea class="form-control" rows="5" id="mb_content"></textarea>
    </div>
</form>

부트스트랩4 checkbox

checkbox는 사용자가 사전 설정 옵션 목록에서 원하는 수의 옵션을 선택하도록 하려는 경우 사용됩니다.

아래 예는 세 개의 선택옵션이 있고, 마지막 옵션은 사용자가 선택할 수 없는 비활성상태입니다.

<form>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">실전홈페이제작
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">PHP5강좌
      </label>
    </div>
    <div class="form-check disabled">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="" disabled>부트스트랩4강좌
      </label>
    </div>
</form>

선택옵션을 한 줄에 표시하려면 .form-check-inline클래스를 사용합니다.

<form>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">실전홈페이지제작
      </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">PHP5강좌
      </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="" disabled>부트스트랩4강좌
      </label>
    </div>
</form>

부트스트랩4 radio

radio 버튼은 사전 설정 옵션 목록에서 사용자가 한 개를 선택할 수 있도록 제한하는 경우 사용됩니다.

아래 예는 3개의 radio버튼을 가지며 그 중 마지막은 비활성 상태입니다.

<form>
    <div class="radio">
      <label><input type="radio" name="optradio">실전홈페이지제작</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">PHP5강좌</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>부트스트랩4강좌</label>
    </div>
</form>

한 줄에 radio 버튼을 표시하려면 .radio-inline 클래스를 사용합니다.

<form>
    <label class="radio-inline">
      <input type="radio" name="optradio">실전홈페이지제작
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">PHP5강좌
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">부트스트랩4강좌
    </label>
</form>

부트스트랩4 select

select는 기존에 주어진 목록에서 한 개만 선택하던 것이 요즘은 여러 개 선택이 가능합니다.

여러 개를 선택할 수 있도록 코드를 작성하려면 <select>요소내에 'multiple'을 추가하세요.

<select class="form-control" id="sel1">
        <option>실전홈페이지제작</option>
        <option>CSS Grid강좌</option>
        <option>PHP5강좌</option>
        <option>부트스트랩4강좌</option>
        <option>CSS Flexbox강좌</option>
</select>

<select multiple class="form-control" id="sel2">
        <option>실전홈페이지제작</option>
        <option>CSS Grid강좌</option>
        <option>PHP5강좌</option>
        <option>부트스트랩4강좌</option>
        <option>CSS Flexbox강좌</option>
</select>