এইচটিএমএল ইনপুট টাইপ ভ্যালু
এক নজরে এইচটিএমএল ইনপুট টাইপের ভ্যালু সমুহ
আমাদের টিউটোরিয়ালের এই অংশে আমরা <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>
ফলাফল
আমরা এইচটিএমএল(৫)-এ যুক্ত নতুন ইনপুট টাইপ ভ্যালু সম্পর্কে পরবর্তী অধ্যায়ে আলোচনা করবো।