[Code] แบบฟอร์มบันทึกข้อความ HTML & Bootstrap
- by boychawin
- June 8, 2021 1,856
![[Code] แบบฟอร์มบันทึกข้อความ HTML & Bootstrap](https://api.gutravels.com/1/blogs/images/31399000_1623143294.jpeg)
แจกโค้ด HTML ฟอร์ม แบบฟอร์มบันทึกข้อความ ขอเบิก / ส่งคืน สามารถนำไปปรับใช้ได้เลย นำไปปรับทำหน้ากรอกข้อมูล หรือรายงาน มีปุ่มพิมพ์รายงาน
เหมาะกับองค์กรที่ใช้เอกสารแล้วต้องการปรับมาใช้แบบออนไลน์ เราก็ยังคงใช้แบบฟอร์มแบบเดียวกับเอกสารที่ใช้งานอยู่ ก็จะทำให้ผู้ใช้งานระบบ ใช้งานได้ง่ายขึ้น
- เคดิต พี่หมิว NT โค้ดต้นแบบ :D
เครื่องมือ
- HTML5- CSS Framework Bootstrap 4.6
<!DOCTYPE html> <html lang="th"> <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" /> <title>Template + แบบฟอร์มบันทึกข้อความ ขอเบิก / ส่งคืน HTML +Bootstrap 5 | boychawin.com</title> <!--Favicons--> <link rel="icon" type="image/png" sizes="32x32" href="https://boychawin.com/B_images/logoboychawin.com.png" /> <meta name="theme-color" content="#1b2836" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <style> table { align-items: center; text-align: center; } table, th, tr, td { font-size: 14px; } @media print { #hid { display: none; } } .order-container { font-family: Tahoma, Geneva, sans-serif; margin: 0px auto; width: 950px; font-size: 14px; } .order-head { margin: 50px 0 10px 0; } .order-title { text-align: center; font-size: 24px; font-weight: bold; } .order-head .order-customer { float: left; margin: 10px 0 10px 0; padding: 5px; border: 1px solid #000; } .order-head .order-date { text-align: right; margin: 10px 0 10px 0; float: right; padding: 5px; border: 1px solid #000; } .order-underline { border-bottom: #000 1px dashed; } .clear { clear: both; } </style> </head> <body> <section class="content"> <div class="container-fluid"> <!-- Small boxes (Stat box) --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <button class="btn btn-info" onClick="window.print()" id="hid"> พิมพ์ </button> </div> <!-- /.card-header --> <div class="card-body table-responsive p-0"> <center> <table class="table-head-fixed text-nowrap" border="1"> <thead> <tr> <td colspan="3"> สำหรับผู้บันทึกรายการ <br /> เลขที่ใบจ่าย/รับคืนพัสดุ<br /> <font color="green">...............................</font> <br /> </td> <td colspan="6"> <img src="https://boychawin.com/B_images/logoboychawin.com.png" alt="boychawin.com" width="50" height="auto" /><br /> ใบเบิก / ส่งคืนพัสดุ </td> <td colspan="3" align="left"> <input type="radio" id="exampleRadios2" name="" value="" checked /> เบิก <br /> <input type="radio" id="exampleRadios2" name="" value="" />ส่งคืน <br /> วันที่ <font color="green">08 </font>/<font color="green"> 06</font> /2564<br /> เลขที่ <font color="green">................</font> </td> </tr> </thead> <tr align="left"> <td colspan="5" rowspan="6"> รหัสรายการ 1 <font color="green">................................................</font> <br /> รายการที่ขอเบิก / ส่งคืน <font color="green"> ..................................</font> <br /> ประเภทงาน / สถานที่ <font color="green"> .....................................</font> <br /> รายการ <font color="green"> ........................................................</font> </td> <td colspan="6"> รายการที่ <font color="green">.................... </font> ชื่อ <font color="green"> .................... .................... </font> </td> </tr> <tr align="left"> <td>รายการที่ 1</td> <td style="width: 100px"> <font color="green">........................</font> </td> <td colspan="4">หมายเหตุ</td> </tr> <tr align="left"> <td>รายการที่ 2</td> <td> <font color="green">....................</font> </td> <td colspan="2" rowspan="4" align="left"> 1= งานที่ 1<br />2=งานที่ 2<br />3=งานที่ 3<br />4=งานที่ 4 </td> <td colspan="2" rowspan="4" align="left"> 5= งานที่ 5 </td> </tr> <tr align="left"> <td>รายการที่ 3</td> <td> <font color="green">....................</font> </td> </tr> <tr align="left"> <td>รายการที่ 4</td> <td> <font color="green">....................</font< /td> </tr> <tr align="left"> <td>รายการที่ 5</td> <td> <font color="green">....................</font> </td> </tr> <tr> <td rowspan="2" style="width: 25px">ที่</td> <td rowspan="2">รหัสรายการ</td> <td rowspan="2" colspan="2" style="width: 400px"> รายการ </td> <td rowspan="2">หน่วยนับ</td> <td>รหัส</td> <td></td> <td colspan="4"></td> </tr> <tr> <td>รวมเบิก</td> <td colspan="5">รายละเอียด </td> </tr> <tr> <!-- รายการที่ 1 --> <td>1</td> <td>111111</td> <td colspan="2" align="left"> รายการที่ 1 </td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 2--> <td>2</td> <td>22222</td> <td colspan="2" align="left"> รายการที่ 2 </td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 3 --> <td>3</td> <td>33333</td> <td colspan="2" align="left"> รายการที่ 3 </td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 4 --> <td>4</td> <td>44444</td> <td colspan="2" align="left"> รายการที่ 4 </td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 5 --> <td>5</td> <td>55555</td> <td colspan="2" align="left"> รายการที่ 5 </td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 6 --> <td>6</td> <td>666666</td> <td colspan="2" align="left"> รายการที่ 6 </td> <td>PC</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 7 --> <td>7</td> <td>77777</td> <td colspan="2" align="left">รายการที่ 7</td> <td>PC</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 8 --> <td>8</td> <td>88888</td> <td colspan="2" align="left">รายการที่ 8</td> <td>PC</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 9 --> <td>9</td> <td>99999</td> <td colspan="2" align="left">รายการที่ 9</td> <td>PC</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 10 --> <td>10</td> <td>101010</td> <td colspan="2" align="left"> รายการที่ 10 </td> <td>RO</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 11 --> <td>11</td> <td>1111111</td> <td colspan="2" align="left"> รายการที่ 11 </td> <td>PC</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 12 --> <td>12</td> <td>121212</td> <td colspan="2" align="left"> รายการที่ 12 </td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 13 --> <td>13</td> <td></td> <td colspan="2" align="left">(ต่อ)</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 14--> <td>14</td> <td></td> <td colspan="2" align="left">รายการที่ 14</td> <td>PC</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 15 --> <td>15</td> <td></td> <td colspan="2" align="left">รายการที่ 15</td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 16--> <td>16</td> <td></td> <td colspan="2" align="left">รายการที่ 16</td> <td>M</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 17--> <td>17</td> <td></td> <td colspan="2" align="left">รายการที่ 17</td> <td>PC</td> <td> <font color="green">........................</font> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 18 --> <td>18</td> <td></td> <td colspan="2" align="left"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 19 --> <td>19</td> <td></td> <td colspan="2" align="left"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 20 --> <td>20</td> <td></td> <td colspan="2" align="left"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- รายการที่ 21--> <td>21</td> <td></td> <td colspan="2" align="left"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <!-- <tr> <td colspan="4"></td> <td></td> <td></td> <td colspan="2" align="left"></td> <td colspan="2" align="left"></td> <td colspan="2" align="left"></td> </tr> --> <tr> <td colspan="5">รวม</td> <td>รายการ</td> <td colspan="1"></td> <td colspan="4">จำนวน</td> </tr> <tr> <td colspan="12" align="left"> ผู้ขอเบิก / ส่งคืน <br /> <center> <table border="0"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td> ( ........................ ) </td> <td> ( ........................ ........................ ) </td> <td> (...............................................) </td> </tr> <tr> <td>ผู้ขอเบิก / ส่งคืน</td> <td>ผู้อนุมัติเบิก / ส่งคืน</td> <td>ผู้รับ / ส่งคืน</td> </tr> <tr> <td> วันที่ ........................ </td> <td>ผจ.........................</td> <td>วันที่....../....../......</td> </tr> <tr> <td></td> <td>........................</td> <td></td> </tr> </table> </center> </td> </tr> <tr> <td colspan="12" align="left"> เจ้าหน้าที่<br /> <center> <table border="0"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td> ( ........................ ) </td> <td> ( ........................ ) </td> <td> (...............................................) </td> </tr> <tr> <td>ผู้จ่าย / รับคืน</td> <td>...........</td> <td>ผู้ตรวจสอบ</td> </tr> <tr> <td>วันที่....../....../......</td> <td>วันที่....../....../......</td> <td>วันที่....../....../......</td> </tr> </table> </center> </td> </tr> <tr> <td colspan="12" align="left"> ผู้บันทึกรายการ<br /> <center> (...............................................)                ....../....../......                โทร 0-098-5679714 </center> </td> </tr> </table> </center> </div> </div> </div> </div> </div> </div> </section> </body> </html>
บทความอื่นที่น่าสนใจ
ติดตาม Facebook
ยอดนิยมวันนี้
ยอดนิยม
เว็บเทรด Bitcoin
Guwork.co
