Bootstrap 양식

Bootstrap 양식

Boostrap에서 제공하고 있는 Forms, 양식 기능에 대해 알아봅시다. 이는 주로 사용자에게 데이터를 입력받는 양식을 form이라는 태그를 사용하게 되는데 Bootstrap를 통해 손쉽게 사용자에게 보기 좋은 양식을 만들어줄 수 있습니다.

출처: Bootstrap Forms

1.1 활용 예제

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

1.2 화면 출력