英傑銳網路數位設計

我們該如何使用純CSS語法

不使用任何Table表格，將表單達到美化的效果呢？

首先，我們必須要先設計好表單的格式

這裡我們使用 li 及 label 做搭配

先做出以下未經美化的表單內容，如下圖：

  

CODE :

<form action="example.php">
    <fieldset>
      <legend> Contact Details</legend>
         <ol>
           <li>
             <label for="name">Name:</label>
             <input id="name" name="name" type="text" class="fildform" />
           </li>
           <li>
             <label for="email">Email address:</label>
             <input id="email" name="email" type="text" class="fildform" />
           </li>
           <li>
             <label for="phone">Telephone:</label>
             <input id="phone" name="phone" type="text" class="fildform" />
           </li>
          </ol>
   </fieldset>
   <fieldset>
     <legend>Delivery Address</legend>
        <ol>
          <li>
             <label for="address1">Address 1:</label>
             <input id="address1" name="address1" type="text" class="fildform" />
          </li>
          <li>
             <label for="address2">Address 2:</label>
             <input id="address2" name="address2" type="text" class="fildform" />
          </li>
          <li>
             <label for="suburb">Suburb/Town:</label>
             <input id="suburb" name="suburb" type="text" class="fildform" />
          </li>
          <li>
             <label for="postcode">Postcode:</label>
             <input id="postcode" name="postcode" type="text" class="fildform" />
          </li>
          <li>
             <label for="country">Country:</label>
             <input id="country" name="country" type="text" class="fildform" />
          </li>
        </ol>
    </fieldset>
    <fieldset class="submit">
       <input class="submit" type="submit" value="Send" />
    </fieldset>
</form>

最後，我們在套上CSS語法

即可產生如下圖美美的表單囉.....

  

CODE:

<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
fieldset {
	margin: 1.5em 0 0 0;
	padding: 0;
    border: 1px solid #CCC;
}
legend {
	margin-left: 1em;
	color: #009;
    font-weight: bold;
}
label {
	float: left;
	width: 10em;
	margin-right: 1em;
}
fieldset ol {
	list-style: none;
	padding-top: 3px;
	padding-left: 2em;
	padding-bottom: 3px;
}
fieldset li {
	line-height: 24px;
	margin-top: 5px;
	margin-bottom: 5px;
}
fieldset li input.fildform{
	line-height: 24px;
	height: 24px;
	border: 1px solid #CCC;
}
fieldset .submit {
	border-style: none;
}
</style>