এইচটিএমএল টেক্সক্ট এরিয়া (HTML Text Area Tutorial in Bangla)

এইচটিএমএল টিউটোরিয়াল




** 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) রান করিয়ে দেখুন।

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.