Bootstrap 3.3.7 | 입력폼(form)과 GUI 구성 요소 | 입력 그룹(input-group)


입력 항목이라는 것은 “필드가 하나가 있을 뿐"인 경우는 그다지 별로 없다. 보통은 그 항목 이름의 라벨과 함께 표시된다.

특히, 인라인 입력폼 등으로 한줄에 항목을 표시하는 경우는 라벨과 필드가 하나가 되어 표시되었으면 하는 경우가 있다. 이렇게 “텍스트 등 입력 항목을 그룹화하여 표시"하고 싶은 경우에 사용되는 것이 Bootstrap의"입력 그룹"이라는 것이다.

이것은 텍스트 등을 하나의 그룹으로 구성하여 표시하는 것으로, 다음과 같이 입력 항목을 작성한다.

<div class="input-group">
    <input type="text" class="form-control">
    ……그룹으로 정리된 항목을 작성……
</div>

입력 항목을 둘러싼 <div> 태그에 class="input-group"라는 형태로 태그를 제공한다. 그러면 그 안에 작성한 것을 하나로 통합할 수 있다.

<div> 태그 내에는 <input> 외에 텍스트를 표시하기 위한 <span> 태그도 사용할 수 있다. 이것은 다음과 같이 클래스를 작성해야 한다.

<span class="input-group-addon">텍스트</span>

class="input-group-addon"을 지정하여, 인라인 그룹의 요소의 하나로서 텍스트가 표시될 수 있다.

그럼 이것도 간단한 사용 예제를 올려 두었다.

<!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 input-group">
            <span class="input-group-addon">Name</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">Password</span>
            <input type="password" class="form-control">
        </div>
        <div class="form-group input-group">
            <span class="input-group-addon">GMail Address</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">@gmail.com</span>
        </div>
        <div class="form-group">
            <input type="button" class="btn" value="Click">
        </div>
        </form>
    </div>
</div>
     
</div>
 
</body>
</html>

위에 예제에는 2개의 입력 그룹을 표시하는 샘플을 게재하고 있다.

이 예제에는, 예를 들어 아래와 같은 형태로 입력 그룹이 작성되어 있다. 여기서 class="form-group input-group"과 같이 입력폼 그룹과 입력 그룹의 두 클래스를 지정하고 있다.

<div class="form-group input-group">
    <span class="input-group-addon">Name</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">Password</span>
    <input type="password" class="form-control">
</div>

여기에는 2개의 <span>과 2개의 <input>을 1개의 그룹으로 구성하고 있다. 실제 표시를 보면 알 수 있지만, 이 4가지 요소를 1개의 그룹이 되어, 가로 일렬로 일체화되어 표시된다.

입력 그룹은 하나의 행으로 표시하고 싶은 항목(인라인 입력폼의 일종)의 생성에 특히 위력을 발휘한다. 또한, 이 인라인 입력폼은 <form> 안에 국한된 것이 아니라, <form>을 사용하지 않고도 사용할 수 있다.