How to learn HTML Filed | SP Foundationbd

টেক্সট ফিল্ড
টেক্সট ফিল্ড একটা ফর্ম এলিমেন্টে তাই এখানে যত উদাহরন দেব সব <form></form> এর ভিতর রাখতে হবে।
টেক্সক্ট ফিল্ড আগের টিউোটোরিয়ালটিতে দেখালাম। খুব সহজ
<input type="text" name="address"/>
প্রদর্শন:

type এবং name Attribute নিয়ে আগের টিউটোরিয়ালেই আছে। এখানে আরও নতুন কিছু গুরত্বপূর্ন এট্রিবিউট নিয়ে আলোচনা করি।

** পাসওয়ার্ড ফিল্ড তৈরীতে শুধু type="password" দিলেই হয়ে গেল।

maxlength এট্রিবিউট দিয়ে ফিল্ডে সর্বোচ্চ কতটি অক্ষর লিখতে পারবে সেটা নির্দিষ্ট করে দেয়া যায়। যেমন:
<input type="text" name="address" maxlength="50"/>
প্রদর্শন

৫০টির বেশি character টাইপ করে দেখুন পারবেন না।
value এবং size
value এর মান যেটা দিবেন সেটা ফিল্ডের ভিতর দেখাবে। এডিট ফর্ম তৈরীর জন্য এটা লাগে। আর size দিয়ে দৈর্ঘ্য কত হবে সেটা ঠিক করা যায়। যেমন
<input type="text" name="address" maxlength="50" value="Mirpur, Dhaka" size="30"/>
প্রদর্শন

html ৫ এ placeholder নামে একটা নতুন attribute এসছে যেটা দিয়ে ফিল্ডে কি ধরনের তথ্য দিতে হবে এ সংক্রান্ত কিছু লিখে দিতে পারেন ফলে সেটা user দেখলে বুঝতে সুবিধা হবে।
<input type="text" name="address" maxlength="50" placeholder="Type Address" size="30"/>
প্রদর্শন

type করা শুরু করুন সাথে সাথে "Type Address" লেখাটি অদৃশ্য হয়ে যাবে।
ড্রপডাউন লিস্ট
Dropdown list এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা list তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন dropdown লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।

Dropdown list তৈরী করতে প্রথমে <select> tag দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন
<select name="color">
<option value="bl">Black</option>
<option value="wh">White</option>
<option selected="selected" value="mr">Maroon</option>
</select>
প্রদর্শন:ড্রপডাউন লিস্ট

উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম option Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।
প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।

<select> ট্যাগের size এট্রিবিউট
<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি item দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি option দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।
<select name="color" size=2>
<option value="bl">Black</option>
<option value="wh">White</option>
<option selected="selected" value="mr">Maroon</option>
</select>
প্রদর্শন: <select> ট্যাগের size এট্রিবিউট

<select> ট্যাগের multiple এট্রিবিউট
multiple এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।
<select multiple="yes">
<option value="bl">Black</option>
<option value="wh">White</option>
<option selected="selected" value="mr">Maroon</option>
</select>

প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট

*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।
আপনার option list যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন
<select name="selInformation" >
<optgroup label="Tutorials" >
<option value="html"> HTML Tutorial </option>
<option value="css"> CSS Tutorials </option>
<option value="javascript"> JavaScript </option>
</optgroup>
<optgroup label="PHP Tutorials" >
<option value="basicphp"> Basic PHP </option>
<option value="advancedphp"> Advanced PHP </option>
</optgroup >
<optgroup label="Database Tutorials">
<option value="sql"> SQL Tutorial </option>
<option value="phpdatabase"> PHP Database </option>
</optgroup>
</select>
প্রদর্শন:

লাইন ব্রেক
<br/> এটা হচ্ছে লাইন ব্রেক (ভাঙ্গার জন্য) এর জন্য একটি tag। tag টি এইটুকুই, start বা end tag ইত্যাদি নেই। এইচটিএমএল এলিমেন্টের ভিতর এটা ব্যবহার করে যেকোন জায়গায় লাইন ভেঙ্গে নিচের লাইনে নিয়ে যেতে পারেন। সাধারনত ঠিকানা ইত্যাদি লেখার সময় <p></p> এর ভিতর এটা ব্যবহার করা হয়। এছাড়াও আরো অনকে প্রয়োগ আছে।
<p>12/13 Market Road<br/>Mirpur, Dhaka<br/>Bangladesh</p>
প্রদর্শন
12/13 Market Road
Mirpur, Dhaka
Bangladesh
<hr/> ট্যাগ
===============
আড়াআড়ি ভাবে লম্বা রেখা দেয়ার জন্য hr ট্যাগটি ব্যবহৃত হয়। যেমন
<p>Bangladesh</p>
<hr/>
<h2>This is a heading</h2>
<hr/>
প্রদর্শন
Bangladesh
________________________________________
This is a heading
________________________________________
রেডিও বাটন
** যেকোন input (এখানে radio বাটন) ফিল্ড একটা form এলিমেন্টে তাই এখানে যত উদাহরন দেব সব <form></form> এর ভিতর রাখতে হবে।
ফর্মে অনেক সময় অনেকগুলি অপশনের মধ্যে যেকোন একটি অপশন সিলেক্ট করার সুযোগ দেয়া লাগতে পারে। এসব ক্ষেত্রে রেডিও বাটন ব্যবহৃত হয়। যেমন
<p>Select your department</p>
<input type="radio" name="dept" value="1"/>Statistics
<input type="radio" name="dept" value="2"/>Mathematics
<input type="radio" name="dept" value="3"/>CSE
প্রদর্শন:
Select your department
Statistics Mathematics CSE
দেখুন শুধু type এট্রিবিউট পরিবর্তন করাতে radio button চলে এসেছে, type এর মান text দিলে textbox হয়, checkbox দিলে একাধিক option সিলেক্ট করার মত ফিল্ড আসে, submit দিলে একটা সাবমিট বাটন তৈরী হয় ইত্যাদি।
** সব ফর্ম এলিমেন্টের name এট্রিবিউটের মান ভিন্ন দিতে হয় শুধু radio বাটনের ক্ষেত্রে একই নাম দিতে হবে যদি চান যেকোন একটি সিলেক্ট করতে পারবে (অন্যটি সিলেক্ট করলে অটোমেটিক সিলেক্টেড টি আনসিলেক্ট হয়ে যাবে)। মান ভিন্ন দিবেন না কারন এটাতো চেকবক্স দিয়ে করা হয় যা প্রথম টিউটোরিয়ালে আলোচনা হয়েছে।
যেকোন একটি যদি selected দেখাতে চান তাহলে সেটাতে checked বা checked="checked" attribute ব্যবহার করুন।যেমন
<p>Select your department</p>
<input type="radio" name="dept" value="1"/>Statistics
<input type="radio" name="dept" value="2"/>Mathematics
<input type="radio" name="dept" value="3" checked/>CSE
প্রদর্শন
Select your department
Statistics Mathematics CSE

এছাড়া required, disabled ইত্যাদি এট্রিবিউট ব্যবহার করতে পারেন যেগুলি textarea টিউটোরিয়ালে আলোচনা হয়েছে।
টেক্সট এরিয়া
** textarea একটি ফর্ম এলিমেন্টে অর্থ্যাৎ এখানে যতগুলি উদাহরন থাকবে তা <form></form> ভিতরে রাখতে হবে।
input এর type="text" দিলে যে টেক্সট ফিল্ড তৈরী হয় সেখানে কয়েকটি শব্দ লেখা চলে। অনেক কয়েক line লেখার প্রয়োজন হলে <textarea></textarea> element ব্যবহার করতে হবে। ধরুন ফর্মে ইউজারের নিজের সম্পর্কে লেখার জন্য একটা ফিল্ড দিবেন তখন textraea ব্যববহার করতে পারেন কেননা ইউজার অনেক লাইন লিখতে পারে নিজের সম্পর্কে লিখতে পারে।
<textarea cols="30" rows="7" name="about_you">Write about you</textarea>
প্রদর্শন:

cols attribute দিয়ে আড়াআড়ি ভাবে দৈর্ঘ্য বাড়ানো যায় আর rows এর মান যত বেশি দিবেন লম্বা হবে।
wrap নামে একটা এট্রিবিউট ব্যবহার করতে পারেন। wrap="soft" দিলে ইউজার যদি textarea এর width এর চেয়ে বেশি টেক্সট দেয় তবুও এক লাইনে দেখাবে (সাবমিট করলে)। বাই ডিফল্ট এটাই সক্রিয় থাকে। wrap="hard" দিলে লেখা মুড়িয়ে দেখাবে (ভেঙ্গে দেখাবে)। hard দিলে অবশ্যই cols এট্রিবিউট ব্যবহার করতে হবে।
autofocus="autofocus" বা শুধু autofocus দিতে পারেন। এটাও একটা এট্রিবিউট এটা দিলে অটোমেটিক টেক্সএরিয়াতে মাউস চলে যাবে এবং কারসর পিটপিট করবে। পেজ লোড হবার সময় এমন হবে। আর যদি এটা না দেন তাহলে textarea এর ভিতর মাউস নিয়ে click করলে তারপর কারসর পিটপিট করবে।
required="required" বা শুধু required দিতে পারেন। এটা দিয়ে ফর্ম ভেলিডেশনের কাজ হয় যেটা আগে জাভাস্ক্রিপ্ট দিয়ে করতে হত। এই ফিল্ড ইউজার পুরন না করলে ফর্ম submit ই করতে দেবেনা।

readonly="readonly" বা শুধু readonly দিলে ইউজার শুধু দেখতে পাবে কিন্তু সেখানে কিছু লিখতে পারবেনা। সাধারনত privacy policy এর কথাগুলি অনেকসময় এভাবে textarea তে readonly করে শুধু দেখানো হয়।
disabled একটা এট্রিবিউট ব্যবহার করতে পারেন disabled="disabled" বা শুধু disabled দিয়ে। ধুসর রং দিয়ে তখন textarea টি দেখাবে।
maxlength, name, placeholder এগুলি আগের টিউটোরিয়ালে আলোচনা আছে, এখানেও একি কাজ।
<form action="test.php" method="post">
<textarea autofocus="autofocus" cols="30" rows="10" name="about_you" placeholder="write about you" required></textarea>
<input type="submit" name="submit" value="Submit">
</form>
যেকোন নামে .html এক্সটেনশন দিয়ে সেভ করে (যেমন test.html) রান করিয়ে দেখুন।