ฟอร์ม แบบ XHTML
รูปแบบเดิมๆในการใช้ ฟอร์ม ของ HTML ก็คือการสร้างฟอร์มในตาราง ดังโค้ด
สำหรับ XHTML เราจะมี label ให้ใช้เพื่อกำหนดหัวข้อที่เกี่ยวข้องกับสิ่งที่กรอก ซึ่ง tag label นี้จะต้องมี property for ด้วย ซึ่งค่า for นี้จะต้องสัมพันธ์กันกับ id ของ input ที่ต้องกรอก จากตัวอย่าง เราจะใช้ tag p ในการกำหนดแต่ละรายการในตาราง โดยใช้ CSS ควบคุมอีกที
สำหรับ CSS ที่ใช้กำหนดรูปแบบของฟอร์มก็มีโค้ด ดังนี้
[ex]
<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