[Bootstrap] Form-control ( Html input object )

안녕하세요. 명월입니다.

이 글은 부트스트랩에서 Form-control ( Html input object )에 대한 글입니다.

웹 페이지를 작성하면 데이터를 입력, 선택하는 오브젝트로 Input object를 가장 많이 사용할 것입니다.

Input Object의 기본 종류로는 TextBox, Checkbox, Radio, Button등이 있습니다.

타입	형태	태그
텍스트 박스		<input type="text">
체크 박스		<input type="checkbox">
라디오		<input type="radio">
버튼		<button>button</button>
셀렉트	option	<select><option>option</option><option></option></select>
프로그래스		<progress></progress>
파일 업로드		<input type="file">
텍스트 에리어		<textarea></textarea>
패스워드		<input type="password">
컬러		<input type="color">
날짜		<input type="date">
시간		<input type="datetime">
메일		<input type="email">
이미지		<input type="image">
월		<input type="month">
숫자		<input type="number">
범위		<input type="range">
초기화		<input type="reset">
검색		<input type="search">
시간		<input type="time">
주		<input type="week">
url		<input type="url">
datetime-local		<input type="datetime-local">

링크 - https://www.w3schools.com/jsref/dom_obj_text.asp

막상 조사하고 나니 꽤 많네요. 저의 경우는 텍스트박스, 패스워드, Radio, 체크 박스, Select, 텍스트 에리어, File는 자주 사용해서 잘 알고 있었는데.. 그 외는 처도 처음 보네요..

위 테이블을 보면 기본 오브젝트는 무언가 촌시럽습니다. 그래서 이쁜 디자인을 부트스트랩에서 제공을 합니다.

참고로 제 블로그는 Bootstrap3으로 만들어 졌기 떄문에, Bootstrap3 형식의 디자인으로 소개합니다.

그러나 Bootstrap3과 4에서 form-control은 거의 비슷하기 때문에 큰 차이는 없습니다.

부트 스트랩 3.x 링크 - https://getbootstrap.com/docs/3.4/css/#forms

부트 스트랩 4.x 링크 - https://getbootstrap.com/docs/4.3/components/forms/

사용 방법은 위 태그에서 class에 form-control를 넣으면 기본 형태가 나옵니다.

예를 들면 텍스트 박스에 <input type="text" class="form-control"> 이라고 작성하면 아래와 같이 나옵니다.

그리고 텍스트 박스의 경우는 Add Label를 붙일 수도 있습니다.

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>

@

그리고 아이콘을 넣을 수도 있습니다.

<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>

Input with warning (warning)

사이즈를 설정할 수도 있습니다.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

버튼의 경우는 색깔을 설정할 수 있습니다.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

disabled나 readonly 설정입니다.

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

그 밖에 많은 설정화면이 있는데 다 설명하기에는 내용이 너무 많습니다.

일단 중요한 것은 class에서 form-control 설정을 하면 bootstrap의 기본 디자인을 사용할 수 있습니다.

사실 정말 많은 설정이 있는 데, 역으로 저는 그 설정을 다 사용하면 더 복잡해 지더라고요.

색깔과 크기에 기본 form-control에 더 필요하면 직접 CSS 로 작성하여 구현을 하는게 좋습니다.

부트 스트랩 3.x 링크 - https://getbootstrap.com/docs/3.4/css/#forms

부트 스트랩 4.x 링크- https://getbootstrap.com/docs/4.3/components/forms/

여기까지 부트스트랩에서 Form-control ( Html input object )에 대한 글이였습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.