ฟอร์ม แบบ XHTML
<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"> </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"> </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]
ฟอร์มแบบ HTML
ฟอร์มแบบ XHTML
[/ex]
ฟอร์มแบบ XHTML