[bootstrap] 폼 만들기

http://twitter.github.com/bootstrap/base-css.html#forms

bootstrap의 CSS만 사용해서, 다음과 같이 깔끔한 폼을 쉽게 만들 수 있습니다.

마침 봄싹 홈페이지를 개편하려던 중에 Bootstrap을 보게됐고, 유려하고 일관성있는 디자인, 다양한 UI 제공, 깔끔하고 얇게(?) 정리된 문서와 가벼워 보이는 구성 때문에  바로 도입했습니다.

처음엔 네비게이션 바를 만드는 것부터 했었는데, 오늘은 폼 만드는걸 했고, 다음엔 탭 뷰를 다루게 되지 않을까 싶네요. 폼은 CSS만 class만 잘 사용하면 되는데… 구성은 다음과 같습니다.

여기서 로그인 폼 코드는 다음과 같습니다.

  • form 태그에는 form-horizontal 클래스를 붙인다.
  • form 구성 요소는 div 태그를 사용하고 control-group 클래스를 붙인다.
  • form 구성 요소의 제목은 label 태그를 사용하고 control-label 클래스를 붙인다.
  • form 구성 요소의 본문을 둘러싸는 div 태그를 사용하고 controls 클래스를 붙인다.
  • form 구성 요소는 div.controls 안에 둔다.
  • input type=”text” 요소에는 input-xlarge 클래스를 사용한다.
  • form 버튼을 둘러싸는 div 태그를 만들고 form-actions 클래스를 붙인다.
  • form 버튼은 div.form-actions 안에 두고, button 태그를 사용하고 btn 클래스를 붙인다.

Chapter 5. Forms

폼을 구성하는 방법

<table> 사용하기

<form action="/path/to/script" method="post">

<table>

<tr>

<th>Name:</th>

<td><input type="text" name="name" /></td>

</tr>

<tr>

<th>Email:</th>

<td><input type="text" name="email" /></td>

</tr>

<tr>

<th>&nbsp;</th>

<td><input type="submit" value="submit" /></td>

</tr>

</table>

</form>
  • 복잡한 폼을 표현할 때에 유용하다.

<br/> 사용하기

<form action="/path/to/script" method="post">
<p>

Name: <input type="text" name="name" /><br />

Email: <input type="text" name="email" /><br />

<input type="submit" value="submit" />

</p>
</form>
  • <br/> 간격이 좀 좁다.
  • 줄도 좀 안 맞는다.
  • CSS로 margin을 줘서 해결할 수 있다.
input {

margin: 6px 0;

}
  • input 컴포넌트의 위와 아래에 6px의 간격을 준다.

<p> 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name">Name:</label><br />

<input type="text" id="name" name="name" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" /></p>

<p><input type="submit" value="submit" /></p>

</form>
  • 각각의 컴포넌트를 <p>로 묶었다.
  • margin은 CSS로 처리할 수 있다.
#thisform p {

margin: 6px 0;

}
  • <label>의 for 속성과 <input>의 id에 같은 값을 설정하여 둘을 묶을 수 있다.
  • 그렇게 하면, 해당하는 컴포넌트와 label같의 구조적인 의미를 묶을 수 있고, label을 클릭하여 해당 컴포넌트에 영향을 줄 수 있어서 클릭이 가능한 범위가 늘어난다.

Form 정의하기

<form action="/path/to/script" id="thisform" method="post">

<dl>

<dt><label for="name">Name:</label></dt>

<dd><input type="text" id"name" name="name" /></dd>

<dt><label for="email">Email:</label></dt>

<dd><input type="text" id="email" name="email" /></dd>

<dt><label for="remember">Remember this info?</label></dt>

<dd><input type="checkbox" id="remember" name="remember" /></dd>

<dt><input type="submit" value="submit" /></dt>

</dl>

</form>
  • <dl>: definition list 사용하기. chapter8에서 자세히 다룬다.
  • label은 <dt>로 감싸고 컴포넌트는 <dd>로 감싼다. 스타일 적용하지 않으면 <dd>들은 기본으로 들여쓰기 해준다. 따라서 어긋나 있다. CSS없이 못 쓰겟다.
form dd {

margin: 0;

}



form dt {

float: left;

padding-right: 10px;

}
  • <dt>와 <dd>가 같은 줄에 놓이게 된다. <dt> 오른쪽으로 10px 간격을 주고 <dd>가 자리를 잡는다.

Extra Credit

<input>의 tabindex 속성 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name">Name:</label><br />

<input type="text" id="name" name="name" tabindex="1" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" tabindex="2" /></p>

<p><input type="checkbox" id="remember" name="remember"

tabindex="3" />

<label for="remember">Remember this info?</label></p>

<p><input type="submit" value="submit" tabindex="4" /></p>

</form>
  • tab키를 눌러서 컴포넌트 순회하는 순서를 설정할 수 있다.

<label>의 accesskey 속성 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name" accesskey="9" >Name:</label><br />

<input type="text" id="name" name="name" tabindex="1" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" tabindex="2" /></p>

<p><input type="checkbox" id="remember" name="remember"

tabindex="3" />

<label for="remember">Remember this info?</label></p>

<p><input type="submit" value="submit" tabindex="4" /></p>

</form>
  • label의 accesskey에 설정한 번호를 누르면 해당 label과 묶여있는 컴포넌트로 커서가 이동한다.
  • 검색창 같이 자주 사용하는 컴포넌트에 달아두면 유용하다.
  • 윈도우에서는 ALT + 숫자, Mac에서는 Command + 숫자를 눌려야 한다.

스타일

  • 폼 내부의 모든 엘리먼트에 공통으로 적용할 것과 그 중 일부에만 적용할 스타일을 구분하여 설정 한다.
#thisform {

font-family: Georgia, serif;

font-size: 12px;

color: #999;

}



#thisform label {

font-family: Verdana, sans-serif;

font-weight: bold;

color: #660000;

}
  • thisform id를 가진 form안에 있는 label들은 font-size: 12px; 속성을 상속받는다. color는 재정의해서 #660000; 값을 사용한다.

<fieldset> 사용하기

  • 필드들을 그룹핑 할 수 있다.
  • <legend>를 사용해서 그룹핑 박스에 이름을 설정할 수 있다.
#thisform fieldset {

border: 1px solid #ccc;

padding: 0 20px;

}

#thisform legend {

font-family: arial, sans-serif;

font-weight: bold;

font-size: 90%;

color: #666;

background: #eee;

border: 1px solid #ccc;

border-bottom-color: #999;

border-right-color: #999;

padding: 4px 8px;

}
  • 이미 form에 있는 <p>에서 충분히 padding을 설정했기 때문에, filedset의 위와 아래의 padding을 0으로 설장하고, 오른쪽과 왼쪽은 20px로 설정한다.
  • legend의 fond-size는 thisform에서 설정한 fond-size 크기에 비례하도록 %를 사용해서 설정한다.