[Bootstrap] Input 태그 기본

1. Input 태그 기본

• Bootstrap에서 Input 태그들을 위한 css 클래스를 제공하고 있습니다.
• 적용하는 방식은 text, textarea, search 등 문자열을 입력하는 요소들을 Bootstrap에서 정의한 css 모양을 적용합니다. 그 외의 요소들은 크기를 늘려주는 작업을 수행합니다.

Form안에 Input 태그를 구성하는 기본적인 형식

<form action="#" method="post">
    <!-- text, form-control -->
    <div class="form-group row">
        <label for="a1" class="col-sm-4 text-sm-right">text</label>
        <div class="col-sm-8">
             <input type="text" id="a1" class="form-control">
        </div>
    </div>
</form>

label과 Input 영역을 4:8의 비율로 구성합니다.

 

2. text, password, textarea Input 구성 : form-control

input type중 text, password, textarea 타입은 form-control 클래스를 적용합니다.

<form action="#" method="post">
    <!-- text, form-control -->
    <div class="form-group row">
        <label for="a1" class="col-sm-4 text-sm-right">text</label>
        <div class="col-sm-8">
            <input type="text" id="a1" class="form-control">
        </div>
    </div>
    <hr>

    <!-- password, form-control -->
    <div class="form-group row">
        <label for="a2" class="col-sm-4 text-sm-right">password</label>
        <div class="col-sm-8">
            <input type="password" id="a2" class="form-control">
        </div>
    </div>
    <hr>

    <!-- textarea, form-control -->
    <div class="form-group row">
        <label for="a3" class="col-sm-4 text-sm-right">text area</label>
        <div class="col-sm-8">
            <textarea id="a3" cols="30" rows="5" class="form-control" style="resize: none;">

            </textarea>
        </div>
    </div>
    <hr>
</form>

 

3. checkbox Input 구성 : form-check-input

Input 태그 type중 checkbox 타입은 form-check-input 클래스를 적용할 수 있습니다.

<!-- checkbox, form-check-input -->
<div class="form-group row">
    <label class="col-sm-4 text-sm-right">check box</label>
    <div class="col-sm-8">
        <div class="form-check">
            <!-- form-check 적용, form-check 영역이 체크박스 한개를 의미함 -->
            <label class="form-check-label">
                <!-- form-check-input 적용 -->
                <input type="checkbox" class="form-check-input" name="c1" value="1"> 체크박스 1
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="c1" value="2"> 체크박스 2
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="c1" value="3"> 체크박스 3
            </label>
        </div>
    </div>
</div>
<hr>

 

 

4. checkbox Input들을 가로로 배치 : form-check-inline

위 예제에서 체크박스는 수직으로 구성된 것을 볼 수 있습니다. 만약 체크박스들을 가로로 배치하기 위해서는 form-check-inline 클래스를 적용할 수 있습니다.

<!-- inline checkbox : 가로 방향으로 체크박스들 배치 -->
<div class="form-group row">
    <label class="col-sm-4 text-sm-right">check box inline</label>
    <div class="col-sm-8">
        <div class="form-check form-check-inline">
            <!-- form-check-inline 적용 -->
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="c2" value="1"> 체크박스 1
            </label>
        </div>
        <div class="form-check form-check-inline">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="c2" value="2"> 체크박스 2
            </label>
        </div>
        <div class="form-check form-check-inline">
            <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="c2" value="3"> 체크박스 3
            </label>
        </div>
    </div>
</div>
<hr>

 

 

5. radio Input 구성 : form-check-input

Input 타입중 라디오 버튼은 체크박스와 마찬기지로 form-check-input을 적용하여 입력창을 구성할 수 있습니다. 단, Input 태그의 type="radio"로 설정하여야 하고 name="val" 값을 동일하게 설정하여야 합니다.

<!-- radio -->
<div class="form-group row">
    <label class="col-sm-4 text-sm-right">radio</label>
    <div class="col-sm-8">
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="r1" value="1" checked> 라디오 1
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="r1" value="2"> 라디오 2
            </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="r1" value="3"> 라디오 3
            </label>
        </div>
    </div>
</div>
<hr>

 

6. radio Input들을 가로로 배치 : form-check-inline

체크박스와 마찬가지로 라디오 버튼들을 가로로 배치하기 위해서 form-check-inline 클래스를 적용할 수 있습니다.

<!-- radio inline, form-check-inline -->
<div class="form-group row">
    <label class="col-sm-4 text-sm-right">radio</label>
    <div class="col-sm-8">
        <div class="form-check-inline">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="r2" value="1" checked> 라디오 1
            </label>
        </div>
        <div class="form-check-inline">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="r2" value="2"> 라디오 2
            </label>
        </div>
        <div class="form-check-inline">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="r2" value="3"> 라디오 3
            </label>
        </div>
    </div>
</div>
<hr>

 

 

7. select 태그 구성 : form-control

select 태그에 form-control 클래스를 적용하여 입력 창을 구성할 수 있습니다. 그리고 select 태그에 multiple 옵션을 추가하면 다중 선택이 가능합니다.

<!-- select, form-control -->
<div class="form-group row">
    <label for="a4" class="col-sm-4 text-sm-right">select</label>
    <div class="col-sm-8">
        <select id="a4" class="form-control">
            <option value="1">항목1</option>
            <option value="2">항목2</option>
            <option value="3">항목3</option>
            <option value="3">항목4</option>
            <option value="3">항목5</option>
        </select>
    </div>
</div>
<hr>

 

8. 입력창의 크기 구성 : form-control-sm, form-control, form-control-lg

입력창의 크기를 설정하기 위해서 form-control-sm, form-control-lg를 설정할 수 있습니다. 기본 크기는 form-control 입니다.

<!-- form-control-sm -->
<div class="form-group row">
    <label for="a6" class="col-sm-4 text-sm-right">size small</label>
    <div class="col-sm-8">
        <input type="text" id="a6" class="form-control form-control-sm">
    </div>
</div>
<!-- form-control-default -->
<div class="form-group row">
    <label for="a6" class="col-sm-4 text-sm-right">size default</label>
    <div class="col-sm-8">
        <input type="text" id="a6" class="form-control">
    </div>
</div>
<!-- form-control-lg -->
<div class="form-group row">
    <label for="a6" class="col-sm-4 text-sm-right">size large</label>
    <div class="col-sm-8">
        <input type="text" id="a6" class="form-control form-control-lg">
    </div>
</div>
<hr>

 

9. 입력창의 외곽선 구성 : form-control(default), form-plaintext

 입력창의 외곽선을 설정하기 위해서 form-plaintext 클래스를 적용할 수 있습니다. 적용시 외곽선이 없어지고 입력할때 생깁니다. 외곽선의 기본값은 form-control 클래스입니다.

<!-- border default -->
<div class="form-group row">
    <label for="a6" class="col-sm-4 text-sm-right">border default</label>
    <div class="col-sm-8">
        <input type="text" id="a6" class="form-control">
    </div>
</div>

<!-- border plain -->
<div class="form-group row">
    <label for="a7" class="col-sm-4 text-sm-right">border plain</label>
    <div class="col-sm-8">
        <input type="text" id="a7" class="form-control-plaintext"> <!-- form-control-plaintext : 외곽선이 없음, 입력시 보임 -->
    </div>
</div>
<hr>

위 결과에서 border plain 입력창의 외곽선이 없는 것을 확인할 수 있습니다. 다음 그림은 focus를 border plain 입력창으로 이동한 모습입니다.

focus를 입력창으로 이동시 외곽선이 나온 것을 확인할 수 있었습니다.

 

10. range Input 구성 : form-control-range

Input 타입중 type="range"인 입력창에 form-control-range 클래스를 적용할 수 있습니다.

<!-- range, form-control-range -->
<div class="form-group row">
    <label for="a8" class="col-sm-4 text-sm-right">range</label>
    <div class="col-sm-8">
        <input type="range" id="a8" class="form-control-range">
    </div>
</div>
<hr>

 

11. file Input 구성 : form-control-file

Input 타입중 type="file"인 입력창에 form-control-file 클래스를 적용할 수 있습니다.

<!-- file, form-control-file -->
<div class="form-group row">
    <label for="a9" class="col-sm-4 text-sm-right">range</label>
    <div class="col-sm-8">
        <input type="file" id="a9" class="form-control-file border"> <!-- form-contorl-file : 파일 형식 배치-->
    </div>
</div>
<hr>

 

정리하며

• 그룹 : form-group, form-check
• 입력 : form-control, form-check-input, form-control-range, form-control-file
• 배치 : form-check-inline
• 크기 : form-control-sm, form-control[-default], form-control-lg
• 외곽선 : form-control-plaintext
• 레이블 : form-check-label

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Input/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial