GORAGOD.com

รูปแบบเดิมๆในการใช้ ฟอร์ม ของ HTML ก็คือการสร้างฟอร์มในตาราง ดังโค้ด

<form action="index.php" method="post" name="test">
<table>
<tr><td align="right">User :</td><td align="left"><input size="58" type="text" name="user" maxlength="80"></td></tr>
<tr><td align="right">Password : </td><td align="left"><input size="58" type="password" name="password" maxlength="80"></td></tr>
<tr><td align="right">Detail : </td><td align="left"><textarea name="message" cols="55" rows="8"></textarea></td></tr>
<tr><td align="right">&nbsp;</td><td align="left"><input type="submit" name="submit" value="Submit"></td></tr>
</table>
</form>

สำหรับ XHTML เราจะมี label ให้ใช้เพื่อกำหนดหัวข้อที่เกี่ยวข้องกับสิ่งที่กรอก ซึ่ง tag label นี้จะต้องมี property for ด้วย ซึ่งค่า for นี้จะต้องสัมพันธ์กันกับ id ของ input ที่ต้องกรอก จากตัวอย่าง เราจะใช้ tag p ในการกำหนดแต่ละรายการในตาราง โดยใช้ CSS ควบคุมอีกที

<form action="index.php" method="post" name="test">
<p><label for="user">User : </label><input size="58" type="text" id="user" name="user" maxlength="80" /></p>
<p><label for="password">Password : </label><input size="58" type="password" id="password" name="password" maxlength="80" /></p>
<p><label for="message">Detail :</label><textarea id="message" name="message" cols="55" rows="8"></textarea></p>
<p><label for="submit">&nbsp;</label><input type="submit" id="submit" name="submit" value="Submit" /></p>
</form>

สำหรับ CSS ที่ใช้กำหนดรูปแบบของฟอร์มก็มีโค้ด ดังนี้

/* กำหนดการแสดงผลของ label */
label {
  float:left;
  position:relative;
  width:70px;
  padding-right:5px;
  font-weight:bold;
  color:#666666;
  text-align:right;
  line-height:20px;
}
/* สำหรับแต่ละรายการ */
p {
  margin:3px;
  line-height:20px;
}

[ex] [/ex]