Free Template 17 : Form Add product, ฟอร์มเพิ่มสินค้า html+bootstrap
รูปแบบการออกแบบก็เน้นง่ายๆ ปรับแต่งได้สะดวก ในฟอร์มนี้จะใช้ตารางจัดเลย์เอาท์นะครับ และใช้ bootstrap เพียงเล็กน้อยให้มีความเรียบร้อยมากขึ้น มีช่องให้กรอกข้อมูลมากขึ้น (ดังภาพ) *อีกหนึ่งฟอร์มเพิ่มสินที่น่าใช้ คลิก…
design ของฟอร์ม
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 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Add_Product</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <form action="" method="post" enctype="multipart/form-data" name="Add_Product" id="Add_Product" > <table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="50" colspan="3" align="center">เพิ่มข้อมูลสินค้า </td> </tr> <tr> <td width="129" align="right" valign="middle">ชื่อสินค้า :</td> <td colspan="2"><label for="pro_name2"></label> <input name="pro_name" type="text" required="required" id="pro_name2" size="50"/></td> </tr> <tr> <td align="right" valign="middle"> </td> <td colspan="2"> </td> </tr> <tr> <td align="right" valign="middle">ประเภทสินค้า :</td> <td colspan="2"> <label for=""></label> <select name="type_id" id="type_id" required="required"> <option value="">กรุณาเลือกประเภท</option> <option value="1">ประเภท1</option> <option value="2">ประเภท1</option> </option> </select> </td> </tr> <tr> <td align="right" valign="middle"> </td> <td colspan="2"> </td> </tr> <tr> <td align="right" valign="top">รายละเอียดสินค้า :</td> <td colspan="2"> <textarea name="pro_detail" id="pro_detail" cols="50" rows="3" required="required"></textarea></td> </tr> <tr> <td align="right" valign="middle"> </td> <td colspan="2"> </td> </tr> <tr> <td align="right" valign="top">รายละเอียดอื่นๆ :</td> <td colspan="2"> <textarea name="pro_detailother" cols="50" rows="3" required="required" id="pro_detailother"></textarea></td> </tr> <tr> <td align="right" valign="middle"> </td> <td colspan="2"> </td> </tr> <tr> <td align="right" valign="middle">ราคาต้นทุน :</td> <td width="190"><label for="pro_price_cost"></label> <input type="number" name="pro_price_cost" id="pro_price_cost" required="required"/></td> <td width="281">ราคาขาย : <input type="number" name="pro_price_sale" id="pro_price_sale" required="required"/></td> </tr> <tr> <td align="right" valign="middle"> </td> <td colspan="2"> </td> </tr> <tr> <td align="right" valign="middle">จำนวนสินค้า :</td> <td><label for="pro_qty"></label> <input type="number" name="pro_qty" id="pro_qty" required="required"/></td> <td>หน่วยสินค้า : <select name="pro_unit" id="pro_unit" required> <option value="">กรุณาเลือก</option> <option value="ชิ้น">ชิ้น</option> <option value="กล่อง">กล่อง</option> <option value="แผง">แผง</option> <option value="ตัว">ตัว</option> </select></td> </tr> <tr> <td align="right" valign="middle"> </td> <td colspan="2"> </td> </tr> <tr> <td align="right" valign="middle">รูปภาพสินค้า :</td> <td colspan="2"><label for="pro_img"></label> <input name="pro_img" type="file" required="required" id="pro_img" size="40" /></td> </tr> <tr> <td align="right" valign="middle"> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td colspan="2"><button type="submit" name="button" id="button" value="ตกลง" class="btn btn-primary">เพิ่มสินค้า</button></td> </tr> </table> </form> </body> </html> |
อย่าลืมนำไปประยุกต์ใช้นะครับ ^_^
- สอนทำเว็บร้านค้าออนไลน์ด้วย WordPress 4 ชม. 3,000 บ. ไม่ต้องเขียนโค้ด
- สอน Bootstrap 3 ชม. 1,000 บาท ผ่าน TeamViewer
- สอนทำเว็บ PHP+DW+DATABASE+BOOTSTRAP 15 ชม. 5,000 บาท, ผ่าน TeamViewer
- สอนทำเว็บง่ายๆ ด้วย WordPress 3 ชม.1,500 บ. ผ่าน TeamViewer
Related

Free Template 09 ฟอร์มเพิ่มสินค้า, form add product html+ Bootstrap
แจก Free Template 09 ฟอร์มเพิ่มสินค้า [Bootstrap] จะใช้ร่วมกับ workshop การเขียนเว็บไซต์ด้วย php+dw+bootstrap นะครับ เป็นฟอร์มเรียบๆ ง่ายๆ และดูสะอาดตา devbanban.com
In "Free Template"

WE.21 โปรแกรมเพิ่มสินค้า+อัพโหลดภาพสินค้า DW+ php + database
WE.21 โปรแกรมเพิ่มสินค้า+อัพโหลดภาพสินค้า DW+ php + database จาก workshop นี้เป็นต้นไปจะเอา workshop ที่ 1-20 มารวมกันให้เป็นระบบแคตตาล็อคสินค้าออนไลน์นะครับ สำหรับใครที่เพิ่งมาดู workshop นี้และติดปัญหา !!! ให้กลับไปดู WE 1-20 ก่อนนะครับแล้วค่อยทำตาม เพราะผมจะพาทำต่อไปเรื่อยๆครับ WE.21 จะเป็นโปรแกรมเพิ่มสินค้า รายละเอียด ราคา และภาพสินค้าเข้าไปในฐานข้อมูลแบบง่ายๆกันนะครับ เริ่มต้นด้วยการสร้างฐานข้อมูลก่อนนะครับ และเอา code ด้านล่าง ภาษา sql ไปวาง ก็จะได้ตารางไว้เก็บข้อมูลสินค้าครับ -- -- Table structure for table `tbl_product` -- CREATE TABLE IF NOT EXISTS `tbl_product`…
In "PHP+DW+Bootstrap"

Free Template 12 ฟอร์มวันที่และเวลา Bootstrap + HTML 5 + FREE CODE
Free Template 12 ฟอร์มวันที่และเวลา Bootstrap + HTML 5+ FREE CODE แบบง่ายๆ การทำงาน code form date and time by devbanban.com …
In "Free Template"