Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েব ডিজাইন এর হাতেখড়ি [পর্ব-০৬] :: এইচটিএমএল ফর্ম

2,969 দেখা 5 টিউমেন্টস জোসস
টিউন বিভাগ এইচটিএমএল
প্রকাশিত
Level 0

10 টিউনস 6 টিউমেন্টস 0 ফলোয়ার

ওয়েব ডিজাইন এর হাতেখড়ি

কেমন আছেন সবাই, আশা করছি সকলে ভালো। আছেন। গত পর্বে দেখিয়েছিলাম কিভাবে টেবিল তৈরি করতে হয়। আশা করছি সেটি আপনারা খুব ভালোভাবে প্রাকটিস করেছেন। একটা কথা  মনে করিয়ে দিতে চাই তা হল শুধু টিউন পড়ে বা কোড দেখে কখনই কিছু ভালোভাবে শিখতে পারবেন না। আপনাকে অবশ্যই প্রতিটি বিষয় প্রাকটিস করতে হবে, নইলে কিছুই ভালোভাবে শিখতে পারবেন না।

এবার তাহলে চলুন আজকের বিষয় নিয়ে আলোচনা শুরু করা যাক। আপনারা নেটে বিভিন্ন সাইটে একাউন্ট খুলতে গেলে অবশ্যই বিভিন্ন ধরণের ফর্ম পুরণ করে থাকেন। যেমন- ফেসবুক, জিমেইল। আজ আমরা এসমস্ত ফর্ম এর বিভিন্ন অংশ কিভাবে তৈরি করা হয় তা শিখব।

ফর্ম এ সাধারনত যে সমস্ত বিষয়গুলো থাকে তা হল-

  • টেক্সট ফিল্ড
  • বাটন
  • পাসওয়ার্ড ফিল্ড
  • চেক বক্স
  • ড্রপ-ডাউন বক্স

শুরুতে একটা কথা বলে নেওয়াই ভালো, তা হল আমি চাইলেই সব গুলো অংশ আপনাদেরকে একবারে দেখাতে পারি, কিন্তু আমি এখানে তা করবনা। আমি আলাদা আলাদা ভাবে আগে প্রত্যেকটা অংশ দেখাব তারপর সবার শেষে একটি পূর্নাঙ্গ ফর্ম এর কোড দেখাব। আসা করি তাতে শেখাটা আরো ভালো হবে।

সবার শুরুতে আমি যেটি দেখব সেটি হল কিভাবে টেক্সট ফিল্ড তৈরি করতে হয়। একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে ফেলুন।

</pre>
<html>

<head>

<title>Text Field</title>

</head>

<body>

<form>

Your Name:

<input type="text" name="yourname"/>

</br>

Father Name:

<input type="text" name="fathername"/>

</form>

</body>

</html>
<pre>

এবার কোডটিকে .html এক্সটেনশন দিয়ে সেভ করে ফলাফল দেখুন। এখানে কোডটিতে <form> ট্যাগ ব্যবহার করা হয়েছে, যেটি ফর্মকে নির্ধারণ করে। এবং ইনপুট ফিল্ড নির্ধারনের জন্য ইনপুট ট্যাগ ব্যবহার করা হয়েছে। এছাড়া ইনপুট ট্যাগ এর ভিতরে ইনপুট টাইপটি কি ধরণের হবে তাও বলে দেওয়া হয়েছে। আশা করি এপর্যন্ত বুঝতে কারও কোন সমস্যা হয়নি। এবার আসুন কোডটিতে সামান্য একটু পরিবর্তন এনে আরও একটি ব্যবহার শিখি। পূর্বের কোডে আমরা দুটি টেক্সট ফিল্ডে ইনপুট তো নিলাম কিন্তু এটাকে নিয়ে তো কিছু একটা করতে হবে। অন্তত ইনপুট নিয়ে সেটাকে তো কোথাও পাঠাতে হবে তাই না? আর তার জন্য অবশ্যই আমাদের একটা সাবমিট বাটন থাকতে হবে। এবার আমরা দেখব কিভাবে সাবমিট বাটন যুক্ত করা যায়। এটি করার জন্য খুব বেশি কিছু করা লাগবে না। আপনার পূর্বের কোডটিতে শুধুমাত্র এই লাইনটি যুক্ত করলে হবে-  <input type="submit" value="Submit"/>। নিম্নে সম্পূর্ন কোডটি দিয়ে দেওয়া হল।

</pre>
<html>

<head>

<title>Submit</title>

</head>

<body>

<form>

Your Name:

<input type="text" name="yourname"/>

</br>

Father Name:

<input type="text" name="fathername"/>

</br>

<input type="submit" value="Submit"/>

</form>

</body>

</html>
<pre>

এবার যে জিনিসটি শিখব তা হল কিভাবে রেডিও বাটন তৈরি করা যায়। রেডিও বাটন সাধারণত ব্যবহার করা হয় যখন ইউজার একাধিক অপশন থেকে যেকোন একটিকে নির্বাচন করবে সেক্ষেত্রে। এবার তাহলে একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে ফেলুন।

</pre>
<html>

<head>

<title>Radio</title>

</head>

<body>

<form action="">

Male

<input type="radio" name="Sex" value="male">

<br/>

Female

<input type="radio" name="Sex" value="female">

</form>

</body>

</html>
<pre>

এবার এটিকে .html এক্সটেনশন দিয়ে সেভ করে ওপেন করুন দেখবেন রেডিও বাটন তৈরি হয়ে গেছে। এখানে কোড সম্পর্কে তেমন কিছু বলার আছে বলে আমি মনে করছি না কেননা আমি ধরে নিচ্ছি আপনারা এমনিতেই বুঝতে পারছেন কোনটা কেন এবং কিভাবে ব্যবহৃত হচ্ছে। নতুন করে কিছু বলতে গেলে ঘুরেফিরে সেই একই কথা বলতে হয়।

এবার তাহলে চলুন আমরা দেখে নিই কিভাবে চেকবক্স তৈরি করতে হয়। চেকবক্স সাধারণত ব্যবহার করা হয় যখন ইউজার একাধিক অপশন থেকে এক বা একাধিক অপশন নির্বাচন করবে সেক্ষেত্রে। এবার তাহলে একটি নোটপ্যাড নিয়ে নিচের কোডটি টাইপ করে ফেলুন।

</pre>
<html>

<head>

<title>Text  Box</title>

</head>

<body>

<p> Game you like to play </p>

<form action="">

Football:

<input type="checkbox" name="game" value="football">

<br/>

Cricket:

<input type="checkbox" name="game" value="cricket">

<br/>

Baseball:

<input type="checkbox" name="game" value="baseball">

<br/>

Volleyball

<input type="checkbox" name="game" value="volleyball">

<br/>

</body>

</html>
<pre>

আজ তাহলে এপর্যন্তই সবাইকে পরবর্তি পর্বের আমন্ত্রন জানিয়ে আজ এখানেই শেষ করছি। সবাই ভালো থাকবেন।

Level 0

আমি মুন্সী বরকতুল্লাহ জনি। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 4 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 10 টি টিউন ও 6 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

thnx vai amy HTML shiktesi……onek kaje dibe..

Level 0

ধন্যবাদ ভাই। এই ফর্মটি পূরণ করে সাবমিট করলে নির্দিষ্ট কোন ওয়েব সাইটে গিয়ে জমা হবে, এটা কেমন করে করতে হবে , এ বিষয়ে একটা পোস্ট করলে আমাকে জানালে কৃতার্থ হবো।

Level 0

ভাই আমার ত কোন ওয়েব সাইট নাই তালে কিভাবে এগুলা দেখব যেমন নোটপেডে দেখলাম এখন ওয়েব সাইটে কেমন হল তা ত দেখতে হবে তাই। ফ্রি কোন ওয়েব সাইট কি আছে তাকলে যানাবেন। আর ফরমের জন্য কি আলাদা পেজ খলতে হবে নাকি আর সাইন আউট এর জন্য কি আলাদা পেজ নিতে হবে না এক পেইজে সব কাজ হবে

Level 0

আর আমি মনে করি নোটপেডের চাইতে নোট পেড++ এ টাইপ করলে আর ভাল হয় কোন জায়গায় ভুল হলে দেখা যাবে টিউনার ভাই আপনি কি বলেন ভাল হবে না