แจกฟอร์มบันทึกการลา สำหรับทำระบบลาออนไลน์

ออกแบบจาก Bootstrap v4.5 รองรับทั้งหน้าจอ PC & Mobile สำหรับเอาไปศึกษาและต่อยอดครับ
class หลักๆ ที่ใช้

class col (grid)
class form + คุณสมบัติแบบง่ายๆ
class btn

ผลลัพธ์การทำงาน Mobile

ผลลัพธ์การทำงาน PC

ระบบบันทึกเวลาเข้า-ออกงาน และบันทึกข้อมูลการทำงาน *สนับสนุน 1000 บาท รายละเอียดใต้คลิป

ระบบแจ้งซ่อม รายละเอียดใต้คลิป

Full Code

<!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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<!doctype html>

<head>

<title>devbanban.com</title>

</head>

<body>

<h1 class="text-center"> ฟอร์มบันทึกการลา </h1>

<hr>

</div>

<br>

ประเภท

</label>

<option value="">-เลือกประเภทการลา-</option>

<option value="2">-ลากิจ</option>

<option value="3">-ลาพักผ่อน</option>

</select>

</div>

เรียน

</label>

</div>

ข้าพเจ้า

</label>

</div>

ตำแหน่ง

</label>

</div>

สาเหตุ

</label>

</div>

กำหนด

</label>

</div>

วัน

</label>

</div>

ตั้งแต่

</label>

</div>

ถึง

</label>

</div>

ติดต่อ

</label>

</div>

</label>

<button type="submit" class="btn btn-success" style="width: 100%">บันทึก</button>

</div>

</form>

</div>

<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>

</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/

แจกฟอร์มบันทึกการลา สำหรับทำระบบลาออนไลน์

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่

Share this: