반응형

이 글에서 부트스트랩 5에서 폼이 어떻게 되는지 적으려 한다.

 

부트스트랩으로 스킨을 만드는 것이 아니라면 댓글, 방명록 등이 입력에서 폼을 많이 사용한다. 3에서 그 외에는 사용한 적이 없는 것 같다. 

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

 

위와 같은 소스를 입력하니 결과는 아래 그림과 같았다. mb는 이명박이 아니고 부트스트랩에서 공백을 나타낸다. 은 margin이고 b는 bottom이니  mb는 CSS의 margin-bottom이 된다. placeholder로 입력하는 방식을 설명한다. 

부트스트랩에 익숙해지면 나도 모르게 부트스트랩에 사용하던 요소, 속성 등을 CSS 및 HTML에 사용하게 된다. 

 

사이징

 

아래 그림처럼 클래스에 form-control-lgform-control-sm를 사용해 높이를 설정할 수 있다. 부트스트랩에서 크게 만들려고 하면 lg고 작게 한다면 sm이다.

 

입력 높이

 

소스는 아래와 같다. 클래스에 form-control-lg, form-control-sm 삽입 여부에 따라 input 입력창 높이가 커진다. 3에서 form은 안 써봤지만 큰 버튼을 만들 때 btn btn-lg라고 많이 사용한다. 그러면 버튼의 높이가 커진다. 참고로 aria-label은 부트스트랩에서만 사용하는 것이 아니다.

 

aria-label 속성은 현재 요소에 레이블을 정의하기 위해서 사용합니다. 텍스트 레이블이 화면에 표시되지 않을 때에 사용하세요. 출처 : developer.mozilla.org

 

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

 

사용 안 함


disabled 추가하여 입력창을 회색으로 표시된 모양을 제공하여 포인터 이벤트를 제거할 수 있다. 사용 안 함이라는 것은 입력할 수 없게 하는 것이다. 아래는 그림이라서 회색만 볼 수 있는데 실제는 마우스 포인터를 가져가면 화살표로 보여 입력할 수 없다.

 

사용안함 - disable

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

 

읽기 전용


readonly를 추가하여 입력 값 수정을 방지한다. readonly는 읽기 전용이고 입력은 비활성화된 입력과 마찬가지로 더 가벼워 보이지만 표준 커서는 그대로 유지한다. 커서가 입력 상태인 표준 커서니 입력되는 것으로 착각하게 된다. 입력하지 못하는 경우 커서는 화살표라고 했다. 참고로 위와 비숫해서 그림을 삽입하지 않았다.

 

<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>

 

읽기 전용 일반 텍스트


<input readonly> 양식과 비슷하다. 소스를 보면 알겠지만 이메일에 값을 줘 읽을 수 있게 하였다. 

 

읽기 전용 일반 텍스트

 

아래 소스를 보면 클래스에  form-control-plaintext를 추가하여 위 그림을 보듯이 폼 필드를 제거했다. 폼 필드 제거하면 이 메일에 입력할 생각을 하지 않을 것이다.

 

  <div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>

 

그런데 아래 그림이 어떻게 나오는지 자세한 설명이 없었다. Helper를 보니 visully-hidden을 사용하면 시각적으로 숨길 수 있다고 한다. 그러니 Email과 Password라는 단어를 숨길 수 있던 것 같다.

 

 

<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
  </div>
</form>

 

파일 올리기

이번은 SSD, HDD 등 저장장치에 있는 파일을 불러오는 것이다. 참고로 defalt는 기본적인 예이고 Multiple은 여러 개 선택이 가능하다는 말이다. 그리고 small과 large는 크기를 말한다.

 

파일 올리기

 

아래 소스를 보면 특별한 것은 없는 것 같다. 기본을 하나 파일만 선택할 수 있다. 여러 개 선택하고 싶다면 formFileMultiple를 사용하면 된다. 그리고 파일 올리기 크기인 경우는 lg와 sm을 사용한다는 것을 아래 소스를 보면 알 수 있다.

 

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

 

색 

 

3을 다루면서 몰랐는데 5에서는 색 선택기를 만들어 특정 색을 선택할 수 있다. 클래스에 form-control-color를 추가하면 된다. 

 

색 선택

아래와 같은 소스를 입력하면 위 그림에서 빨간색 안의 색만 나온다. 그 색을 클릭하면 팝업창이 나와 특정 색을 선택할 수 있디.

 

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

 

데이터 리스트


데이터 리스트는 입력하여 보내는 것이 아니라 선택하고 입력 후 보내는 것이라 할 수 있다. 아래 그림에 입력창에 입력하려고 하면 빨간색 사각형에 데이터 리스트가 나와 선택하게 된다. 아래 소스를 보면 알겠지만 이것은 CSS에서 볼 수 있는 select, option가 흡사하다.

 

데이터 리스트

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

 

Select - 선택

 

HTML select 태그를 사용할 때와 그렇게 차이가 없다. 그림 아래에 나오는 소스를 보면 알겠지만 클래스에 form-select만 추가하면 된다. 

 

기본 select

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

 

사이징

 

위에서 form-control-lg와 form-control-sm을 추가하면 높이가 달라지는 것과 같다. 아래 소스를 보듯이 이 경우도 클래스에 form-select-lgform-select-sm을 추가하면 높이가 작아진다. 

 

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

 

아래 그림에서 높이가 큰 것은 lg이고 작은 것은 sm이다.

 

select 크기

위에서도 파일을 여러 개 선택할 수 있다고 했다. 아래 그림은 select에 multiple를 추가해 option을 선택할 수 있었다. 그림 아래 소스를 보면 select에 multiple 속성을 확인할 수 있다.

 

여러개 선택

<select class="form-select" multiple aria-label="multiple select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

 

사용 안 함

 

이제는 사용할 수 없게 회색으로 표시하고 싶을 때는 disable 속성을 추가한다는 것을 짐작할 수 있을 것이다. 그림 아래 소스를 보면 select에 disable 속성이 있어 아래 그림처럼 회색이고 마우스 포인터에 동작하지 않는다.

 

사용안함

 

반응형

'정보/부트스트랩' 관련된 글 MORE

Close 방명록
×
×