এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

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

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

এইচটিএমএল ফর্ম এলিমেন্ট


এইচটিএমএল ফর্ম এলিমেন্ট

এইচটিএমএল ফর্মে নিম্নের ট্যাগ গুলো রয়েছেঃ

ট্যাগ বর্ণনা
<form> ব্যবহারকারীর জন্য একটি ইনপুট ফর্ম ডিফাইন করে
<input> ফর্মের মধ্যে তথ্য নেওয়ার জন্য ইনপুট বক্স তৈরি করে
<textara> একাধিক লাইনের তথ্য নেওয়ার একটি বক্স তৈরি করা হয়
<label> <input> এলিমেন্টের জন্য একটি শিরোনাম ডিফাইন করা হয়
<fieldset> ফর্ম এলিমেন্টকে একটি শ্রেনীতে বিভক্ত করে
<legend> <fieldset> এলিমেন্টের জন্য একটি শিরোনাম ডিফাইন করা হয়
<select> একটি ড্রপ-ডাউন লিস্ট ( drop-down list) সংজ্ঞায়িত করা হয়
<optgroup> এর মাধ্যমে একটি ড্রপ-ডাউন লিস্টকে বিভিন্ন শ্রেনীতে বিভক্ত করা হয়
<option> ড্রপ-ডাউন লিস্টের একটি অপশন ডিফাইন করে
<button> একটি বাটন ডিফাইন করে
<datalist> একটি ইনপুটের জন্য পূর্ব নির্ধারিত অপশনের লিস্ট তৈরি করে
<keygen> ফর্মের জন্য পাবলিক এবং প্রাইভেট কী উৎপন্ন করে
<output> ফলাফল প্রদর্শন করা হয়

আমাদের টিউটোরিয়ালের এই অংশে সকল এইচটিএমএল ফর্ম এলিমেন্ট সমূহের বর্ণনা দেওয়া হয়েছে।


ফর্ম <input> এলিমেন্ট

ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এলিমেন্ট হচ্ছে <input> এলিমেন্ট।

type এট্রিবিউটের উপর নির্ভর করে <input> এলিমেন্ট পরিবর্তিত হতে পারে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
 <title>এইচটিএমএল ফর্ম উদাহরণ</title>
</head>
<body>

<form method="post" action="action_page.php">
  নামঃ <input type="text" name="name" value="তামজীদ হাসান"><br>
  ই-মেইলঃ <input type="email" name="email" value="tamjid@example.com"><br>
  এইচটিএমএল পছন্দঃ <input type="radio" name="like" value="হ্যা" checked > হ্যা
  <input type="radio" name="like" value="না"> না <br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

যখন আপনি সাবমিট বাটনে ক্লিক করবেন, তখন সার্ভার আপনার ইনপুট গুলোকে "action_page.php" ফাইলের মাধ্যমে প্রক্রিয়াজাত করে এবং ফলাফল ফেরত দেয়।

ফলাফল



বিঃদ্রঃ এই টিউটোরিয়ালটি আপনাকে শিখাবে না কিভাবে সার্ভার ফাইল প্রক্রিয়া করে। তা শিখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।


ফর্ম <select> এলিমেন্ট

আপনি <select> এলিমেন্ট ব্যবহার করে ড্রপ-ডাউন লিস্ট ডিফাইন করতে পারবেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ফর্ম সিলেক্ট এলিমেন্ট</title>
</head>
<body>
<form action="action_page.php">
<select name="product">
  <option value="Dell">Dell</option>
  <option value="Apple">Apple</option>
  <option value="lenovo">lenovo</option>
  <option value="HP">HP</option>
</select>
<br><br>
<input type="submit" value="সাবমিট"></input>
</body>
</html>

ফলাফল



বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।

<option> এলিমেন্টের যেকোন একটি এলিমেন্টকে প্রথমত সিলেক্ট করে রাখার জন্য আপনাকে selected এট্রিবিউট ব্যবহার করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ফর্ম অপশন সিলেক্ট এলিমেন্ট</title>
</head>
<body>

<form action="action_page.php">
  <select name="product">
    <option value="Dell">Dell</option>
    <option value="Apple" selected>Apple</option>
    <option value="Lenovo">lenovo</option>
    <option value="hp">hp</option>
  </select>
  <br><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

সিলেক্ট এট্রিবিউট দিয়ে আপনি একটি অপশন সিলেক্ট করতে পারেন।

ফলাফল



বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।


ফর্ম <textarea> এলিমেন্ট

আপনি <textarea> এলিমেন্টের মাধ্যমে একাধিক লাইনের ইনপুট ফিল্ড ডিফাইন করতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ফর্ম textarea এলিমেন্ট</title>
</head>
<body>

<form action="action_page.php">
  <textarea name="message" rows="10" cols="30">মেয়েটি বাগানের মধ্যে খেলা করে। </textarea><br>
  <input type="submit" value="সাবমিট">
</form>
</body>
</html>

ফলাফল



বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।


ফর্ম <button> এলিমেন্ট

আপনি <button> এলিমেন্টের মাধ্যমে একটি ক্লিকযোগ্য বাটন ডিফাইন করতে পারবেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>বাটন এলিমেন্ট</title>
</head>
<body>

  <button type="button" onclick="alert('হ্যালো ওয়ার্ল্ড!')">এখানে ক্লিক করুন!</button>

</body>
</html>

ফলাফল



উপরের বাটনে একটি ইভেন্ট ব্যবহারের মাধ্যমে এলার্ট দেখানো হয়েছে। এই সম্পর্কে আরো জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখুন।


এইচটিএমএল(৫) ফর্ম এলিমেন্ট

নিম্নলিখিত ফর্ম এলিমেন্টগুলো এইচটিএমএল(৫) নতুন করে যুক্ত হয়েছেঃ

এলিমেন্ট বর্ণনা
<datalist> ইনপুট ফিল্ডে তথ্য ইনপুট করা শুরু করলে পূর্ব নির্ধারিত অপশন ড্রপ-ডাউন লিস্ট আকারে আসে।
<keygen> ইউজারকে যাচাই করার জন্য ব্যবহার করা হয়।
<output> ইনপুট এলিমেন্টের ভ্যালু আউটপুট করতে ব্যবহার করা হয়।

নতুন এলিমেন্টগুলো পুরাতন ব্রাউজারে সাপোর্ট করে না।

এইচটিএমএল(৫) <datalist> এলিমেন্ট

<datalist> এলিমেন্ট <input> এলিমেন্টের জন্য পূর্বনির্ধারিত অপশনের একটি তালিকা নির্দেশ করে। ব্যবহারকারী ইনপুট ফিল্ডে তথ্য ইনপুট করা শুরু করলে পূর্বনির্ধারিত অপশনের ড্রপ-ডাউন লিস্ট দেখতে পাবে।

<input> এলিমেন্টের list এট্রিবিউট অবশ্যই <datalist> এলিমেন্টের id এট্রিবিউটকে বুঝাবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল ডেটালিস্ট এলিমেন্ট</title>
</head>
<body>

<form action="action_page.php">
  <input list="browsers" name="browser">
    <datalist id="browsers">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">>
    </datalist>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

পরামর্শঃ সাফারি অথবা IE9 এর মধ্যে ডেটালিস্ট ট্যাগ সার্পোট করে না।

ফলাফল



বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।


এইচটিএমএল(৫) <keygen> এলিমেন্ট

ইউজারকে যাচাই করার জন্য <keygen> এলিমেন্ট ব্যবহার করা হয়। <keygen> এলিমেন্ট ফর্মের মধ্যে এক-জোড়া কী(key) উৎপাদন করে এর মধ্যে একটি হলো প্রাইভেট এবং অন্যটি পাবলিক।

কোনো ফর্ম সাবমিট করার সঙ্গে সঙ্গেই এই দুইটি কী(key) উৎপন্ন হয়। এর মধ্যে প্রাইভেট কী(key) ব্রাউজারে সংরক্ষিত হয় এবং পাবলিক কী(key) সার্ভারে পাঠানো হয়।ভবিষ্যতে কোনো ইউজারকে যাচাই করার জন্য পাবলিক কী(key) ব্যবহৃত হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>ফর্ম keygen এলিমেন্ট</title>
</head>
<body>

<form action="action_page.php">
  ব্যবহারকারীর নামঃ <input type="text" name="username"><br>
  এনক্রিপশন(Encryption): <keygen name="security"><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

ফলাফল



বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।


এইচটিএমএল(৫) <output> এলিমেন্ট

<input> এলিমেন্ট সমূহের মান <output> এলিমেন্টে স্ক্রিপ্টের মাধ্যমে প্রদর্শন করা যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
</head>
<body>

<form action="action_page.php" oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">

  0
  <input type="range" id="num1" name="num1" value="0">
  100 +
  <input type="number" id="num2" name="num2">
  =
  <output name="result" for="num1 num2"></output>
  <br><br>

  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

output এলিমেন্টে ফলাফল দেখার জন্য প্রদত্ত ইনপুট ফিল্ডে মান বসানঃ

ফলাফল



বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।