Template นี้จะมีการสร้างฟอร์มสมัครสมาชิกโดยใช้ class form-horizontal ของ bootstrap เป็นตัวจัดระเบียบให้มีความสวยงามและน่าใช้งาน เป็นฟอร์มที่ทำขึ้นแบบง่ายๆครับ ยังไม่มีลูกเล่นอะไรมากมาย แต่ก็สามารถนำไปประยุกต์ใช้งานได้จริง และรองรับการใช้งานบนมือถือ
และมีการกำหนดรูปแบบของการกรอกข้อมูล username & password ตามที่กำหนด ดังนี้
pattern=”^[a-zA-Z0-9]+$” คือ ให้กรอกข้อมูลเป็นตัวอักษรภาษาอังกฤษ ตัวเลขและอักขรพิเศษเท่านั้น
minlength=”2″ คือ กำหนดให้กรอกข้อมูลอย่างน้อย 2 ตัวขึ้นไป
code: register.html
|
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 76 77 78 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Form Register</title> <!-- 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"> <div class="col-md-7 col-xs-12"> <form name="register" action="register_db.php" method="POST" id="register" class="form-horizontal"> <div class="form-group"> <div class="col-sm-2"> </div> <div class="col-sm-5" align="left"> <br> <h4> สมัครสมาชิก </h4> </div> <input name="Admin_level" type="hidden" id="Admin_level" value="2" /> </div> <div class="form-group"> <div class="col-sm-2" align="right"> Username : </div> <div class="col-sm-5" align="left"> <input name="Admin_username" type="text" required class="form-control" id="Admin_username" placeholder="username" pattern="^[a-zA-Z0-9]+$" title="ภาษาอังกฤษหรือตัวเลขเท่านั้น" minlength="2" /> </div> </div> <div class="form-group"> <div class="col-sm-2" align="right"> Password : </div> <div class="col-sm-5" align="left"> <input name="Admin_password" type="password" required class="form-control" id="Admin_password" placeholder="password" pattern="^[a-zA-Z0-9]+$" minlength="2" /> </div> </div> <div class="form-group"> <div class="col-sm-2" align="right"> ชื่อ-สกุล : </div> <div class="col-sm-7" align="left"> <input name="Admin_name" type="text" required class="form-control" id="Admin_name" placeholder="ชื่อ-สกุล" /> </div> </div> <div class="form-group"> <div class="col-sm-2" align="right"> อีเมล์ : </div> <div class="col-sm-6" align="left"> <input name="Admin_email" type="email" class="form-control" id="Admin_email" placeholder="อีเมล์"/> </div> </div> <div class="form-group"> <div class="col-sm-2" align="right"> เบอร์โทร : </div> <div class="col-sm-6" align="left"> <input name="Admin_phone" type="text" class="form-control" id="Admin_phone" placeholder="เบอร์โทร" /> </div> </div> <div class="form-group"> <div class="col-sm-2" align="right"> ที่อยู่ : </div> <div class="col-sm-6" align="left"> <textarea name="address" class="form-control"></textarea> </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> </div> </div> </form> </div> </div> </div> </body> </html> |
ผลการทำงาน
อย่าลืมนำไปพัฒนาต่อนะครับ