![image55.png](https://steemitimages.com/DQmWMToHbCMZFucL9gMamYR9J51ETmL8vvwvZLKPvfnHZU2/image55.png)

Bootstrap គឺជាសំនុំឯកសារដែលបានផ្តល់អោយមានភាពងាយស្រួលក្នុងការបង្កើត និង រចនាគេហទំព័របានលឿន។វារួមមាន HTML, CSS ហើយមានសមាសភាពមួយចំនួនដូចជា Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel … និង JavaScript ដែលធ្វើអោយគេហទំព័ររបស់យើងកាន់តែមានភាពទាក់ទាញ។ អត្ថបទនេះ Techfree នឹងលើកយកមកបង្ហាញនូវរបៀបប្រើប្រាស់ Form ជាមួយ Bootstrap៖


១) របៀបប្រើប្រាស់ Bootstrap
ជាដំបូងយើងត្រូវទៅធ្វើការទាញយកឯកសារ ឬ ធ្វើការចម្លងយកអាស័យដ្ឋានដែលជាសំនុំឯកសារសំរាប់ប្រើប្រាស់ជាមួយ Bootstrap ដែលមាននៅក្នុងគេហទំព័រមួយនេះ [ទាញយក](http://getbootstrap.com/getting-started/) ។
– យើងនិងបង្ហាញការប្រើប្រាស់ Bootstrap ជាមួយការទាញយកឯកសារមកដាក់ប្រើប្រាស់ក្នុងម៉ាស៊ីនរបស់អ្នកនៅកន្លែងដែលអាចទាញយកទៅបង្កើតគេហទំព័របាន  [ទាញយក](http://getbootstrap.com/getting-started/) 
ឧទាហរណ៍៖

![1example.png](https://steemitimages.com/DQmNZQux3NudGsju6Q8Y1zb7pq85uLSDHRcdGbeQXJPgnZk/1example.png)

+ បន្ទាប់ពីបានទាញយករួចហើយយើងត្រូវធ្វើការពន្លាសំនំុឯកសារដែលបានទាញយក យកទៅដាក់តំបន់បង្កើតគេហទំព័រដើម្បីងាយស្រួលប្រើប្រាស់

ឧទាហរណ៍៖

![2exa.png](https://steemitimages.com/DQmbweDUEcgpgBtL9r3N8TPBcRG5wqBFPYfSmbFUj5RsEY4/2exa.png)

+ របៀបប្រើប្រាស់ Bootstrap ជាមួយ Form

![result1.png](https://steemitimages.com/DQmVksRbU8R3JGv3C5YqCSgUN8vswBCyoo4nbQsP5bPPDk6/result1.png)
![result2.png](https://steemitimages.com/DQmTL7QFqakEQ2hvKkK4XFAdecKVDYibyyrX1cPNpaFodCj/result2.png)

* បន្ទាត់ទី 6, 7,8 គឺជាការហៅ Bootstrap មកប្រើប្រាស់

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

![result3.png](https://steemitimages.com/DQmdYCYZNuBcL3pUWgTqstRaegeJKTLQHpn9Gox4HQNo4ds/result3.png)

– យើងនិងបង្ហាញការប្រើប្រាស់ Bootstrap ជាមួយការទាញយកតាមរយៈអាស័យដ្ឋាន [CDN](https://www.techfree.info/2016/07/09/what-is-cdn/) ទៅបង្កើតគេហទំព័រ  [ទាញយក](http://getbootstrap.com/getting-started/)

ឧទាហរណ៍៖

![address.png](https://steemitimages.com/DQmQEMHbX2SQsyBaZtnyyR4md3Su4YtaZy5WMjUTaUZewqx/address.png)

+ របៀបប្រើប្រាស់ Bootstrap ជាមួយ Form តាមរយៈការទាញយកតាមរយៈអាស័យដ្ឋាន

ឧទាហរណ៍៖

![adresscode1.png](https://steemitimages.com/DQmRkAJNisyyMLWEW5MzfNp1wsQmJtAkFdhKwfveAwMTyjk/adresscode1.png)
![addresscode2.png](https://steemitimages.com/DQmZZvhc3T8K9bi8U67qnneKgdnagbHucVKFwXExBd2Zs32/addresscode2.png)
![adresscode3.png](https://steemitimages.com/DQmadmF2QhRTfmJoDPZhnF7fvCgqvk9nF8FKFk5BvmNHvsT/adresscode3.png)

* បន្ទាត់ទី 7, 11, 16 គឺជាការហៅ Bootstrap មកប្រើតាមរយៈការទាញយកតាមរយៈអាស័យដ្ឋាន

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

![address1.png](https://steemitimages.com/DQmZGoPxdBZTWNy7VeyfNYhnULiAk6PvXcFBJ9TdSkY7bwA/address1.png)

២) របៀបប្រើប្រាស់  Form
លោកអ្នកប្រហែលជាដឹងហើយថាការប្រើប្រាស់ Form មាន Method ពីរចាំបាច់ប្រើប្រាស់បញ្ជូនទិន្នន័យគឺ GET និង POST ៖

 * Method GET: ត្រូវបានគេប្រើប្រាស់សំរាប់ទាញទិន្នន័យតាម URL ហើយទំហំនៃការផ្ទុកទិន្នន័យធំបំផុតត្រឹមតែ 2048 តួអក្សរប៉ុណ្ណោះ។
 * Method POST:ត្រូវបានគេប្រើប្រាស់សំរាប់ការបញ្ជូនទិន្នន័យធំ។

ឧទាហរណ៍: [អត្ថបទមានស្រាប់](https://www.techfree.info/2016/10/06/how-to-create-form-with-html5/)

– របៀបប្រើប្រាស់  Form ជាប្រភេទ Default

ឧទាហរណ៍៖

![1f.png](https://steemitimages.com/DQmcGksaUsAcvMsKx2zV1NkRCBopsFNf96qFeRPTBYpEs8w/1f.png)
![2f.png](https://steemitimages.com/DQmSC5E3uGZB8FihYiGw4aBM24srEnJkgijhWTULAfFB1ST/2f.png)

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

![2r.png](https://steemitimages.com/DQmf6msSvdfnvW1chA6vLk61uZ3VvBWQpsh2C9AaQMAnKT4/2r.png)

– របៀបប្រើប្រាស់  Form ជាប្រភេទ Inline

ការប្រើប្រាស់ `.form-inline` គឺមានលក្ខណៈមួយបន្ទាត់ ឬ មួយជួរ
ឧទាហរណ៍៖

![1_inline-1.png](https://steemitimages.com/DQmQevTATQKUdK68CwcJx15wE9r8BBv9zy4yReqZpbhec2i/1_inline-1.png)
![2_inline.png](https://steemitimages.com/DQmTLFhC6v5TygiLzf8pYJ1bDEQ6gnNRzxs2ee5nj4VXfdE/2_inline.png)

លទ្ធផល

![R_inline.png](https://steemitimages.com/DQmdopeViCCVMzoc3sV4CNzkvoBAUPh7Yo8PZqn7YR2vZpn/R_inline.png)

– របៀបប្រើប្រាស់  Form ជាប្រភេទ Horizontal

* ការប្រើប្រាស់ `.form-horizontal` គឺមានលក្ខណៈចុះបន្ទាត់

ឧទាហរណ៍៖

![1h.png](https://steemitimages.com/DQmNbWaLjpVtvtt3EDfT3kxmZcxMJY7tVYF2AxhnCCoQXsp/1h.png)
![2h.png](https://steemitimages.com/DQmXcMZKmK64PqXJNm5nf8kUcxdS9MHqStyXPZhvUAXL4mU/2h.png)

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

![h_r.png](https://steemitimages.com/DQma2dKdwP8X1kbSFDWwocPtL7rwrxJsXsM3vuVHHEjwU2K/h_r.png)


[ប្រភពដើម](https://www.techfree.info/2016/10/20/how-to-use-bootstrap-and-form/)