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

demun
퍼블리셔/Bootstrap
2013. 9. 13. 08:41

이번 시간에는 폼입니다.

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

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

Forms
Inline form(인라인 폼)
Horizontal form(수평형태의 폼)
Supported controls(지원되는 컨트롤)
Static control(정적인, 고정된 컨트롤)
Form states(폼의 상태)
Input focus
Disabled inputs(비활성화된 인풋)
Disabled fieldsets(비활성화된 필드셋)
Validation states(유효성검증)
Control sizing(컨트롤 높이 조정)
Help text(도움말)

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 클래스를 부여했지만 두번째것은 없습니다. 그 차이점을 유념해서 보시기 바랍니다.