부트스트랩 : 폼

bootstrap : Page 1-5 Forms 부트스트랩 1-5번째 폼

부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>


참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.


 

Forms

 

Basic example 기본 예제

각각의 폼콘트롤은 자동으로 약간의 전역 스타일링을 받아들입니다. .form-control 이 있는 모든 텍스트 기반의 <input>, <textarea> 그리고 <select> 요소는 기본적으로 width: 100%; 입니다. 최적의 여백을 위해 .form-group 으로 라벨과 콘트롤을 감싸세요.

Example block-level help text here.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

 

인라인 폼 Inline form

조밀한 레이아웃을 위한 좌측 정렬된 inline-block 콘트롤을 위해 .form-inline 를 추가하세요. 또한, 이 '인라인 폼'은 최소 768px이상에서만 됩니다.

맞춤 너비가 필요합니다.

부트스트랩에서 input, select, textarea 는 기본적으로 100% 너비입니다. 인라인 폼에서 사용하려면, 폼콘트롤에 너비를 설정해주어야 합니다.

항상 라벨을 추가하세요.

모든 input 을 위한 라벨이 없다면 스크린 리더는 문제가 생길 것입니다. 인라인 폼에서 당신은 .sr-only 클래스를 사용하여 라벨을 숨길 수 있습니다.

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

수평 폼 Horizontal form

폼에 .form-horizontal 를 추가하여 수평 레이아웃을 만드세요. 이 안에서는 부트스트랩의 그리드 클래스를 사용하여 라벨과 폼콘트롤 그룹을 정렬합니다. 그리드행 역할은 .form-group 가 하기 때문에 .row 는 필요가 없습니다.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

지원되는 콘트롤들 Supported controls

예제 폼에서 지원되는 표준 폼콘트롤의 예제들.

 

Inputs

가장 흔한 폼 콘트롤인 텍스트 기반 입력 필드입니다. HTML5 의 모든 타입을 지원합니다: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color.

타입 선언이 필요합니다.

Input 은 type 이 제대로 선언되었을 때 완전한 스타일이 적용될 것입니다..

<input type="text" class="form-control" placeholder="Text input">

Input groups 입력그룹

통합 텍스트 또는 텍스트 기반 <INPUT> 전 또는 후에 버튼을 추가하려면 입력 그룹 구성 요소를 확인하세요.

 

Textarea

여러 줄의 텍스트를 지원하는 폼콘트롤. 필요에 따라 rows 속성을 바꾸세요.

<textarea class="form-control" rows="3"></textarea>

 

체크박스와 라디오 Checkboxes and radios

체크박스는 목록에서 하나 혹은 몇개의 옵션을 선택하기 위함이고, 라디오는 여러개중 하나의 옵션을 선택하기 위함입니다.

기본

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

인라인 체크박스 Inline checkboxes

일련의 체크박스나 라디오를 같은 줄에 보이게 하려면 .checkbox-inline.radio-inline 클래스를 사용하세요.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

셀렉트 Selects

기본 옵션을 사용하거나, 여러 옵션을 한번에 보여주기 위해 multiple 을 넣습니다.


<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

정적 콘트롤 Static control

수평 폼에서 텍스트를 넣고 싶을때는 <p>.form-control-static 클래스를 사용하세요..

email@example.com

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

입력 포커스 Input focus

우리는 :focus 를 위해 몇몇 폼콘트롤들의 기본 outline 스타일들을 제거하고 그 대신에 box-shadow 를 적용했습니다.

<input class=span>"form-control" id="focusedInput" type="text" value="Demonstrative focus state">

입력 비활성화 Disabled inputs

사용자 입력을 막고 약간의 다른 모습을 적용하려면 input 에 disabled 속성을 추가하세요.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

필드셋 비활성화 Disabled fieldsets

<fieldset> 내에 모든 콘트롤을 한번에 비활성화하려면 <fieldset>disabled 속성을 추가하세요.

<a> 링크 기능성은 영향을 받지 않습니다.

이 클래스는 <a class="btn btn-default"> 버튼들의 기능성이 아닌 오직 모습만 변경합니다. 링크를 비활성화하려면 맞춤 자바스크립트를 사용하세요.

크로스브라우저 호환성

부트스트랩은 이 스타일들을 모든 브라우저에 적용하지만, 인터넷 익스플로러 9 와 그 이하에서는 실제로 <fieldset> 에서 disabled 속성을 지원하지 않습니다. 이 브라우저들의 필드셋을 비활성화하려면 맞춤 자바스크립트를 사용하세요.

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

검사 상태들 Validation states

부트스트랩은 폼콘트롤의 에러, 경고, 성공 상태를 위한 검사 스타일을 포함하고 있습니다. 사용하려면, 상위 요소에 .has-warning, .has-error, .has-success 를 추가하세요. 그 요소 내 모든 .control-label, .form-control, .help-block 은 검사 스타일을 이어받을 것입니다.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

옵션 아이콘 With optional icons

별도의 클래스를 추가하고 오른쪽 아이콘을 선택 피드백 아이콘을 추가 할 수 있습니다. 추가된 .has-feedback의 css값으로 고정값인 top, right를 이용하여 input의 높이에 따라 수동으로 값을 주어야 할것 같습니다. 또한 기본 값으로 right로 되어 있습니다.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</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">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

여기 보여지는 코드와 이 블로그에 쓰여지는 코드는 다릅니다. 저의 맞게 수정하여 보여지는 화면 입니다.

수평 및 인라인 형태에서 옵션 아이콘사용하세요
<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

폼콘트롤 크기조절 Control sizing

.input-lg 같은 클래스를 이용하여 높이를 설정하세요, 그리고 .col-lg-* 같은 그리드 컬럼 클래스를 사용하여 너비를 설정하세요.

높이 조절 Height sizing

버튼 크기에 어울리는 좀더 크거나 작은 폼콘트롤을 만드세요.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

여기 보여지는 코드와 이 블로그에 쓰여지는 코드는 다릅니다. 저의 맞게 수정하여 보여지는 화면 입니다.

컬럼 크기조절 Column sizing

쉽게 원하는 너비를 적용하려면, 그리드 컬럼이나 맞춤 상위 요소로 입력요소들을 감싸세요.

<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>

도움말 Help text

폼콘트롤을 위한 블록레벨의 도움말입니다.

A block of help text that breaks onto a new line and may extend beyond one line.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

 

Thanks to

'라이브러리 > Bootstrap' 카테고리의 다른 글

부트스트랩 : 폼  (0) 2014.04.13
부트스트랩 : 코드, 테이블  (2) 2014.03.29
부트스트랩 : 타이포그래피  (0) 2014.03.26
부트스트랩 : 그리드 시스템  (0) 2014.03.23
부트스트랩 : CSS 개요  (0) 2014.03.23
부트스트랩 : 참고사항  (0) 2014.03.21
Advertisement
이름
비밀번호
홈페이지

*1  *···  *23  *24  *25  *26  *27  *28  *29  *30  *31  *···  *81