ฟอร์มเพิ่มข้อมูลห้องพัก ออกแบบจาก Bootstrap 5.2 (ฟรี Code) สำหรับทำโปรแกรมหอพัก

สวัสดีครับ ในบทความนี้จะแจกฟอร์มเพิ่มข้อมูลห้องพัก สำหรับเอาไประบบจัดการหอพักครับ ออกแบบโดยใช้ bootstrap5.2 และจะแจก Code ให้เอาไปศึกษาและพัฒนาต่อยอดครับ

ขอแนะนำระบบพร้อมใช้ ราคาถูก ได้ Code + Database ทั้งหมด
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.หลังบ้านระบบอีคอมเมิร์ช คลิก
5.เว็บบริษัท / เว็บองค์กร คลิก
6.ระบบหอพัก โปรแกรมหอพัก คลิก
7.ระบบยืมคืน เบิกจ่ายพัสดุ ครุภัณฑ์ คลิก
8.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
9.ระบบกระเป๋าตังค์ คลิก
10.ระบบฐานข้อมูลวิจัย คลังข้อมูลวิจัย ฐานข้อมูลวิทยานิพนธ์ Research Corpus คลิก
11.ระบบอื่นๆ เพิ่มเติม คลิก

ขอแนะนำระบบบริหารจัดการหอพัก, อพาร์ทเม้นท์ ออนไลน์, โปรแกรมจัดการหอพัก PHP MySQL Bootstrap5

สนใจ inbox มาที่ Fanpage : https://www.facebook.com/sornwebsites/

รวม Workshop ปรับพื้นฐาน ภาษา PHP PDO MySQL : คลิก

คลิปแสดงการทำงาน

Full code สามารถ save เป็น .html แล้วรันได้เลยครับ เช่น form.html (รันบนเว็บบราวเซอร์)

<!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.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <title>ฟอร์มเพิ่มข้อมูลห้องพัก ออกแบบจาก Bootstrap5.2 || devbanban.com 2022</title>
    
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <br>
          <h3> ฟอร์มเพิ่มข้อมูลห้องพัก</h3>
          <form action="" method="post" enctype="multipart/form-data">
            <div class="row g-3 align-items-center mb-3">
              <div class="col-sm-2">
                <label  class="col-form-label">เลขห้อง</label>
              </div>
              <div class="col-sm-5">
                <input type="text" name="room_name" class="form-control" required placeholder="เลขห้อง">
              </div>
            </div>
            <div class="row g-3 align-items-center mb-3">
              <div class="col-sm-2">
                <label  class="col-form-label">รายละเอียด</label>
              </div>
              <div class="col-sm-10">
                <textarea name="detail" class="form-control" id="editor" cols="69" rows="4"></textarea>
              </div>
            </div>
            <div class="row g-3 align-items-center mb-3">
              <div class="col-sm-2">
                <label  class="col-form-label">ค่าเช่า/เดือน</label>
              </div>
              <div class="col-sm-3">
                <input type="number" name="price_room"  class="form-control" required placeholder="ค่าเช่า/เดือน" min="0">
              </div>
              <div class="col-auto">
                <span  class="form-text">
                  กรอกตัวเลขเท่านั้น
                </span>
              </div>
            </div>
            <div class="row g-3 align-items-center mb-3">
              <div class="col-sm-2">
                <label  class="col-form-label">จ่ายล่วงหน้า</label>
              </div>
              <div class="col-sm-3">
                <input type="number" name="prepaid"  class="form-control" required placeholder="จ่ายล่วงหน้า" min="0">
              </div>
              <div class="col-auto">
                <span  class="form-text">
                  กรอกตัวเลขเท่านั้น
                </span>
              </div>
            </div>
            <div class="row g-3 align-items-center mb-3">
              <div class="col-sm-2">
                <label  class="col-form-label">มัดจำ</label>
              </div>
              <div class="col-sm-3">
                <input type="number" name="pay_pledge"  class="form-control" required placeholder="มัดจำ" min="0">
              </div>
              <div class="col-auto">
                <span  class="form-text">
                  กรอกตัวเลขเท่านั้น
                </span>
              </div>
            </div>
            <div class="row g-3 align-items-center mb-3">
              <div class="col-sm-2">
                <label  class="col-form-label">ภาพปก</label>
              </div>
              <div class="col-sm-3">
                <font color="red"> *กรุณาลดขนาดไฟล์ภาพก่อนอัพโหลด (500x281 px) </font>
                <input type="file" name="img"  class="form-control" required  accept=".jpg, .jpeg">
              </div>
              
            </div>
            <div class="row g-3 align-items-center mb-3">
              <div class="col-sm-2">
                <label  class="col-form-label"></label>
              </div>
              <div class="col-sm-4">
                <button type="submit" class="btn btn-primary"> บันทึก</button>
                <a href="#" class="btn btn-danger">ยกเลิก</a>
              </div>
            </div>
          </form>
           
        </div>
      </div>
    </div>
  </body>
</html>
<!--
//ตัวอย่าง workshop ป้องกันบันทึกข้อมูลซ้ำ https://devbanban.com/?p=4221
//ขอแนะนำระบบพร้อมใช้ ราคาเบาๆ ซื้อแล้วได้ code ทั้งหมด เอาไปต่อยอดได้
//ระบบแจ้งซ่อม https://www.youtube.com/watch?v=bkYBKfFauB8
//ระบบจัดการหอพัก https://www.youtube.com/watch?v=O7Bh0BNCDz8
//ระบบสอบออนไลน์ https://www.youtube.com/watch?v=WOTLFEflkMk&t=125s
-->

100

101

102

103

104

105

<!DOCTYPE html>

<head>

<title>ฟอร์มเพิ่มข้อมูลห้องพัก ออกแบบจาก Bootstrap5.2 || devbanban.com 2022</title>

</head>

<body>

<br>

<h3> ฟอร์มเพิ่มข้อมูลห้องพัก</h3>

</div>

</div>

<label class="col-form-label">รายละเอียด</label>

</div>

</div>

<label class="col-form-label">ค่าเช่า/เดือน</label>

</div>

</div>

กรอกตัวเลขเท่านั้น

</span>

</div>

</div>

</div>

กรอกตัวเลขเท่านั้น

</span>

</div>

<label class="col-form-label">มัดจำ</label>

</div>

</div>

กรอกตัวเลขเท่านั้น

</span>

</div>

<label class="col-form-label">ภาพปก</label>

</div>

<font color="red"> *กรุณาลดขนาดไฟล์ภาพก่อนอัพโหลด (500x281 px) </font>

</div>

</div>

<button type="submit" class="btn btn-primary"> บันทึก</button>

<a href="#" class="btn btn-danger">ยกเลิก</a>

</div>

</form>

</div>

</body>

</html>

<!--

//ตัวอย่าง workshop ป้องกันบันทึกข้อมูลซ้ำ https://devbanban.com/?p=4221

//ขอแนะนำระบบพร้อมใช้ ราคาเบาๆ ซื้อแล้วได้ code ทั้งหมด เอาไปต่อยอดได้

//ระบบแจ้งซ่อม https://www.youtube.com/watch?v=bkYBKfFauB8

//ระบบจัดการหอพัก https://www.youtube.com/watch?v=O7Bh0BNCDz8

//ระบบสอบออนไลน์ https://www.youtube.com/watch?v=WOTLFEflkMk&t=125s

-->

—-

ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
——————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1

fanpage : https://www.facebook.com/sornwebsites/

ฟอร์มเพิ่มข้อมูลห้องพัก ออกแบบจาก Bootstrap 5.2 (ฟรี Code) สำหรับทำโปรแกรมหอพัก

Share this: