แจกฟรีหน้าจอแบบฟอร์มลงทะเบียนฉีดวัคซีนโควิด-19 ออกแบบด้วย Bootstrap v5 รองรับการใช้งานทั้งบนมือและเดสท็อป
สำหรับเอาไปศึกษาและพัฒนาต่อยอดครับ
class หลักๆ ที่ใช้
- class col (grid)
- class form + คุณสมบัติแบบง่ายๆ
- btn
- อื่นๆ เอาไปต่อยอดเองได้เต็มที่
ผลลัพธ์การทำงาน
Full code (save .html ก็ run ได้ละครับ)
|
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>ลงทะเบียนซีดวัคซีน มหาวิทยาลัย devbanban.com </title> </head> <body> <div class="container"> <div class="row"> <div class="col-12 col-sm-12"> <div class="alert alert-info" role="alert"> <h3>*แบบฟอร์มลงทะเบียนฉีดวัคซีนโควิด-19 มหาวิทยาลัย...</h3> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-12 col-sm-12"> <form action="https://devbanban.com/?p=2867" method="post"> <h5>*กรุณากรอกข้อมูลให้ครบทุกช่อง</h5> <div class="row"> <div class="col-12 col-sm-6 mb-3"> <select name="firstname" class="form-control" required> <option value="">-คณะที่สังกัด-</option> <option value="คณะวิทยาการจัดการ">-คณะวิทยาการจัดการ</option> <option value="คณะวิทยาศาสตร์">-คณะวิทยาศาสตร์</option> <option value="คณะเทคโนโลยีสารสนเทศ">-คณะเทคโนโลยีสารสนเทศ</option> <option value="คณะมนุษยศาสตร์">-คณะมนุษยศาสตร์</option> </select> </div> <div class="col-12 col-sm-6 mb-3"> <input type="text" name="stdcode" class="form-control" placeholder="รหัสนักศึกษา 10 หลัก" minlength="10" maxlength="10" required> </div> </div> <div class="row"> <div class="col-12 col-sm-2 mb-3"> <select name="firstname" class="form-control" required> <option value="">-คำนำหน้าชื่อ-</option> <option value="นาย">-นาย</option> <option value="นางสาว">-นางสาว</option> </select> </div> <div class="col-12 col-sm-5 mb-3"> <input type="text" name="name" class="form-control" placeholder="ชื่อ" required> </div> <div class="col-12 col-sm-5 mb-3"> <input type="text" name="lastname" class="form-control" placeholder="นามสกุล" required> </div> </div> <div class="row"> <div class="col-12 col-sm-6 mb-3"> <input type="text" name="phone" class="form-control" placeholder="เบอร์โทรศัพท์ 10 หลัก" minlength="10" maxlength="10" required> </div> <div class="col-12 col-sm-6 mb-3"> <input type="email" name="email" class="form-control" placeholder="email" required> </div> </div> <div class="row"> <div class="col-12 col-sm-6 mb-3"> <input type="text" name="parents" class="form-control" placeholder="ชื่อบุคคลที่สามารถติดต่อได้กรณีฉุกเฉิน" required> </div> <div class="col-12 col-sm-6 mb-3"> <input type="text" name="parents_phone" class="form-control" placeholder="เบอร์โทรศัพท์ 10 หลัก" minlength="10" maxlength="10" required> </div> </div> <div class="row"> <div class="col-12 col-sm-12"> <button type="submit" class="btn btn-primary" style="width: 100%;">บันทึกข้อมูล</button> </div> </div> </form> </div> </div> </div> <footer> <p class="text-center" style="margin-top: 100px;"> designed by devbanban.com @2021 <br> คอร์สออนไลน์ราคาถูก <a href="https://devbanban.com/?cat=250" target="_blank"> คลิก. </a> </p> </footer> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> --> </body> </html> |
ลองเอาไปประยุกต์ใช้ดูครับ
ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/