บทความนี้เป็นตัวอย่างการทำฟอร์มไว้ใช้สำหรับกรอกข้อมูลประวัตส่วนตัว ซึ่งหลายท่านอาจเคยเห็นมาหลายแบบแล้ว แต่โค้ดที่ผมจะนำมาให้ดูนี้เป็นการใช้งานของโค้ด php + javascript ซึ่งลักษณะการทำงานคือ เมื่อเรากรอกข้อมูลในฟอร์มแล้วหากกรอกไม่ครบถ้วน หรือกรอกไม่ถูกต้อง มีจะข้อความเตือนตลอด ซึ่งทำให้ง่ายต่อการกรอกข้อมูล มาดู code กันเลยครับ
ตัวอย่าง code simple1.php
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample 1</title>
<style>
body { padding: 10px 0px 0px 0px; }
td
{
padding: 2px 5px;
text-align: left;
}
h4 { margin: 0px; }
input.editfield, select.editfield, textarea.editfield { width: 18em; }
</style>
</head>
<body>
<center>
<form method="post" action="sample1.php">
<input type="hidden" name="form_validation_rules" value="
Username Password Year Month Day Details : empty;
Username Password : len >= 3;
Username Password : chnum_;
E-mail: email;
Membership : select 0;
Year : > 1900;
Year Month Day : date;
Sex : radio;
Details: len <= 20;
Categories[] Newsletters[] : cnt >= 2;
Agree : terms;
" />
<input type="hidden" name="form_validation_behaviours" value="
Details : count details_count 20 black red;
Year : next 4;
Month Day : next 2;
Month Day : prev;
" />
<table>
<tr>
<td style="padding-bottom: 10px;" colspan="2"><h4>Sample 1</h4></td>
</tr>
<tr>
<td>Username:</td>
<td><input class="editfield" type="text" name="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input class="editfield" type="password" name="Password" /></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input class="editfield" type="text" name="E-mail" /></td>
</tr>
<tr>
<td>Membership:</td>
<td>
<select class="editfield" name="Membership">
<option value="0"></option>
<option value="1">Silver</option>
<option value="2">Gold</option>
<option value="3">Platinum</option>
</select>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="text" name="Year" size="4" maxlength="4" />
<input type="text" name="Month" size="2" maxlength="2" />
<input type="text" name="Day" size="2" maxlength="2" />
<small>yyyy/mm/dd</small>
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<input type="radio" name="Sex" value="male" /> Male
<input type="radio" name="Sex" value="female" /> Female
</td>
</tr>
<tr>
<td>Details:</td>
<td>
<textarea class="editfield" name="Details" rows="4"></textarea>
<br />
<small><span id="details_count">0</span> out of 20 characters</small>
</td>
</tr>
<tr>
<td>Categories:</td>
<td>
<select class="editfield" name="Categories[]" multiple="multiple" size="4">
<option value="0">Cars</option>
<option value="1">Computers</option>
<option value="2">Dogs</option>
<option value="3">Food</option>
</select>
<br />
<small>Use ctrl+mouse to select multiple categories</small>
</td>
</tr>
<tr>
<td>Newsletters:</td>
<td>
<input type="checkbox" name="Newsletters[]" value="0" /> Cars <br />
<input type="checkbox" name="Newsletters[]" value="1" /> Computers <br />
<input type="checkbox" name="Newsletters[]" value="2" /> Dogs <br />
<input type="checkbox" name="Newsletters[]" value="3" /> Food
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="Agree" />
<small>By checking this box you agree to some terms</small>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
<script src="form-validation.js"></script>
</center>
</body>
</html>
ส่วนอันนี้เป็นโค้ด form-validation.js เป็นไฟล์ประกอบน่ะครับ download ไปใช้กันได้เลย
ไม่มีความคิดเห็น:
แสดงความคิดเห็น