Template นี้จะมีการสร้างฟอร์มเพิ่มข้อมูลสมาชิกโดยใช้ class form-horizontal ของ bootstrap เป็นตัวจัดระเบียบให้มีความสวยงามและน่าใช้งาน เป็นฟอร์มที่ทำขึ้นแบบง่ายๆครับ ยังไม่มีลูกเล่นอะไรมากมาย แต่ก็สามารถนำไปประยุกต์ใช้งานได้จริง และรองรับการใช้งานบนมือถือ
และมีการกำหนดรูปแบบของการกรอกข้อมูล username & password ตามที่กำหนด ดังนี้
pattern=”^[a-zA-Z0-9]+$” คือ ให้กรอกข้อมูลเป็นตัวอักษรภาษาอังกฤษ ตัวเลขและอักขรพิเศษเท่านั้น
minlength=”2″ คือ กำหนดให้กรอกข้อมูลอย่างน้อย 2 ตัวขึ้นไป
และจะมีการกำหนดสิทธิ์ในการเพิ่มข้อมูลสมาชิก คือ ให้ฟิลด์ m_level มีค่า = m ดังโค๊ด
|
1 |
<input name="m_level" type="hidden" value="m" /> |
code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>design by devbanban.com </title> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <br><br><br> <div class="col-md-2"></div> <div class="col-md-10"> <form action="http://devbanban.com/" method="POST" name="add" class="form-horizontal" id="add"> <div class="form-group"> <div class="col-sm-2" ></div> <div class="col-sm-5" align="left"><b> :: เพิ่มข้อมูลสมาชิก :: </b></div> </div> <div class="form-group"> <div class="col-sm-2" > Username </div> <div class="col-sm-4" align="left"> <input name="m_user" type="text" required class="form-control" placeholder="username" pattern="^[a-zA-Z0-9]+$" title="ภาษาอังกฤษหรือตัวเลขเท่านั้น" minlength="2" /> </div> </div> <div class="form-group"> <div class="col-sm-2" > Password </div> <div class="col-sm-4" align="left"> <input name="m_pass" type="password" required class="form-control" placeholder="password" pattern="^[a-zA-Z0-9]+$" title="ภาษาอังกฤษหรือตัวเลขเท่านั้น" minlength="2"/> </div> </div> <div class="form-group"> <div class="col-sm-2" > ชื่อ </div> <div class="col-sm-5" align="left"> <input name="m_name" type="text" required class="form-control" /> </div> </div> <div class="form-group"> <div class="col-sm-2" > อีเมล์ </div> <div class="col-sm-5" align="left"> <input name="m_email" type="email" class="form-control" /> </div> </div> <div class="form-group"> <div class="col-sm-2" > เบอร์โทร </div> <div class="col-sm-5" align="left"> <input name="m_phone" type="text" required class="form-control" /> </div> </div> <div class="form-group"> <div class="col-sm-2"> </div> <div class="col-sm-6"> <button type="submit" class="btn btn-primary" id="btn"> เพิ่มข้อมูล </button> <input name="m_level" type="hidden" value="m" /> </div> </div> </form> </div> </div> </div> </body> </html> |
ผลการทำงาน formregister ทดลองคลิก…
สามารถนำไปประยุกต์ใช้ได้กับระบบสมัครสมาชิกจากบทความ
WE.14 โปรแกรมเพิ่มข้อมูลแบบที่ 2และป้องกันการสมัครสมาชิกซ้ำ Dreamweaver + php + database