원문보기 : http://www.picment.com/articles/css/funwithforms/

다음과 같은 형태의 Form을 우측과 같은 형태로 만드네요.

1. FORM의 구성

<fieldset>과 <legend>, <lable>을 이용하요 form을 구성합니다.

<legend>엘레멘트는 fieldset에 대한 설명을 담고 있는 것으로서 굳이 사용하지 않더라도 상관은 없다고 합니다.

<form action="default.asp" method="post">
<fieldset>
<legend>Contact form </legend>
<label for="name">Name:</label><br />
<input type="text"  id="name" name="name"  />
<br />
<label for="email">Email:</label><br />
<input type="text" id="email" name="email" /><br/>
<label for="website">Website:</label><br />
<input type="text" id="website" name="website" value="http://" />
<br />
<label for="comment">Comment:</label><br />
<textarea cols="30" rows="15" name="comment" id="comment">
</textarea>
<br /><label for="submit">&nbsp;</label><br />
<input id="submit" name="submit" type="submit" value="submit" />
</fieldset>
</form>

2. CSS를 정의합니다.

body {
          font-family:Verdana, Arial, Helvetica, sans-serif;
          font-size:60%;
          margin:50px;
          color:#666;  }
.fieldset {
          width:300px; }
.fieldset .label {
          text-align:right;
          width:70px;
          float:left;
          padding:0.2em;
          margin:0;
          margin-top:0.3em; }
.fieldset .nobr {
          display：none; } 
.fieldset .textfield {
          margin:3px;
          height:20px;
          width:200px; }
.fieldset .textarea {
          margin:3px;
          height:165px;
          width:200px; }

3. Form 엘레멘트들의 속성을 hidden으로 해줍니다.

간단한 트릭을 활용하여 form의 Border를 없애주는 겁니다.

body {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:60%;
        margin:50px;
        color:#666666;}
.fieldset {
        width:300px; }
.fieldset label {
        text-align:right;
        width:70px;
        float:left;
        padding:0.2em;
        margin:0;
        margin-top:0.3em; }

.fieldset .nobr {display：none;} 
.fieldset .textfield {
        margin:3px;
        height:20px;
        width:200px;
        border:solid 0 #fff;
}
.fieldset .textarea {
        margin:3px;
        height:165px;
        width:200px;
        border:solid 0 #fff;
}
.submit {
        margin:3px;
        height:20px;
        border:solid 0 #fff;
        width:80px;
 }

4. Input form에 BG 이미지를 부여

• See step V — The final result

출처 : Tong - 드렁크수달스님의 ■ CSS ■통