Whiteship's Note

Chapter 5. Forms

View/HTML/CSS : 2008.03.23 15:13


폼을 구성하는 방법

<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 크기에 비례하도록 %를 사용해서 설정한다.

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top

TAG , , , , , , ,



: 1 : ··· : 9 : 10 : 11 : 12 : 13 : 14 : 15 : 16 : 17 : 18 :