Bootstrap 3.3.7 | 입력폼(form)과 GUI 구성 요소 | 입력폼(form)과 관련된 기본 클래스


사용자 입력을 위한 기본은 “입력폼(form)“이다. 입력폼은 HTML에 있는 <form> 태그와 각종 컨트롤 종류의 태그를 조합해서 만든다.

입력폼 태그의 그대로 Bootstrap 이용에 있어서도 기본적으로 바뀌지 않는다. 입력폼은 HTML 태그를 사용하여 작성하지 않으면 입력폼으로 작동하지 않기 때문이다.

다만, 표시는 자체적인 것을 사용할 수 있다. 이는 몇개의 스타일을 사용하여 설정한다. 기본적인 작성법은 다음과 같다.

<form>
    <div class="form-group">
        <label for="foo">라벨</label>
        <input type="text" class="form-control" id="foo">
    </div>

    ...... 필요한만큼 태그를 제공 ......

</form>

class=“form-group”

입력폼의 컨트롤 종류는 하나 하나가 class="form-group"를 설정된 <div> 태그로 정리된다. 그러면 Bootstrap은 각각을 그룹으로 배치한다.

예를 들어 <label><input>가 그 중에 있으면, 레이블 아래에 입력 항목을 정렬된 형태로 배치된다. 이 입력 항목 그룹화하는 것이 class="form-group"라는 클래스이다.

class=“form-control”

입력하는 컨트롤 종류는 class="form-control"라는 클래스를 제공한다. 그러면 Bootstrap 자체 만의 스타일로 컨트롤이 표시되도록 한다.

다만, 이것을 지정하는 것은 “텍스트 입력 관계의 컨트롤"과 “선택 목록(<select>)“이다. 텍스트 관계라는 것은 <input type="text">, <input type="password"> , <textarea> 이다. 그밖에(체크 박스와 라디오 버튼)에 대해서는 별도 클래스가 준비되어 있다.

그럼 간단한 사용 예제를 보도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2 >form</h2>
        </div>
         
        <form>
            <div class="form-group">
            <label for="txt1">Text:</label>
                <input type="text" class="form-control" id="txt1">
            </div>
            <div class="form-group">
                <label for="pw1">Password:</label>
                <input type="password" class="form-control" id="pw1">
            </div>
            <div class="form-group">
                <label for="ta1">Text Area:</label>
                <textarea class="form-control" id="ta1" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="sl1">Password:</label>
                <select class="form-control" id="sl1">
                    <option>One</option>
                    <option>Two</option>
                    <option>Three</option>
                </select>
            </div>
            <div class="form-group">
                <input type="button" class="btn" value="Click">
            </div>
        </form>
    </div>
</div>
     
</div>
 
</body>
</html>

위에 입력 필드, 암호 필드, 텍스트 영역 등을 표시하는 입력폼 샘플이다. <input>, <textare>, <select>와 같은 컨트롤 관계의 태그에 각각 <div class="form-group"> 태그로 둘러싸이고, class="form-control"으로 설정되어 있는 것을 알 수 있다.