ในไฟล์ XHTML (ไฟล์ formtest.htm)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>แบบฟอร์ม</title>
<link rel="stylesheet" type="text/css" href="formtestcss.css">
</head>
<body>
การจัดหน้าตาของฟอร์มจะใช้ label แสดงข้อความ และใช้แท็ก p แทนการใช้ตาราง ซึ่ง p ทำหน้าที่เหมือนแท็ก tr ต่อไปเป็นโค้ดของฟอร์ม
<form action="#" method="post" enctype="multipart/form-data">
<p>
<label for="name">ชื่อ : </label>
<input type="text" name="name" id="name" />
</p>
<p>
<label for="mail"> อีเมลล์ : </label>
<input type="text" name="mail" id="mail" />
</p>
<p>
<label for="note">รายละเอียด : </label>
<textarea name="note" id="note" cols="50" rows="10"></textarea>
</p>
<p class="sub">
<input type="submit" name="submit" class="submit" value="ส่งข้อมูล" />
</p>
</form>
</body>
</html>
ในไฟล์ CSS (ไฟล์ formtestcss.css)
p {
padding: 0;
margin: 4px 0;
}
label {
float: left;
position: relative;
width: 145px;
line-height: 20px;
text-align: right;
padding-right: 5px;
}
p.sub {
padding-left: 150px;
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น