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

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

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

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

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

এইচটিএমএল৫

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

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

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

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

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

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

রেফারেন্স- reference

 

এইচটিএমএল ইনপুট টাইপ ভ্যালু


এক নজরে এইচটিএমএল ইনপুট টাইপের ভ্যালু সমুহ

আমাদের টিউটোরিয়ালের এই অংশে আমরা <input> এলিমেন্টের type এট্রিবিউটের ভ্যালু সম্পর্কে জানবো।

ভ্যালু বর্ণনা
text এক লাইনের টেক্সট বক্সের জন্য <input type="text"> ব্যবহার করা হয়।
password ইনপুট ফিল্ডে পাসওয়ার্ডের জন্য <input type="password"> ব্যবহার করা হয়।
submit ফর্মের তথ্য সার্ভারে পাঠানোর জন্য সাবমিট বাটন তৈরি করতে <input type="submit"> ব্যবহার করা হয়।
radio রেডিও বাটন তৈরি করতে <input type="radio"> ব্যবহার করা হয়।
checkbox চেক বক্স তৈরি করার জন্য <input type="checkbox"> ব্যবহার করা হয়।
button ইনপুট ফিল্ডে ক্লিক যোগ্য বাটন তৈরি করতে <input type="button"> ব্যবহার করা হয়।

ইনপুট type:text

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইনপুট পাসওয়ার্ড টাইপ</title>
</head>
<body>

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

</body>
</html>

ফলাফল



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


ইনপুট type:password

ইনপুট ফিল্ডকে পাসওয়ার্ডের জন্য ব্যবহার করতে <input type="password"> ডিফাইন করা হয়ঃ

উদাহরণ

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

<form action="action_page.php" method="post">
  ব্যবহারকারীর নামঃ
  <input type="text" name="username"><br>
  ব্যবহারকারীর পাসওয়ার্ডঃ
  <input type="password" name="password"><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

পাসওয়ার্ডের ফিল্ডের ক্যারেক্টার সমুহ সরাসরি প্রদর্শিত না হয়ে বৃত্তাকার আকারে দেখা যায়।

ফলাফল



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


ইনপুট type:submit

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

সার্ভার পেজটি ইনপুট এলিমেন্টের তথ্য সমূহকে প্রসেসিং অথবা সংরক্ষন করে। ফর্মের action এট্রিবিউট সার্ভার পেজটিকে ডিফাইন করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইনপুট type:submit</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" পেজে পাঠানো হয়।

ফলাফল



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

সাবমিট বাটনে যদি কোনো value দেওয়া না থাকে তবে এটি ডিফল্ট ভাবে Submit নিয়ে নিবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইনপুট type:submit</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">
</form>

</body>
</html>

ফলাফল



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


ইনপুট type:radio

ইনপুট ফিল্ডকে রেডিও বাটনে রুপান্তর করতে <input type="radio"> ডিফাইন করা হয়। রেডিও বাটনের মাধ্যমে ব্যবহারকারী একাধিক অপশন থেকে একটি বাছাই করতে পারে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইনপুট type:radio</title>
</head>
<body>

<form action="action_page.php">
  <input type="radio" name="product" value="HP" checked>HP<br>
  <input type="radio" name="product" value="Apple">Apple<br>
  <input type="radio" name="product" value="lenovo">lenovo<br><br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

রেডিও বাটনের ক্ষেত্রে আপনি যেকোনো একটি অপশন বাছাই করতে পারবেন।

ফলাফল



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


ইনপুট type:checkbox

ইনপুট ফিল্ডকে চেকবক্সে রুপান্তর করতে <input type="checkbox"> ডিফাইন করা হয়। চেকবক্সের মাধ্যমে ব্যবহারকারী তা ইচ্ছে অনুযায়ী যেকোন অপশন বাছাই করতে পারেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইনপুট type:checkbox</title>
</head>
<body>

<form action="action_page.php">
  <input type="checkbox" name="coach1" value="আমার একটি বাইক আছে।">আমার একটি বাইক আছে।<br>
  <input type="checkbox" name="coach2" value="আমার একটি গাড়ি আছে।">আমার একটি গাড়ি আছে।<br>
  <input type="submit" value="সাবমিট">
</form>

</body>
</html>

চেকবক্স ব্যবহার করে আপনি ইচ্ছে মত এক বা একাধিক অপশন সিলেক্ট করতে পারবেন।

ফলাফল



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


ইনপুট type:button

একটি ইনপুট ফিল্ডকে ক্লিক যোগ্য বাটনে রুপান্তর করতে <input type="button"> ডিফাইন করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>ইনপুট type:button</title>
</head>
<body>

<input type="button" onclick="alert('হ্যালো বাংলাদেশ!')" value="ক্লিক করুন !">

</body>
</html>

ফলাফল




আমরা এইচটিএমএল(৫)-এ যুক্ত নতুন ইনপুট টাইপ ভ্যালু সম্পর্কে পরবর্তী অধ্যায়ে আলোচনা করবো।