• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박스) + Radio(라디오) + Select(선택창)

1.

BS 지원 form 구성요소


input

textarea

checkbox

radio

select


※ 아래 예제 코드들을 <form> 태그 안에 넣어서 사용. 

 

1-1. 

BS - Input

 

1.

BS는 모든 HTML5 INPUT 타입 지원.
(예: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color.) 지원. 


2.

입력 유형이 올바르게 선언되지 않으면 입력 스타일이 완전히 지정되지 않음.

 


 

<div class="form-group">

  <label for="usr">이름:</label>

  <input type="text" class="form-control" id="usr">

</div>

<div class="form-group">

  <label for="pwd">비밀번호:</label>

  <input type="password" class="form-control" id="pwd">

</div>

 

예제보기 

 

1-2. 

BS - Textarea

 

<div class="form-group">

  <label for="comment">코멘트:</label>

  <textarea class="form-control" rows="5" id="comment"></textarea>

</div>

 

예제보기 

 

1-3. 

BS - Checkbox

[Checkbox 수직정렬]

 

<div class="checkbox">

  <label><input type="checkbox" value="">Option 1</label>

</div>

<div class="checkbox">

  <label><input type="checkbox" value="">Option 2</label>

</div>

<div class="checkbox disabled">

  <label><input type="checkbox" value="" disabled>Option 3</label>

</div>

 

예제보기 


[Checkbox 수평정렬]

 

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>

<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>

<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

 

예제보기 

 

1-4. 

BS - Radio Button

[Radio 수직정렬]

 

<div class="radio">

  <label><input type="radio" name="hz" checked>Option 1</label>

</div>

<div class="radio">

  <label><input type="radio" name="hz">Option 2</label>

</div>

<div class="radio disabled">

  <label><input type="radio" name="hz" disabled>Option 3</label>

</div>

 

예제보기 


[Radio 수평정렬]

 

<label class="radio-inline"><input type="radio" name="hz" checked>Option 1</label>

<label class="radio-inline"><input type="radio" name="hz">Option 2</label>

<label class="radio-inline"><input type="radio" name="hz">Option 3</label>

 

예제보기 

 

1-5. 

BS - Select

[Option 하나만 선택]

 

<div class="container">

  <form>

    <div class="form-group">

      <label for="sel1">하나만 선택</label>

      <select class="form-control" id="sel1">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

      </select>

 

    </div>

  </form>

</div>

 

예제보기 


[Option 여러 개 선택]

 

<div class="container">

  <form>

    <div class="form-group">

      <label for="sel2">여러 개 선택 (Shift키 누른 상태서 선택 가능)</label>

      <select multiple class="form-control" id="sel2">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

      </select>

    </div>

  </form>

</div>

 

예제보기 

 

 

input 포커스 시 윤곽선 제거

 

.form-control:focus {

  -webkit-box-shadow: none !important;

          box-shadow: none !important;

}

 

 

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012