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

in cambodia •  7 years ago 

image55.png

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

១) របៀបប្រើប្រាស់ Bootstrap
ជាដំបូងយើងត្រូវទៅធ្វើការទាញយកឯកសារ ឬ ធ្វើការចម្លងយកអាស័យដ្ឋានដែលជាសំនុំឯកសារសំរាប់ប្រើប្រាស់ជាមួយ Bootstrap ដែលមាននៅក្នុងគេហទំព័រមួយនេះ ទាញយក
– យើងនិងបង្ហាញការប្រើប្រាស់ Bootstrap ជាមួយការទាញយកឯកសារមកដាក់ប្រើប្រាស់ក្នុងម៉ាស៊ីនរបស់អ្នកនៅកន្លែងដែលអាចទាញយកទៅបង្កើតគេហទំព័របាន ទាញយក
ឧទាហរណ៍៖

1example.png

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

ឧទាហរណ៍៖

2exa.png

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

result1.png
result2.png

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

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

result3.png

– យើងនិងបង្ហាញការប្រើប្រាស់ Bootstrap ជាមួយការទាញយកតាមរយៈអាស័យដ្ឋាន CDN ទៅបង្កើតគេហទំព័រ ទាញយក

ឧទាហរណ៍៖

address.png

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

ឧទាហរណ៍៖

adresscode1.png
addresscode2.png
adresscode3.png

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

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

address1.png

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

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

ឧទាហរណ៍: អត្ថបទមានស្រាប់

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

ឧទាហរណ៍៖

1f.png
2f.png

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

2r.png

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

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

1_inline-1.png
2_inline.png

លទ្ធផល

R_inline.png

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

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

ឧទាហរណ៍៖

1h.png
2h.png

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

h_r.png

ប្រភពដើម

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
https://www.techfree.info/2016/10/20/how-to-use-bootstrap-and-form/