পূর্ববর্তী অধ্যায় এ উল্লেখ করা হয়েছিল যে, block-level এলিমেন্ট সবসময়ই ব্যবহারযোগ্য পূর্ণ প্রসস্থ জায়গা দখল করে (ডানে ও বায়ে যতটা সম্ভব প্রসারিত হয়)
block-level এলিমেন্ট এর প্রসস্থতা নির্ধারণ করে দিলে ধারক এর প্রসারিত হওয়া বন্ধ করে দেয়া যেতে পারে। তারপর, আপনি মার্জিন auto হিসেবে সেট করে দিতে পারেন, এর ধারক এর মধ্যে এলিমেন্ট হরিজেন্টালি সেন্টার হিসেবে। এলিমেন্টটি নির্দিষ্ট করা প্রসস্ততা পর্যন্তিই জায়গা দখল করতে পারবে এবং বাকি খালি জায়গা দুই মার্জিন এর মধ্যে সমানভাবে ভাগ হবে।
যখন ব্রাউজার উইন্ডো এর আকার এলিমেন্ট এর প্রসস্থতা থেকে ছোট হবে তখন <div> সমস্যা সৃষ্টি করবে। তখন ব্রাউজার একটি horizontal scrollbar যোগ করবে।
এর সমাধান হচ্ছে max-width ব্যবহার করা, এটি ছোট উইন্ডোতে ব্রাউজার হ্যান্ডলিং সহজ করে। যখন ছোট কোন ডিভাইস এ সাইট ভিজিট করা হয় তখন এটি খুবই গুরুত্বপূর্ণ।
টিপস: দুটি div এর মধ্যে পার্থক্য বোজার জন্য ব্রাউজার উইন্ডোকে 500px এর চেয়ে ছোট করুন।
ফর্ম এর শুরুতে ইনপুট ফিল্ড এর জন্য একটি প্রাথমিক ভ্যালু সেট করার জন্য value attribute ব্যবহার করা হয়
উদাহরণ
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
ফলাফল
কেবল পঠনযোগ্যঅ্যাট্রিবিউট (Readonly attribute)
ইনপুট ফিল্ডের ভ্যালু শুধু পরতে পারবে কিন্তু কোন প্রকার পরিবর্তন করতে পারবে না এই readonly attribute দ্বারা
উদাহরণ
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
এই attribute এর জন্য কোন মান লাগবে না শুধু লিখতে হবে readonly=”readonly”
ফলাফল
নিষ্ক্রিয়করণঅ্যাট্রিবিউট (Disabled attribute)
ইনপুট ফিল্ডের কোন ডাটা এডিট করা যাবে না,বাবহার করা যাবে না, ক্লিক করা যাবে না এবং সাবমিট করা যাবে না এই রকম disable করে রাখার জন্য এই disable attribute ব্যবহার করা হয়
উদাহরণ
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
এই attribute এর কোন মানের দরকার পরে না (disabled=”disabled”)
ফলাফল
আকারঅ্যাট্রিবিউট (Size attribute)
ইনপুট ফিল্ডের এর character এর আকার size attribute দ্বারা করা হয়
উদাহরণ
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
ফলাফল
সর্বচ্চোআকারঅ্যাট্রিবিউট (Maxlength attribute)
ম্যাক্সিমাম কতটি ক্যারেক্টার হতে পারে এর জন্য আমরা maxlength attribute ব্যবহার করব।
উদাহরণ
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
ফলাফল
Maxlength দ্বারা নির্দিষ্ট character এর বেশি কোন ওয়ার্ড সাপোর্ট করে না। এই attribute কোন ফিডব্যাক প্রদান করে না। যদি ইউজার কে আমরা alert করতে চাই তাহলে আমাদের javascript বাবকার করতে হবে
ইনপুট নিষেধাজ্ঞা অব্যর্থ হয় না। javascript এর মাধ্যমে অবৈধ ভাবে ইনপুট করার অনেক উপায় আছে। নিরাপত্তার জন্য নিষেধাজ্ঞার পাশাপাশি রিসিভার (সার্ভার) দ্বারা চেক করা আবশ্যক.
কোন ইনপুট ফিল্ড আপনা থেকেই পরিপূর্ণ করবে কিনা এর জন্য autocomplete অন বা অফ ব্যবহার করা হয়। যদি তা অন করা থাকে তাহলে ব্রাউজার ইনপুট ফিল্ডের কোন ভ্যালু insert করার আগে আগেই অটোমেটিক পুরণ হয়ে যাবে যদি আগে এই ভ্যালুটি ইনপুট করা হয়ে থাকে। ফর্মের এর ক্ষেত্রে autocomplete অন রাখা সম্ভব নির্দিষ্ট কিছু ইনপুট ফিল্ডের এর জন্য তা অফ করে রাখা যাবে। autocomplete attribute ফর্মের এর ক্ষেত্রে কাজ করে এবং ইনপুট ফিল্ড এর ভিন্ন ভিন্ন ধরন যেমন text, search, url, tel, email, password, date picker, range, এবং color এই সব ক্ষেত্রে কাজ করে।
উদাহরণ
<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname">
কোন ইনপুট ফিল্ড পেজ লোড হওয়ার সাথে সাথে ওই ঘরে কার্সর আনার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
First name:<input type="text" name="fname" autofocus>
ফলাফল
এইখানে firstname এর ঘরে কার্সর দেখা যাবে।
ফর্ম attribute
একাধিক ফর্মের input ফিল্ড কে একটি কমন ফর্ম এর ID দিয়ে চিহ্নিত করার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
যদিও ফর্ম এর বাইরে একটি ইনপুট ফিল্ড ব্যবহার করা হচ্ছে কিন্তু তারপরও এটি ফর্মের একটি অংশ
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
ফলাফল
The "Last name" field below is outside the form element, but still part of the form.
Last name:
Formaction attribute
Form action attribute একটি ফর্ম এর ফাইল এর URL চিহ্ন করে যেখানে যেয়ে ইনপুট ডাটা সাবমিট হবে। এই attribute দুটি টাইপ এ ব্যবহার করা হয় type=”submit”, type=”image”
উদাহরণ
ভিন্ন ভিন্ন action এ দুইটি বাটন দ্বারা দেখানো হল
<form action="action_page.php">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
ফলাফল
Formenctype attribute
যখন সার্ভার এ ফর্ম ডাটা সাবমিট করা হবে তখন তা কিভাবে encode করা হবে এর জন্য আমরা এই attribute ব্যবহার করব পোস্ট মেথড এর ক্ষেত্রে । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরন
প্রথম সাবমিট বাটন ডিফল্ট encoded এবং দ্বিতীয় সাবমিট বাঁটন multipart/form-data হিসেবে encode করা হয়েছে
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
ফলাফল
Formmethod attribute
ফর্ম ডাটা url এ পাঠানোর ক্ষেত্রে HTTP মেথড বোঝার জন্য এই attribute ব্যবহার করা হয় । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
দ্বিতীয় বাটন টি HTTP এই মেথড এর
<form action="action_page.php" method="get">
First name: <input type="text" name="fname">
Input উপাদান কে সাবমিট করার পর তা অবৈধ ঘোষণা করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়। type=”submit” এই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
দুইটি সাবমিট বাটন একটি validate ছাড়া অন্যটি validate সহ
<input type="submit" formnovalidate value="Submit without validation">
</form>
ফলাফল
Formtarget attribute
ফর্ম সাবমিট করার পর কোথায় আমরা এর প্রতিক্রিয়া দেখতে চাই তা আমরা এই attribute এর মাধ্যমে করতে পারি। type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
ভিন্ন ভিন্ন টার্গেট এর জন্য দুইটি বাটন ব্যবহার করা হল
<form action="action_page.php">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
ফলাফল
উচ্চতাএবংপ্রস্থঅ্যাট্রিবিউট Height and width attribute
ইনপুট ফিল্ডের আকার নির্ধারণ করার জন্য এই attribute ব্যবহার করা হয়। type=”image” ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
Width এবং height সহ একটি ইমেজ যুক্ত বাটন দেখানো হল
ন্যূনতম, সর্বোচ্চঅ্যাট্রিবিউট (Min, max attribute)
একটি ইনপুট ফিল্ড এর মিনিমাম এবং ম্যাক্সিমাম ডাটা ইনপুট করার ক্ষেত্রে এই attribute গুলো ব্যবহার করা হয় ভিন্ন ভিন্ন ধরনের ইনপুট ব্যবহার করা যায় number, range, date, datetime, datetime-local, month, time এবং week।
উদাহরন
মিনিমাম এবং ম্যাক্সিমাম ভ্যালু সহ একটি উদাহরণ
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
ফলাফল
একাধিকঅ্যাট্রিবিউট (Multiple attribute)
ইনপুট ফিল্ডে একাধিক ডাটা সাবমিট করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়।দুই ধরনের ইনপুটে কাজ করা যায় ইমেইল, ফাইল।
Regular expression এই ধরনের ডাটা ইনপুট করার ক্ষেত্রে আমরা এই attribute ব্যবহার করব। এতে ফরম্যাট দেওয়া থাকে সেই অনুপাতে ডাটা ইনপুট দিতে হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।
উদাহরণ
এই ইনপুট ফিল্ড এ ৩ টা লেটার ইনপুট করা যাবে যেখানে কোন নাম্বার বা special character থাকবে না
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
ফলাফল
স্থানধারকঅ্যাট্রিবিউট (Placeholder attribute)
ইনপুট ফিল্ড এ কোন কিছু ইনপুট করার আগে হালকা ভাবে কোন লেখা ডিসপ্লে করার জন্য এই attribute ব্যবহার করা হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।
কোন ইউজার যেন কোন নির্দিষ্ট ইনপুট ফিল্ড ফাকা না রেখে ফর্ম সাবমিট করে সেই জন্য আমরা এই attribute ব্যবহার করব। এই টাইপ গুলো হল text, search, url, tel, email, password, date pickers, numbers, checkbox, radio, file.।
কোন একটি লিংক এর টার্গেট হিসাবে আইফ্রেম ব্যবহার করন
একটি আইফ্রেমকে কোন একটি লিঙ্ক এর টারগেট ফ্রেম হিসেবে ব্যবহার করা যায়
লিঙ্কটির target অ্যাট্রিবিউটটি অবশ্যই আইফ্রেম এর name অ্যাট্রিবিউটটিকে নির্দেশ করতে হবে