부트스트랩 Bootstrap 3 CSS 개요 4 Forms

게시자: 대문 demun 카테고리: 퍼블리셔/Bootstrap 2013.09.13 08:41

이번 시간에는 폼입니다.

이전글은 -> http://demun.tistory.com/category/Development/Bootstrap 를 참고하세요

내용일 깁니다. 아래 목록을 클릭하면 해당글로 바로갑니다.



Forms



form 은 form-control 이라는 클래스로 너비값을 100%로 설정해서 사용하며, <input>, <textarea>, <select> 태그등이 사용됩니다.


form 은 기본으로 form 으로 시작하고 유의해서 봐야할 점은 클래스 입니다.

<form-group> 으로 input 과 label 을 묶어줍니다.


html5 에서는 input 에 여러가지 타입을 지정할 수 있습니다. 아래처럼요.

또 <p class="help-block"> 라는 클래스를 지정하면 위아래 여백(margin)을 주고, 블럭처리를 하며, 컬러값도 약간 주위와 다릅니다. 추가적인 팁이죠.





Inline form(인라인 폼)


인라인 폼은 form-inline 클래스를 부여하면 됩니다. 그러면 인라인 형식으로 한줄로 표현이 됩니다.

기본으로 너비가 100% 로 지정이 되어있습니다. 그러니 인라인으로 사용하려면 form-inline 클래스를 사용하라고 합니다.

또한 label 을 항상사용해야 된다고하고, 필요에 따라 레이블을 화면에서 숨길때는 sr-only 클래스를 사용하라고 합니다. 




sr-only 클래스는 아래처럼 너비와 높이를 최소한으로 잡고, 포지션을 absolute 로 띄워서 화면에 안보이도록 하지만 스크린리더에서는 읽도록 하는 설정이 되어 있습니다.





Horizontal form(수평형태의 폼)


수평형태의 폼은 form 에 클래스를 form-horizontal 을 주면 됩니다. 마찬가지로 label 과 input 은 <form-group>로 묶어주면 깔끔한 마크업이 됩니다.

예제는 아래 이미지를 참고하시면 됩니다.







Supported controls(지원되는 컨트롤)


Inputs(인풋)

일반적이고 가장 많이 사용하는 형태로 html5 에 사용되는 모든 형태를 부트스트랩에서는 지원합니다.

타입으로는 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color 등이 있습니다.

여기서는 지원한다고는 하나 html5 에서 이 input 타입들은 현재 호환성이 100%되지는 않는걸로 알고 있습니다.

브라우져마다 각각 지원여부가 다른걸로 알고 있습니다.





Textarea(텍스트에어리어)

티스토리의 댓글창 같은곳이죠. 물론 티스토리 뿐만 아니라 많은 곳에서 댓글창 같은 곳에 사용하는 태그입니다.

textarea 는 여러행의 텍스트를 지원하는 태그입니다.

기본이지만 부트스트랩에서 지원한다고 나오네요....(당연한것을....)



Checkboxes and radios(체크박스와 라디오버튼)

부트스트랩에서도 체크박스와 라디오버튼을 지원한다고 합니다.(또 당연한 이야기....이걸 지원안하면 안되는걸 가지고...ㅎㅎㅎㅎ)

여기서 알아두어야 할 점은 뭘까요.

체크박스와 라디오버튼 뭐가 다른걸까요???

생김새가 다르죠....ㅎㅎㅎㅎㅎ. 그것뿐만이 아니라 둘의 차이점은 이렇습니다.

체크박스는 다중선택이 가능합니다. 즉 한개를 선택할 수도 있고, 두개, 세개 여러개를 선택을 할 수 있습니다.


하지만 라디오버튼은 반드시 하나만 선택이 됩니다. 즉 둘중 하나만 선택을 해야하죠.

이 차이점을 가지고 어디에 체크박스를 써야하는지 라디오버튼을 써야하는지 선택하면 됩니다.


참고사항이였구요. 부트스트랩에서는 이 체크박스와 라디오버튼을 두가지 형태로 제공합니다.

기본형태(stacked)와 인라인형태(inline) 입니다.


기본형태(stacked).

기본형태는 우리가 알고 있는 형태입니다. 간단이 클래스를 checkbox 나 radio 를 선언해주기만 하면 됩니다.

그럼 기본적인 CSS 설정이 적용이 됩니다. 뭐....블럭으로 처리한다든가, vertical-align 을 middle 등으로 처리하는등 기본적인 설정이 적용이 됩니다.

아래는 예제.





인라인형태(inline).

인라인 형태는 위의 기본형태로 세로로 나열(block)되는것이 아니라 수평으로 나열(inline)되는 형식입니다.

기본형태는 클래스를 checkbox 나 radio 등으로 했지만 인라인으로 하려면 여기에 inline 만 덧붙이면 됩니다.

즉 <label class="checkbox-inline"> 이렇게 말입니다.

예제는 아래 이미지를 참고하시면 됩니다.




Selects(셀렉트)

셀렉트는 여러가지 옵션중에서 하나를 선택해서 보여주는 형식입니다.

select 태그에 form-control 클래스만 부여하면 됩니다.

참고로 셀렉트에는 multiple 라는 속성이 있습니다.이것도 지원하다고 나오는데요. multiple 은 옵션을 전부 보여주는 형태를 말합니다.


아래 이미지에서 1 2 3 4 5 와 같이 나오는 두번째에 해당하는것이 multiple 속성을 추가한 것입니다.




Static control(정적인, 고정된 컨트롤)


고정된 컨트롤이란 아래 이미지처럼 label 과 input 이 같이 붙어 있는 형태로 여백(margin)이 얼마 없는 형태로 예제로 이메일을 적은것처럼 label 과 같이 쌍을 이루지만 input 이 아닌 일반 태그(여기서는 p)에 form-control-static 클래스를 부여하는 것을 말하는것 같습니다.


이미지를 보시면 첫번째것은 form-control-static 클래스를 부여했지만 두번째것은 없습니다. 그 차이점을 유념해서 보시기 바랍니다.





Form states(폼의 상태)


부트스트랩에서 폼 컨트롤과 레이블을 사용하면 그 상태로 사용자에게 어느정도 피드백을 제공합니다. 즉 어떤 형태인지, 어떤 상태인지 사용자가 알수 있다는 겁니다.

그중에서도 각각의 상태에 대해서 지원하는 종류를 알아봅니다.


Input focus

인풋에 포커스가 갔을때의 상태를 보여줍니다. 예를들어 아래 이미지를 보시면 input 에 포커스가 가면 보더색상이 파랑색계열로 변하고, box-shadow 가 나오는 등 기본적인 설정이 되어 있는 상태입니다.

이런 부분을 부트스트랩에서 지원한다는 이야기 입니다.




Disabled inputs(비활성화된 인풋)

부트스트랩에서는 인풋박스를 비활성화된 상태(입력불능)로 사용할 수 있습니다.

단순이 input 속성에 disabled 속성만 추가하면 됩니다. 원래 웹표준은 disabled="disabled" 입니다. html5에서는 그런거없이 바로 아래처럼 입력해도 됩니다.


아래 이미지를 보시면 마우스가 입력불능상태로 된것이 보일겁니다.



Disabled fieldsets(비활성화된 필드셋)

위와 마찬가지로 필드셋에도 비활성상태로 만들수가 있습니다.

단순이 필드셋에 disabled 속성만 추가하면 됩니다. 

마우스가 입력불능상태로 된것이 보이죠....



Validation states(유효성검증 상태)

부트스트랩은 인풋박스에 유효성 검증 상태를 나타낼수 있는 클래스를 제공합니다.

이를테면 성공했을때(올바르게 입력이 됐을때), 경고, 오류(잘못입력했을때) 등을 나타낼수 있도록 클래스를 지원합니다.

단순이 클래스만 추가하면 각각의 색깔로 보여집니다.




Control sizing(컨트롤 크기조정)


컨트롤의 크기을 조정하려면 그리드를 나눌때 사용했던 .col-lg , .col-sm 등 뒤에 붙는 단어를 사용합니다.

사용하되 인풋에 사용하니 input-lg 하면 되는거죠.


Height sizing(높이조정)

높이조정은 위에서 말했듯 .input-lg, input-sm 클래스만 넣어주면 됩니다.

만약 넣지 않는다면 기본크기로 설정이 됩니다.



Column sinzing(열 크기조정)

열의 크기조정은 조금 생각을 해야합니다. 그리드시스템과 흡사합니다.

부모요소에 반드시 .row 클래스가 있어야하고 그 자식으로 .col-lg-2 , .col-lg-3 , .col-lg-4 등의 클래스를 부여합니다.

그럼 그리드와 마찬가지로 세로로 정렬이 나뉘어집니다.



Help text(도움말)


부트스트랩은 폼에 도움말이라는 기능을 지원합니다.

폼에서 단순이 부가적인 정보를 제공하고자 할때 텍스트로 정보를 주는데 사용합니다.

.help-block 라는 클래스를 부여하면 색상이 조정되고, 한 횡을 다 차지하는 블럭처리가 되는등의 기본 설정을 따릅니다.





폼에 대한 내용이 역시 많군요. 폼하나만으로도 엄청난 길이를 차지했습니다.

다음에는 버튼부터 시작하겠습니다.


댓글

  1. 2013.09.30 00:28 신고 BSm21  댓글주소  수정/삭제  댓글쓰기

    부트스트랩을 이용해서 표를 작업중입니다. <td class="test> 로 하고
    css을 하나 선언해서 test {padding-left:10px} 라고 해서 셀의 좌측을
    10픽셀만큼을 띄우고 싶은데 안되어서 도움을 얻고자 합니다.

    text-align 등은 동작하는데 padding만 안되네요.

    • BlogIcon 대문 demun 2013.09.30 08:23 신고  댓글주소  수정/삭제

      익스플로러에서 그러죠?
      이건 부트스트랩하고는 상관없는것 같습니다.
      테이블이 원래 말을 안들어요....

      td 에 패딩이 안먹으로 td 안에 div 를 하나더 만들어서 거기에 패딩을 줘보세요.