Form controls

Form controls (폼 컨트롤)

Bulma는 네이티브 HTML 폼 요소들을 지원하고, 폼을 균형 있게 만드는 데 도움을 주는 control 컨테이너와 field 컨테이너를 제공해요. 폼 컨트롤의 기초부터 고급 조합까지 다뤄 볼게요.

출처: 문서

본문

Bulma는 다음 네이티브 HTML 폼 요소들을 지원해요: <form>, <button>, <input>, <textarea>, <label>.

다음 CSS 클래스들이 지원돼요:

  • label
  • input
  • textarea
  • select
  • checkbox
  • radio
  • button
  • help

균형 잡힌 디자인을 유지하기 위해, Bulma는 폼 컨트롤을 감싸는 데 매우 유용한 control 컨테이너를 제공해요.

폼에서 여러 컨트롤을 조합할 때는 field 클래스를 컨테이너로 사용해 간격을 일관되게 유지해요.

완전한 폼 예시 (Complete form example)

Name · Username · Email · Subject · Message · 약관 동의 체크박스 · 질문 라디오 · Submit/Cancel 버튼

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
</div>

<div class="field">
  <label class="label">Username</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small is-left">
      <i class="fas fa-user"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
  <p class="help is-success">This username is available</p>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </div>
  <p class="help is-danger">This email is invalid</p>
</div>

<div class="field">
  <label class="label">Subject</label>
  <div class="control">
    <div class="select">
      <select>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </div>
  </div>
</div>

<div class="field">
  <label class="label">Message</label>
  <div class="control">
    <textarea class="textarea" placeholder="Textarea"></textarea>
  </div>
</div>

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      I agree to the <a href="#">terms and conditions</a>
    </label>
  </div>
</div>

<div class="field">
  <div class="control">
    <label class="radio">
      <input type="radio" name="question">
      Yes
    </label>
    <label class="radio">
      <input type="radio" name="question">
      No
    </label>
  </div>
</div>

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Submit</button>
  </div>
  <div class="control">
    <button class="button is-link is-light">Cancel</button>
  </div>
</div>

Bulma를 최대한 활용하려면 control 요소를 가능한 한 자주 사용하는 것을 권장해요.

폼 필드 (Form field)

field 컨테이너는 다음을 위한 단순한 컨테이너예요:

  • 텍스트 label
  • 폼 control
  • 선택적인 help 텍스트

Label · This is a help text

<div class="field">
  <label class="label">Label</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
  <p class="help">This is a help text</p>
</div>

이 컨테이너 덕분에 폼 필드들이 일관되게 간격을 유지할 수 있어요.

Name · Email

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>

폼 컨트롤 (Form control)

Bulma control은 단일 폼 컨트롤을 개선하기 위한 다재다능한 블록 컨테이너예요. 감싸는 요소와 같은 높이를 가지므로, 다음 Bulma 요소들만 포함할 수 있어요:

  • input
  • select
  • button
  • icon

이 컨테이너는 다음을 가능하게 해요:

  • 간격을 일관되게 유지
  • 폼 컨트롤을 그룹으로 조합
  • 폼 컨트롤을 목록으로 조합
  • 폼 컨트롤에 아이콘을 앞뒤로 붙이기
<div class="control">
  <input class="input" type="text" placeholder="Text input">
</div>

Select dropdown · With options

<div class="control">
  <div class="select">
    <select>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
</div>

Submit

<div class="control">
  <button class="button is-primary">Submit</button>
</div>

아이콘과 함께 쓰기 (With icons)

컨트롤에 2가지 수정자 중 하나를 붙일 수 있어요:

  • has-icons-left
  • 그리고/또는 has-icons-right

아이콘에도 수정자를 추가해야 해요:

  • has-icons-left를 쓰면 icon is-left
  • has-icons-right를 쓰면 icon is-right

입력이 컨트롤의 첫 번째 자식이 되도록 해 주세요. 그렇지 않으면 선택될 때 아이콘이 사라질 수 있어요. 입력의 크기가 아이콘 컨테이너의 크기를 결정해요.

Login

<div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Email">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </p>
</div>
<div class="field">
  <p class="control has-icons-left">
    <input class="input" type="password" placeholder="Password">
    <span class="icon is-small is-left">
      <i class="fas fa-lock"></i>
    </span>
  </p>
</div>
<div class="field">
  <p class="control">
    <button class="button is-success">
      Login
    </button>
  </p>
</div>

select 드롭다운에도 아이콘을 붙일 수 있어요.

Country · Select dropdown · With options

<div class="field">
  <p class="control has-icons-left">
    <span class="select">
      <select>
        <option selected>Country</option>
        <option>Select dropdown</option>
        <option>With options</option>
      </select>
    </span>
    <span class="icon is-small is-left">
      <i class="fas fa-globe"></i>
    </span>
  </p>
</div>

컨트롤에 아이콘이 있으면, Bulma는 입력이나 아이콘의 크기와 관계없이 아이콘이 가운데 유지되도록 보장해요.

Small input

<div class="field">
  <label class="label is-small">Small input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-small" type="email" placeholder="Normal">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

Normal input

<div class="field">
  <label class="label">Normal input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input" type="email" placeholder="Normal">
    <span class="icon is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

Medium input

<div class="field">
  <label class="label is-medium">Medium input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Small">
    <span class="icon is-left">
      <i class="fas fa-envelope fa-sm"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check fa-sm"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-medium" type="email" placeholder="Normal">
    <span class="icon is-medium is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-medium is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

Large input

<div class="field">
  <label class="label is-large">Large input</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Extra small">
    <span class="icon is-small is-left">
      <i class="fas fa-envelope fa-xs"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check fa-xs"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Small">
    <span class="icon is-left">
      <i class="fas fa-envelope fa-sm"></i>
    </span>
    <span class="icon is-right">
      <i class="fas fa-check fa-sm"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Normal">
    <span class="icon is-large is-left">
      <i class="fas fa-envelope"></i>
    </span>
    <span class="icon is-large is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
</div>

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input class="input is-large" type="email" placeholder="Large">
    <span class="icon is-medium is-left">
      <i class="fas fa-envelope fa-lg"></i>
    </span>
    <span class="icon is-medium is-right">
      <i class="fas fa-check fa-lg"></i>
    </span>
  </div>
</div>

폼 애드온 (Form addons)

컨트롤들을 서로 붙이고 싶다면 field 컨테이너에 has-addons 수정자를 사용해요:

Search

<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find a repository">
  </div>
  <div class="control">
    <button class="button is-info">
      Search
    </button>
  </div>
</div>

입력, 버튼, 드롭다운 만 붙일 수 있어요.

정적 버튼을 붙이면 유용할 수 있어요.

@gmail.com

<div class="field has-addons">
  <p class="control">
    <input class="input" type="text" placeholder="Your email">
  </p>
  <p class="control">
    <a class="button is-static">
      @gmail.com
    </a>
  </p>
</div>

남은 공간을 채우고 싶은 요소(이 경우 입력)에 is-expanded 수정자를 사용해요:

$ · £ · € · Transfer

<div class="field has-addons">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button">
      Transfer
    </button>
  </p>
</div>

<div class="field has-addons">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control is-expanded">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button">
      Transfer
    </button>
  </p>
</div>

전체 너비 select 드롭다운을 원하면 control is-expanded를 select is-fullwidth와 짝지어 사용해요.

Argentina · Bolivia · Brazil · Chile · Colombia · Ecuador · Guyana · Paraguay · Peru · Suriname · Uruguay · Venezuela · Choose

<div class="field has-addons">
  <div class="control is-expanded">
    <div class="select is-fullwidth">
      <select name="country">
        <option value="Argentina">Argentina</option>
        <option value="Bolivia">Bolivia</option>
        <option value="Brazil">Brazil</option>
        <option value="Chile">Chile</option>
        <option value="Colombia">Colombia</option>
        <option value="Ecuador">Ecuador</option>
        <option value="Guyana">Guyana</option>
        <option value="Paraguay">Paraguay</option>
        <option value="Peru">Peru</option>
        <option value="Suriname">Suriname</option>
        <option value="Uruguay">Uruguay</option>
        <option value="Venezuela">Venezuela</option>
      </select>
    </div>
  </div>
  <div class="control">
    <button type="submit" class="button is-primary">Choose</button>
  </div>
</div>

정렬을 바꾸려면 has-addons-centered 또는 has-addons-right 수정자를 사용해요.

$ · £ · € · Transfer

<div class="field has-addons has-addons-centered">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button is-primary">
      Transfer
    </button>
  </p>
</div>

<div class="field has-addons has-addons-right">
  <p class="control">
    <span class="select">
      <select>
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </select>
    </span>
  </p>
  <p class="control">
    <input class="input" type="text" placeholder="Amount of money">
  </p>
  <p class="control">
    <button class="button is-primary">
      Transfer
    </button>
  </p>
</div>

폼 그룹 (Form group)

컨트롤들을 그룹으로 묶고 싶다면 field 컨테이너에 is-grouped 수정자를 사용해요.

Submit · Cancel

<div class="field is-grouped">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

정렬을 바꾸려면 is-grouped-centered 또는 is-grouped-right 수정자를 사용해요.

Submit · Cancel (가운데 갈래)

<div class="field is-grouped is-grouped-centered">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

Submit · Cancel (오른쪽 갈래)

<div class="field is-grouped is-grouped-right">
  <p class="control">
    <button class="button is-primary">
      Submit
    </button>
  </p>
  <p class="control">
    <a class="button is-light">
      Cancel
    </a>
  </p>
</div>

남은 공간을 채우고 싶은 control 요소에 is-expanded 수정자를 추가해요.

Search

<div class="field is-grouped">
  <p class="control is-expanded">
    <input class="input" type="text" placeholder="Find a repository">
  </p>
  <p class="control">
    <button class="button is-info">
      Search
    </button>
  </p>
</div>

컨트롤들이 여러 줄을 채우도록 하려면 is-grouped-multiline 수정자를 추가해요. 긴 컨트롤 목록에 이상적이에요.

One · Two · Three · Four · Five · Six · Seven · Eight · Nine · Ten · Eleven · Twelve · Thirteen

<div class="field is-grouped is-grouped-multiline">
  <p class="control">
    <button class="button">
      One
    </button>
  </p>
  <p class="control">
    <button class="button">
      Two
    </button>
  </p>
  <p class="control">
    <button class="button">
      Three
    </button>
  </p>
  <p class="control">
    <button class="button">
      Four
    </button>
  </p>
  <p class="control">
    <button class="button">
      Five
    </button>
  </p>
  <p class="control">
    <button class="button">
      Six
    </button>
  </p>
  <p class="control">
    <button class="button">
      Seven
    </button>
  </p>
  <p class="control">
    <button class="button">
      Eight
    </button>
  </p>
  <p class="control">
    <button class="button">
      Nine
    </button>
  </p>
  <p class="control">
    <button class="button">
      Ten
    </button>
  </p>
  <p class="control">
    <button class="button">
      Eleven
    </button>
  </p>
  <p class="control">
    <button class="button">
      Twelve
    </button>
  </p>
  <p class="control">
    <button class="button">
      Thirteen
    </button>
  </p>
</div>

버튼 목록

버튼 목록만 필요하다면 새로운 buttons 클래스를 사용해 보세요. 이를 통해 버튼의 다중 줄 목록을 만들 수 있어요.

가로 폼 (Horizontal form)

가로 폼 컨트롤을 원한다면 field 컨테이너에 is-horizontal 수정자를 사용해요. 다음을 포함해요:

  • field-label : 옆쪽 라벨용
  • field-body : 입력/select/textarea 컨테이너용

자식 요소에는 is-grouped나 has-addons를 사용할 수 있어요.

From · +44 · Department · Already a member? · Subject · Question · Send message

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">From</label>
  </div>
  <div class="field-body">
    <div class="field">
      <p class="control is-expanded has-icons-left">
        <input class="input" type="text" placeholder="Name">
        <span class="icon is-small is-left">
          <i class="fas fa-user"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control is-expanded has-icons-left has-icons-right">
        <input class="input is-success" type="email" placeholder="Email" value="[email protected]">
        <span class="icon is-small is-left">
          <i class="fas fa-envelope"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fas fa-check"></i>
        </span>
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label"></div>
  <div class="field-body">
    <div class="field is-expanded">
      <div class="field has-addons">
        <p class="control">
          <a class="button is-static">
            +44
          </a>
        </p>
        <p class="control is-expanded">
          <input class="input" type="tel" placeholder="Your phone number">
        </p>
      </div>
      <p class="help">Do not enter the first zero</p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Department</label>
  </div>
  <div class="field-body">
    <div class="field is-narrow">
      <div class="control">
        <div class="select is-fullwidth">
          <select>
            <option>Business development</option>
            <option>Marketing</option>
            <option>Sales</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label">
    <label class="label">Already a member?</label>
  </div>
  <div class="field-body">
    <div class="field is-narrow">
      <div class="control">
        <label class="radio">
          <input type="radio" name="member">
          Yes
        </label>
        <label class="radio">
          <input type="radio" name="member">
          No
        </label>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Subject</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
      </div>
      <p class="help is-danger">
        This field is required
      </p>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Question</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label">
    <!-- Left empty for spacing -->
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <button class="button is-primary">
          Send message
        </button>
      </div>
    </div>
  </div>
</div>

각 타입과 크기의 컨트롤에 대해 라벨의 세로 정렬을 유지하기 위해, field-label에는 4가지 크기 수정자가 있어요:

  • is-small
  • is-normal (모든 input 또는 button용)
  • is-medium
  • is-large

No padding (체크박스) · Small padding · Normal label · Medium label · Large label

<div class="field is-horizontal">
  <div class="field-label">
    <label class="label">No padding</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <label class="checkbox">
          <input type="checkbox">
          Checkbox
        </label>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-small">
    <label class="label">Small padding</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-small" type="text" placeholder="Small sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">Normal label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Normal sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-medium">
    <label class="label">Medium label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-medium" type="text" placeholder="Medium sized input">
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label is-large">
    <label class="label">Large label</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <input class="input is-large" type="text" placeholder="Large sized input">
      </div>
    </div>
  </div>
</div>

비활성 폼 (Disabled form)

disabled HTML 속성을 가진 fieldset으로 컨트롤 묶음을 감싸면 폼의 일부 또는 전체를 비활성화할 수 있어요.

Name · Email

<fieldset disabled>

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="e.g Alex Smith">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control">
    <input class="input" type="email" placeholder="e.g. [email protected]">
  </div>
</div>

</fieldset>

Sass와 CSS 변수 (Sass and CSS variables)

Sass 변수 CSS 변수 값
```sass
$control-radius
``` ```css
var(--bulma-control-radius)
``` ```css
var(--bulma-radius)
```
```sass
$control-radius-small
``` ```css
var(--bulma-control-radius-small)
``` ```css
var(--bulma-radius-small)
```
```sass
$control-border-width
``` ```css
var(--bulma-control-border-width)
``` ```css
1px
```
```sass
$control-size
``` ```css
var(--bulma-control-size)
``` ```css
var(--bulma-size-normal)
```
```sass
$control-height
``` ```css
var(--bulma-control-height)
``` ```css
2.5em
```
```sass
$control-line-height
``` ```css
var(--bulma-control-line-height)
``` ```css
1.5
```
```sass
$control-padding-vertical
``` ```css
var(--bulma-control-padding-vertical)
``` ```css
calc(0.5em - 1px)
```
```sass
$control-padding-horizontal
``` ```css
var(--bulma-control-padding-horizontal)
``` ```css
calc(0.75em - 1px)
```
```sass
$control-focus-shadow-l
``` ```css
var(--bulma-control-focus-shadow-l)
``` ```css
50%
```
```sass
$label-color
``` ```css
var(--bulma-label-color)
``` ```css
var(--bulma-text-strong)
```
```sass
$label-weight
``` ```css
var(--bulma-label-weight)
``` ```css
var(--bulma-weight-semibold)
```
```sass
$help-size
``` ```css
var(--bulma-help-size)
``` ```css
var(--bulma-size-small)
```

더 알아보기 (Learn more)