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