There is no item in the cart. If you want to buy, Please click here.
এইচটিএমএল(HTML) টিউটোরিয়াল
একটি ইনপুট নিয়ন্ত্রণ নির্ধারণ করে ( <input> ট্যাগ )
ফর্ম element এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ element হল <input> element. এই element টি বিভিন্ন বিষয়ের উপর ভিক্তি করে বিভিন্ন রকম হয়ে থাকে
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
মাল্টলাইন ইনপুট নিয়ন্ত্রণ (text area) সংজ্ঞা দেয় ( <textarea> ট্যাগ )
ইনপুট ফিল্ডের অনেকগুলো লাইন লিখার ক্ষেত্রে আমরা <textarea> ব্যবহার করে থাকি।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
ক্লিকযোগ্য বাটনটি সংজ্ঞায়িত করে ( <button> ট্যাগ )
কোন বাটন কে ক্লিক করার জন্য আমরা এই element টি ব্যবহার করে থাকি।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>
ড্রপ ডাউন তালিকা ডিফাইন করার জন্য ( <select> ট্যাগ )
একটি নির্বাচিত বাক্স, যার নাম ড্রপ ডাউন বাক্স যা ড্রপ ডাউন তালিকা আকারে বিভিন্ন বিকল্প তালিকাবদ্ধ করতে বিকল্প সরবরাহ করে, যেখানে থেকে ব্যবহারকারী এক বা একাধিক বিকল্প নির্বাচন করতে পারেন
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>
একটি ড্রপ-ডাউন তালিকায় সম্পর্কিত বিকল্পগুলির একটি গোষ্ঠী সংজ্ঞায়িত করে ( <optgroup> ট্যাগ )
<optgroup> ট্যাগটি <নির্বাচন> উপাদান (ড্রপ-ডাউন তালিকা) এর সাথে সম্পর্কিত বিকল্পগুলিতে গ্রুপ ব্যবহার করতে ব্যবহৃত হয়।
আপনার যদি বিকল্পগুলির একটি দীর্ঘ তালিকা থাকে তবে সম্পর্কিত বিকল্পগুলির গ্রুপগুলি ব্যবহারকারীর পক্ষে পরিচালনা করা সহজ।
উদাহরণঃ
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
একটি ড্রপ-ডাউন তালিকায় একটি বিকল্প সংজ্ঞা দেয় ( <option> ট্যাগ )
<option> element পছন্দ মতন কনটেন্ট সিলেক্ট অপশন থেকে নির্বাচন করার জন্য ব্যবহার করা হয়। তালিকাতে সাধারনত প্রথম অপশন টি সিলেক্ট করা থাকে।
উদাহরণঃ
<!DOCTYPE html>
<html>
<body>
<h1>The option element</h1>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<ইনপুট> উপাদানটির জন্য একটি লেবেল সংজ্ঞা দেয় ( <label> ট্যাগ )
<label> ট্যাগ সাধারণত <button>, <input>, <meter>, <output>, <progress>, <select>, এবং <textarea> এলিমেন্টের লেভের নির্ধারণ করার জন্য ব্যবহার হয়।<label> ট্যাগের মাঝে আসা টেক্সটটি নির্ধারিত এলিমেন্টের সাথে সংযোগ হয়ে যায়। যার ফলে ব্যবহারকারী যখন টেক্সটটির উপর ক্লিক করে তখন সংযোজিত এলিমেন্টে'টি সিলেক্ট হয়ে যায়। কিছু ইউজার আছেন যারা এলিমেন্টে ক্লিক না করে টেক্সটটিতে ক্লিক করেন। এই সুবিদাটি মুলত তাদের জউদাহরণঃ
<label> নামঃ- <input type="text" placeholder="Your Name Please!"></label><br><br>
<label> পুরুষঃ- <input type="radio" name="status"></label>
<label> মহিলাঃ- <input type="radio"name="status"></label><br><br>
<label> <input type="checkbox" name="vehicle" value="Bike"> আমার একটি সাইকেল আছে। </label> <br>
<label> <input type="checkbox" name="car" value="Car" checked> আমার একটি কার আছে। </label>
একটি ফর্ম সম্পর্কিত উপাদান গোষ্ঠী ( <fieldset> ট্যাগ )
Field তৈরী করে একটি ক্ষেত্র আর সেই ক্ষেত্রে থাকে ফর্ম এলিমেন্টের কিছু সেট। অর্থাৎ একটি ফর্মের প্রয়োজনীয় এলিমেন্ট গুলিকে একটি ঘরের ভিতর নিয়ে আসা হয়। তাহলে সহজ কথায় বলা যায়, ফর্ম এলিমেন্টের সাথে সম্পর্কযুক্ত এলিমেন্ট গুলী নিয়ে একটি গ্রুপ তৈরী করার জন্য <fi ট্যাগটি ব্যবহার করা হয়।<fieldset> ট্যাগটি বাক্সের মত একটি ক্ষেত্র তৈরী করে তার ভিতর গ্রুপের মাধ্যমে প্রয়োজনীয় ফর্ম এলিমেন্ট গুলি রেখে উপস্থাপন করে বলেই এই ট্যাগটিকে <fieldse ট্যাগ বলা হয়।<fieldset> ট্যাগের ভিতর <legend> ট্যাগ ব্যবহার করে ফিল্ডটির ছোট্ট একটি পরিচিতি তুলে ধরা হয়।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML fieldset Tag </title>
</head>
<body>
<form>
<fieldset>
<legend>আপনার ব্যক্তিগত তথ্য</legend> নাম
<input type="text">
<br> ই-মেইল <input type="email" id="email">
<br> জর্ম্ম তারিখ <input type="date">
<br>
<br>
<input type="radio" name="gender" value="male"> পুরুষ <inputtype="radio" name="gender" value="female"> মহিলা
</fieldset>
</form>
</body>
</html>
<ফিল্ডসেট> উপাদানটির জন্য ক্যাপশন সংজ্ঞা দেয় ( <legend> ট্যাগ )
<ফিল্যান্ডেটি> ট্যাগটি <ফিল্ডসেট> উপাদান দ্বারা নির্ধারিত ফর্ম নিয়ন্ত্রণের একটি সেটকে ক্যাপশন বরাদ্দ করতে ব্যবহৃত হয়।
উদাহরণঃ
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
ইনপুট নিয়ন্ত্রণের জন্য পূর্বনির্ধারিত বিকল্পগুলির একটি তালিকা নির্দিষ্ট করে ( <datalist> ট্যাগ )
Pre-defined অপশন্স এর তালিকা থেকে ইনপুট এর উপাদান এর জন্য দাতালিস্ত ব্যবহার করা হয়। ইউজার রা pre-defined অপশন্স এর একটি তালিকা দেখতে পাবে ডাটা ইনপুট দেওয়ার জন্য। এই জন্য <datalist> element এর ভিতর ID attribute নিশ্চিতভাবে ডিফাইন করে দিতে হবে
উদাহরণঃ
<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
গণনার ফলাফল নির্ধারণ করে ( <output> ট্যাগ )
কোন ক্যালকুলাসন করার জন্য এবং তার ফলাফল দেখানোর জন্য এই element ব্যবহার করা হয়
উদাহরণঃ
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
