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

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

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

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

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

এইচটিএমএল৫

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

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

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

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

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

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

রেফারেন্স- reference

 

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


এক নজরে পরিচ্ছেদ

প্রসঙ্গ বর্ণনা
form ট্যাগ ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়
input ট্যাগ ফর্মের তথ্য সংগ্রহ করার জন্য বিভিন্ন ইনপুট ট্যাগ ব্যবহার করা হয়
action এট্রিবিউট ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে পাঠায়
method এট্রিবিউট ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড নির্ধারণ করে
name এট্রিবিউট ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করে
fieldset এট্রিবিউট ফর্মের তথ্যকে বিভিন্ন অংশে বিভক্ত করে

উদাহরণ

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

<form method="post" action="action_page.php">
  প্রথম নামঃ <input type="text" name="firstname" value="শিল্পী"><br>
  শেষের নামঃ <input type="text" name="lastname" value="দেবনাথ"><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

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

ফলাফল



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


এইচটিএমএল <form> এলিমেন্ট

ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়।

একটি এইচটিএমএল ফর্মকে <form> এলিমেন্ট দিয়ে ডিফাইন করা হয়।

উদাহরণ

<form>
...
ফর্ম এলিমেন্ট
...
</form>

ফর্ম এলিমেন্ট বিভিন্ন ধরনের হয়ে থাকে। যেমনঃ ইনপুট এলিমেন্ট, চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।


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

ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এবং বহুল ব্যবহৃত হচ্ছে <input> এলিমেন্ট। আমরা <input> এলিমেন্টে type এট্রিবিউট ব্যবহারের মাধ্যমে <input> এলিমেন্টকে বিভিন্ন প্রয়োজনে ব্যবহার করতে পারি।

এই টিউটোরিয়ালে আমরা type এট্রিবিউটে নিম্নের তিনটি ভ্যালুর ব্যবহার দেখবোঃ

টাইপ বর্ণনা
text সাধারণ টেক্সট ইনপুট ডিফাইন করে
radio রেডিও বাটন ইনপুট ডিফাইন করে
submit ফর্ম সার্ভারে প্রেরনের জন্য ডিফাইন করা হয়


ফর্ম text টাইপ ইনপুট

এক লাইনের একটি বক্সের মাধ্যমে তথ্য সংগ্রহের জন্য <input type="text"> ডিফাইন করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>টেক্সট টাইপ ইনপুট</title>
</head>
<body>

<form>
  প্রথম নামঃ <input type="text" name="firstname"><br>
  শেষের নামঃ <input type="text" name="lastname"><br>
</form>

</body>
</html>

ফলাফল



পরামর্শঃ টেক্সট ইনপু্টের ডিফল্ট দৈর্ঘ্য ২০ ক্যারেক্টারের বেশি হয় না।


ফর্ম radio টাইপ ইনপুট

ইনপুট এলিমেন্ট দ্বারা রেডিও টাইপ বাটন তৈরি করার জন্য <input type="radio"> ডিফাইন করতে হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>রেডিও টাইপ ইনপুট</title>
</head>
<body>

<form>
  <input type="radio" name="company" value="dell" checked> Dell <br>
  <input type="radio" name="company" value="apple"> Apple <br>
  <input type="radio" name="company" value="lenovo">  Lenovo
</form>

</body>
</html>

নিম্নের রেডিও বাটনে ব্যবহারকারী যেকোন একটিকে সিলেক্ট করতে পারবেঃ

ফলাফল




ফর্ম submit টাইপ ইনপুট

সার্ভারে তথ্য প্রেরনের জন্য সাবমিট বাটন তৈরি করতে <input type="submit"> ডিফাইন করতে হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সাবমিট টাইপ ইনপুট</title>
</head>
<body>

<form action="action_page.php">
  প্রথম নামঃ <input type="text" name="firstname" value="শিল্পী"><br>
  শেষের নামঃ <input type="text" name="lastname" value="দেবনাথ"><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

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

ফলাফল



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


ফর্ম action এট্রিবিউট

সাবমিট বাটনে ক্লিক করার পর action এট্রিবিউটটি তার কার্য সম্পাদন করে। সাবমিট বাটনে ক্লিকের মাধ্যমে ওয়েব পেজ থেকে ফর্মের তথ্য সার্ভারে সাবমিট করা হয়।

নিম্নে একটি ব্যবহার দেখানো হলোঃ

<form action="action_page.php">

ফর্ম method এট্রিবিউট

ফর্ম সাবমিটের জন্য এইচটিটিপি(HTTP) মেথড GET অথবা POST ব্যবহার হয়। নিম্নে ফর্মে মেথড এট্রিবিউট ডিফাইন করা হলঃ

<form action="action_page.php" method="get">

অথবাঃ

<form action="action_page.php" method="post">

কখন get ব্যবহার করবো?

ডিফল্টভাবে আপনি get মেথড ব্যবহার করতে পারেন। তবে ফর্মের তথ্য যদি সেন্সিটিভ(ইউজারের নাম অথবা পাসওয়ার্ড) হয় সেক্ষেত্রে get মেথড ব্যবহার করা উচিত না। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবেঃ

http://action_page.php?firstname=শিল্পী&lastname=দেবনাথ

কখন post ব্যবহার করবো?

আপনার ফর্মের তথ্য যদি সেন্সিটিভ হয় সেক্ষেত্রে অবশ্যই আপনার post মেথড ব্যবহার করা উচিত। কারণ আপনি যখন get মেথোড ব্যবহার করে ফর্মের তথ্য সার্ভারে পাঠান সেক্ষেত্রে আপনার প্রেরিত তথ্যটি নিম্নের মত পেজের এড্রেসের সাথে দেখা যাবে নাঃ

http://action_page.php

ফর্ম name এট্রিবিউট

প্রতিটি ইনপুট ফিল্ডের ভ্যালু সার্ভারে সঠিক ভাবে সাবমিট করার জন্য অবশ্যই name এট্রিবিউটটি সঠিক ভাবে ব্যবহার করতে হবে। কারণ name এট্রিবিউট ব্যাতিত সার্ভার আপনার প্রেরিত তথ্য গ্রহন করতে পারবে না।

নিম্নের উদাহরণে ফর্ম সাবমিট করার পর "প্রথম নাম" ইনপুট ফিল্ডের তথ্য সার্ভার গ্রহন করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ফর্ম name এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
  প্রথম নামঃ
  <input type="text" name="firstname" value="শরীফ">
  <br>
  শেষের নামঃ
  <input type="text" value="গাজী">
  <br><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

লক্ষ্য করুনঃ "শেষের নাম" এই ইনপুট এলিমেন্টের ভ্যালু সার্ভারে সাবমিট হবে না, কারণ ইনপুট এলিমেন্টে কোনো name এট্রিবিউট নেই।

ফলাফল



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


ফর্ম <fieldset> এর মাধ্যমে ফর্মের তথ্য বিন্যাস

ফর্মের তথ্যকে বিভিন্ন ভাগে বিভক্ত করার জন্য <fieldset> এলিমেন্ট ব্যবহার করা হয় এবং <fieldset> এলিমেন্টের মধ্যে <legend> এলিমেন্ট ব্যবহারের মাধ্যমে একটি ক্যাপশন বা শিরোনাম নির্ধারণ করা যায়

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>এইচটিএমএল ফর্ম</title>
</head>
<body>

<form action="action_page.php">
<fieldset>
  <legend> ব্যক্তিগত তথ্য:</legend>
  প্রথম নামঃ
  <input type="text" name="firstname" value="শিল্পী">
  <br>
  শেষের নামঃ
  <input type="text" name="lastname" value="দেবনাথ">
  <br>
  <input type="submit" value="সাবমিট">
</fieldset>
</form>

</body>
</html>

ফলাফল



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


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

নিম্নে ফর্মের সকল সম্ভাব্য এট্রিবিউটের সেটসহ একটি এইচটিএমএল <form> এলিমেন্ট দেখানো হলোঃ

উদাহরণ

<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8" enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
...
  ফর্ম এলিমেন্ট
...
</form>

নিন্মে <form> এলিমেন্টের এট্রিবিউট সমুহের তালিকা দেওয়া হলোঃ

এট্রিবিউট বর্ণনা
accept-charset ফর্মের জন্য ক্যারেক্টার সেট ডিফাইন করে।
action ফর্ম কোথায় সাবমিট করা হবে তা ডিফাইন করে।
autocomplete ব্রাউজার ফর্মের ভ্যালু স্বয়ংক্রিয়ভাবে সম্পূর্ন করবে কিনা তা ডিফাইন করে।
enctype সাবমিটকৃত ডেটার জন্য এনকোডিং ডিফাইন করা হয়।(ডিফল্টঃ url-encoded)
method ডেটা সাবমিটের জন্য নির্দিষ্ট এইচটিটিপি(HTTP) মেথড ডিফাইন করা হয়।
name ফর্মকে সনাক্ত করতে একটি নাম ব্যবহৃত হয়।(ডোমে ব্যবহারের জন্যঃ document.forms.name)
novalidate ব্রাউজার ফর্মের বৈধতা যাচাই করবে না তা ডিফাইন করে।
target action এট্রিবিউটের মাধ্যমে তথ্য প্রক্রিয়া করার জন্য সার্ভার ফাইলটি ডিফাইন করে।