ออกแบบจาก Bootstrap v4.5 รองรับทั้งหน้าจอ PC & Mobile สำหรับเอาไปศึกษาและต่อยอดครับ
class หลักๆ ที่ใช้
- class col (grid)
- class form + คุณสมบัติแบบง่ายๆ
- class btn
ผลลัพธ์การทำงาน Mobile
ผลลัพธ์การทำงาน PC
ระบบบันทึกเวลาเข้า-ออกงาน และบันทึกข้อมูลการทำงาน *สนับสนุน 1000 บาท รายละเอียดใต้คลิป
ระบบแจ้งซ่อม รายละเอียดใต้คลิป
Full 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 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 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>devbanban.com</title> </head> <body> <div class="container" style="margin-top: 50px;"> <div class="row"> <div class="col-sm-12"> <h1 class="text-center"> ฟอร์มบันทึกการลา </h1> <hr> </div> <div class="col-sm-12" style="background-color: #f7f3bc;"> <br> <form action="" method="post"> <div class="form-group row"> <label class="col-2 col-sm-2"> ประเภท </label> <div class="col-10 col-sm-4"> <select name="leave_type" class="form-control" required> <option value="">-เลือกประเภทการลา-</option> <option value="1">-ลาป่วย</option> <option value="2">-ลากิจ</option> <option value="3">-ลาพักผ่อน</option> </select> </div> </div> <div class="form-group row"> <label class="col-2 col-sm-2"> เรียน </label> <div class="col-10 col-sm-4"> <input type="text" name="leave_boss" readonly class="form-control" value="หัวหน้าแผนก"> </div> </div> <div class="form-group row"> <label class="col-2 col-sm-2"> ข้าพเจ้า </label> <div class="col-10 col-sm-4"> <input type="text" name="emp_name" readonly class="form-control" value="นายทดสอบ ระบบ"> </div> <label class="col-2 col-sm-1"> ตำแหน่ง </label> <div class="col-10 col-sm-4"> <input type="text" name="emp_position" readonly class="form-control" value="ทำทุกอย่าง"> </div> </div> <div class="form-group row"> <label class="col-2 col-sm-2"> สาเหตุ </label> <div class="col-10 col-sm-5"> <textarea name="leave_reason" class="form-control" required placeholder="ระบุสาเหตุการลา"></textarea> </div> </div> <div class="form-group row"> <label class="col-2 col-sm-2"> กำหนด </label> <div class="col-3 col-sm-2"> <input type="number" name="leave_day_total" required min="0" class="form-control" value="0"> </div> <label class="col-1 col-sm-1"> วัน </label> </div> <div class="form-group row"> <label class="col-sm-2"> ตั้งแต่ </label> <div class="col-sm-3"> <input type="date" name="leave_day_begin" required class="form-control"> </div> <label class="col-sm-1"> ถึง </label> <div class="col-sm-3"> <input type="date" name="leave_day_end" required class="form-control"> </div> </div> <div class="form-group row"> <label class="col-sm-2"> ติดต่อ </label> <div class="col-sm-5"> <textarea name="emp_address" class="form-control" required placeholder="ระหว่างลาติดต่อได้ที่"></textarea> </div> </div> <div class="form-group row"> <label class="col-sm-2"> </label> <div class="col-sm-3"> <button type="submit" class="btn btn-success" style="width: 100%">บันทึก</button> </div> </div> </form> </div> <div class="col-sm-12" style="margin-top: 20px;"> <center> ออกแบบจาก Bootstrap v4.5 <br> by devbanban.com สำหรับเอาไปศึกษาและต่อยอด <br> <a href="https://devbanban.com/?page_id=2309" target="_blank">สนับสนุน</a> || <a href="https://devbanban.com/?p=2867" target="_blank">คอร์สออนไลน์</a> </center> </div> </div> </div> </body> </html> |
ศึกษาการใช้งาน Bootstrap v4 เพิ่มเติม https://getbootstrap.com/docs/4.5/getting-started/introduction/
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/