এইচটিএমএল-১০ [Line Break & hr Tag, Radio Button, Text Area]

Line Break & hr Tag

<br/> এটা হচ্ছে লাইন ব্রেক (ভাঙ্গার জন্য) এর জন্য একটি ট্যাগ। ট্যাগটি এইটুকুই, start বা end tag ইত্যাদি নেই। এইচটিএমএল এলিমেন্টের ভিতর এটা ব্যবহার করে যেকোন জায়গায় লাইন ভেঙ্গে নিচের লাইনে নিয়ে যেতে পারেন। সাধারনত ঠিকানা ইত্যাদি লেখার সময় <p></p> এর ভিতর এটা ব্যবহার করা হয়। এছাড়াও আরো অনকে প্রয়োগ আছে।

1.<p>12/13 Market Road<br/>Mirpur, Dhaka<br/>Bangladesh</p>

প্রদর্শন

12/13 Market Road
Mirpur, Dhaka
Bangladesh

<hr/> ট্যাগ

===============

আড়াআড়ি ভাবে লম্বা রেখা দেয়ার জন্য hr ট্যাগটি ব্যবহৃত হয়। যেমন

1.<p>Bangladesh</p>

2.<hr/>

3.<h2>This is a heading</h2>

4.<hr/>

প্রদর্শন

Bangladesh

---

This is a heading

---

Radio Button

** যেকোন input (এখানে radio বাটন) ফিল্ড একটা ফর্ম এলিমেন্টে তাই এখানে যত উদাহরন দেব সব <form></form> এর ভিতর রাখতে হবে।

ফর্মে অনেক সময় অনেকগুলি অপশনের মধ্যে যেকোন একটি অপশন সিলেক্ট করার সুযোগ দেয়া লাগতে পারে। এসব ক্ষেত্রে রেডিও বাটন ব্যবহৃত হয়। যেমন

1.<p>Select your department</p>

2. 

3.<input type="radio" name="dept" value="1"/>Statistics

4.<input type="radio" name="dept" value="2"/>Mathematics

5.<input type="radio" name="dept" value="3"/>CSE

প্রদর্শন:

Select your department

Statistics Mathematics CSE

দেখুন শুধু type এট্রিবিউট পরিবর্তন করাতে রেডিও বাটন চলে এসেছে, type এর মান text দিলে টেক্সবক্স হয়, checkbox দিলে একাধিক অপশন সিলেক্ট করার মত ফিল্ড আসে, submit দিলে একটা সাবমিট বাটন তৈরী হয় ইত্যাদি।

** সব ফর্ম এলিমেন্টের name এট্রিবিউটের মান ভিন্ন দিতে হয় শুধু radio বাটনের ক্ষেত্রে একই নাম দিতে হবে যদি চান যেকোন একটি সিলেক্ট করতে পারবে (অন্যটি সিলেক্ট করলে অটোমেটিক সিলেক্টেড টি আনসিলেক্ট হয়ে যাবে)। 

যেকোন একটি যদি সিলেক্টেড দেখাতে চান তাহলে সেটাতে checked বা checked="checked" এট্রিবিউট ব্যবহার করুন।যেমন

1.<p>Select your department</p>

2.<input type="radio" name="dept" value="1"/>Statistics

3.<input type="radio" name="dept" value="2"/>Mathematics

4.<input type="radio" name="dept" value="3" checked/>CSE

প্রদর্শন

Select your department

Statistics Mathematics CSE

Text Area

** textarea একটি ফর্ম এলিমেন্টে অর্থ্যাৎ এখানে যতগুলি উদাহরন থাকবে তা <form></form> ভিতরে রাখতে হবে।

input এর type="text" দিলে যে টেক্সট ফিল্ড তৈরী হয় সেখানে কয়েকটি শব্দ লেখা চলে। অনেক কয়েক লাইন লেখার প্রয়োজন হলে <textarea></textarea>  এলিমেন্ট ব্যবহার করতে হবে। ধরুন ফর্মে ইউজারের নিজের সম্পর্কে লেখার জন্য একটা ফিল্ড দিবেন তখন textraea ব্যববহার করতে পারেন কেননা ইউজার অনেক লাইন লিখতে পারে নিজের সম্পর্কে লিখতে পারে।

1.<textarea cols="30" rows="7" name="about_you">Write about you</textarea>

প্রদর্শন:

cols এট্রিবিউট দিয়ে আড়াআড়ি ভাবে দৈর্ঘ্য বাড়ানো যায় আর rows এর মান যত বেশি দিবেন লম্বা হবে।

wrap নামে একটা এট্রিবিউট ব্যবহার করতে পারেন। wrap="soft" দিলে ইউজার যদি textarea এর width এর চেয়ে বেশি টেক্সট দেয় তবুও এক লাইনে দেখাবে (সাবমিট করলে)। বাই ডিফল্ট এটাই সক্রিয় থাকে। wrap="hard" দিলে লেখা মুড়িয়ে দেখাবে (ভেঙ্গে দেখাবে)। hard দিলে অবশ্যই cols এট্রিবিউট ব্যবহার করতে হবে।

autofocus="autofocus" বা শুধু autofocus দিতে পারেন। এটাও একটা এট্রিবিউট এটা দিলে অটোমেটিক টেক্সএরিয়াতে মাউস চলে যাবে এবং কারসর পিটপিট করবে। পেজ লোড হবার সময় এমন হবে। আর যদি এটা না দেন তাহলে textarea এর ভিতর মাউস নিয়ে ক্লিক করলে তারপর কারসর পিটপিট করবে।

required="required" বা শুধু required দিতে পারেন। এটা দিয়ে ফর্ম ভেলিডেশনের কাজ হয় যেটা আগে জাভাস্ক্রিপ্ট দিয়ে করতে হত। এই ফিল্ড ইউজার পুরন না করলে ফর্ম সাবমিটই করতে দেবেনা।

readonly="readonly" বা শুধু readonly দিলে ইউজার শুধু দেখতে পাবে কিন্তু সেখানে কিছু লিখতে পারবেনা। সাধারনত privacy policy এর কথাগুলি অনেকসময় এভাবে textarea তে readonly করে শুধু দেখানো হয়।

disabled একটা এট্রিবিউট ব্যবহার করতে পারেন disabled="disabled" বা শুধু disabled দিয়ে। ধুসর রং দিয়ে তখন textarea টি দেখাবে।

maxlength, name, placeholder এগুলি আগের টিউটোরিয়ালে আলোচনা আছে, এখানেও একি কাজ।

1.<form action="test.php" method="post">

2.<textarea autofocus="autofocus" cols="30" rows="10" name="about_you" placeholder="write about you" required></textarea>

3.<input type="submit" name="submit" value="Submit">

4.</form>

যেকোন নামে .html এক্সটেনশন দিয়ে সেভ করে (যেমন test.html) রান করিয়ে দেখুন।