এইচটিএমএল ইনপুট এট্রিবিউট (HTML Input Attribute)
আমাদের টিউটোরিয়ালের এই অংশে আমরা এইচটিএমএল ফর্মে ব্যবহৃত ইনপুট এলিমেন্টে এর সকল এট্রিবিউট সম্পর্কে জানবো।
এক নজরে এট্রিবিউট সমূহ
| এট্রিবিউট | বর্ণনা |
|---|---|
| value | একটি ইনপুট ফিল্ডের প্রাথমিক ভ্যালু নির্ধারণ করে। |
| readonly | ইনপুট ফিল্ডের ভ্যালুকে শুধুমাত্র পড়ার অনুমতি দেয়। |
| disable | ইনপুট ফিল্ডের ভ্যালুকে নিষ্ক্রিয় করে। |
| size | ইনপুট ফিল্ডের দৈর্ঘ নির্ধারণ করে। |
| maxlength | ইনপুট ফিল্ডে সর্বাধিক কত ক্যারেক্টার ইনপুট করা যাবে তা নির্ধারণ করে। |
নিম্নে আমরা এই এট্রিবিউট সম্পর্কে বিস্তারিত আলোচনা করবো।
value এট্রিবিউট
আমরা value এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের প্রাথমিক ভ্যালুকে নির্ধারণ করতে পারিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>value এট্রিবিউট</title>
</head>
<body>
<form action="">
প্রথম নামঃ <input type="text" name="firstname" value="তামজীদ"><br>
শেষ নামঃ <input type="text" name="lastname">
</form>
</body>
</html>
ফলাফল
readonly এট্রিবিউট
আমরা readonly এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের ভ্যালুকে শুধুমাত্র পড়ার অনুমতি দিতে পারি। অর্থাৎ ইনপুট ফিল্ডের ভ্যালুর কোনো ধরনের পরিবর্তন করা সম্ভব হবে নাঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>readonly এট্রিবিউট</title>
</head>
<body>
<form action="#">
প্রথম নামঃ <input type="text" name="firstname" value ="তামজীদ" readonly><br>
শেষের নামঃ <input type="text" name="lastname">
</form>
</body>
</html>
ফলাফল
disabled এট্রিবিউট
আমরা disabled এট্রিবিউট ব্যবহার করে যে কোনো ইনপুট ফিল্ডের ভ্যালুকে নিষ্ক্রিয় করতে পারি এবং এই ফিল্ডের ভ্যালু সাবমিট হবে নাঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>disabled এট্রিবিউট</title>
</head>
<body>
<form action="#">
প্রথম নামঃ <input type="text" name="firstname" value ="তামজীদ" disabled><br>
শেষের নামঃ <input type="text" name="lastname">
</form>
</body>
</html>
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
size এট্রিবিউট
আমরা size এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডের দৈর্ঘ্য নির্ধারণ করতে পারিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>size এট্রিবিউট</title>
</head>
<body>
<form action="#">
প্রথম নামঃ <input type="text" name="firstname" size="40"><br>
শেষের নামঃ <input type="text" name="lastname">
</form>
</body>
</html>
ফলাফল
maxlength এট্রিবিউট
আমরা maxlength এট্রিবিউট ব্যবহার করে ইনপুট ফিল্ডে সর্বাধিক কতটি ক্যারেক্টার ইনপুট দেওয়া যাবে তা নির্ধারণ করতে পারিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>maxlength এট্রিবিউট</title>
</head>
<body>
<form action="#">
প্রথম নামঃ <input type="text" name="firstname" maxlength="10"><br>
শেষের নামঃ <input type="text" name="lastname">
</form>
</body>
</html>
ফলাফল
এখন আমরা এইচটিএমএল(৫)-এ সংযুক্ত নতুন ইনপুট এট্রিবিউট সমুহ দেখবোঃ
এক নজরে এইচটিএমএল(৫) ইনপুট এট্রিবিউট
| এট্রিবিউট | বর্ণনা |
|---|---|
| Autocomplete | পূর্বে ইনপুটকৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে। |
| Autofocuas | পেজ লোড হওয়া সম্পন্ন হলে ইনপুট ফিল্ডটি সিলেক্টেড থাকবে কিনা তা নির্ধারণ করে। |
| form | ফর্মের বাইরের ইনপুট ট্যাগকে আইডির মাধ্যমে ফর্মের সাথে লিংক করে। |
| formaction | ফর্মের মূল action এট্রিবিউটকে ওভার-রাইট করে অর্থাৎ সাবমিটের জন্য নতুন একটি লিংক নির্ধারণ করে। |
| formenctype | post মেথোডের ক্ষেত্রে সার্ভারে সাবমিটকৃত ডেটার এনকোডিং পদ্ধতি নির্ধারণ করে। |
| formmethod | সার্ভারে ফর্ম ডেটা পাঠানোর HTTP মেথোড নির্ধারণ করে। এটি ফর্মের মূল মেথোডকে ওভার-রাইড করে। |
| formvalidation | ইনপুট ফিল্ডের তথ্যের বৈধতা যাচাই বাতিল করে। |
| formtarget | ইনপুট এলিমেন্টের জন্য এটি target এট্রিবিউটের কাজ করে এবং ফর্ম এলিমেন্টে বিদ্যমান target এট্রিবিউটকে ওভার-রাইড করে। |
| height এবং width | ইমেজ ইনপুট ফিল্ডের দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে। |
| list | পূর্বনির্ধারিত ভ্যালুর একটি লিস্টকে ইনপুট ফিল্ডের সাথে আইডির মাধ্যমে লিংক করতে ব্যবহার করা হয়। |
| minimum এবং maximum | ইনপুট ফিল্ডের সর্বনিন্ম এবং সর্বোচ্চ ভ্যালু নির্ধারণ করে। |
| multiple | ইনপুট ফিল্ডে একত্রে একাধিক ভ্যালু সিলেক্ট করা সম্ভব হয়। এটি email এবং file টাইপের ক্ষেত্রে কাজ করে। |
| pattern | ইনপুট ফিল্ডের ভ্যালুর জন্য প্যাটার্ন নির্ধারণ করে। |
| placeholder | ইনপুট ফিল্ডের ইনপুটকৃত তথ্য সম্পর্কে ব্যবহারকারীকে অবগত করে। যা ইনপুট ফিল্ডে টাইপ করা শুরু করলে অদৃশ্য হয়ে যায়। |
| required | যদি ইনপুট ফিল্ডটি খালি থাকলে ব্যবহারকারীকে একটি সতর্কবার্তা দেয় এবং ফর্মটি সাবমিট হয় না। |
| step | পূর্ণ সংখ্যার মধ্যবর্তী ব্যবধান নির্ধারণ করে। |
autocomplete এট্রিবিউট
autocomplete এট্রিবিউট ইনপুট ফিল্ডে পূর্বে ব্যবহৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে। আমরা text, search, url, tel, email, password, range এবং color ইনপুট টাইপের সাথে autocomplete এট্রিবিউটটি ব্যবহার করতে পারবোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>autocomplete এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
প্রথম নামঃ <input type="text" name="firstname"><br>
শেষের নামঃ <input type="text" name="lastname"><br>
ই-মেইলঃ <input type="email" name="email" autocomplete="off"><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ autocomplete এর সাজেশন দেখার জন্য প্রথমে কিছু তথ্য ইনপুট করে নিন। কিছু ব্রাউজারের ক্ষেত্রে autocomplete ফাংশনটি চালু করে নিতে হবে। autocomplete এর সাজেশনকৃত তথ্য সমুহ ব্রাউজারে জমা থাকে।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
আমরা <form> এলিমেন্টের মধ্যেও autocomplete এট্রিবিউটটি ব্যবহার করতে পারবো। ডিফল্ট ভাবে autocomplete এট্রিবিউটের মান <form> এলিমেন্টের জন্য on থাকে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>autocomplete এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php" autocomplete="off">
প্রথম নামঃ <input type="text" name="firstname"><br>
শেষের নামঃ <input type="text" name="lastname"><br>
ই-মেইলঃ <input type="email" name="email" autocomplete="on"><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
novalidate এট্রিবিউট
novalidate এট্রিবিউটটি <form> এলিমেন্টে ব্যবহৃত হয়। ফর্ম সাবমিটের সময় novalidate এট্রিবিউট ফর্মের ডেটাকে ভ্যালিডেশন করা থেকে বিরত রাখে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>novalidate এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php" novalidate>
ই-মেইলঃ <input type="email" name="email">
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ novalidate এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
autofocus এট্রিবিউট
autofocus একটি বুলিয়ান এট্রিবিউট। ইনপুট ফিল্ডে autofocus এট্রিবিউট ব্যবহার করলে একটি পেজ লোড হলে ঐ ইনপুট ফিল্ডটি সিলেক্টেড অবস্থায় থাকবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>autofocus এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
প্রথম নামঃ <input type="text" name="firstname" autofocus><br>
শেষের নামঃ <input type="text" name="lastname"><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ autofocus এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
form এট্রিবিউট
আমরা ফর্ম এলিমেন্টের বাইরেও ইনপুট এলিমেন্ট ব্যবহার করতে পারি। উক্ত ইনপুট এলিমেন্টের ভ্যালু সার্ভারে প্রেরন করতে যে কোনো ফর্ম এলিমেন্টের সাথে লিংক করতে হবে। ইনপুট ফিল্ডটিকে ফর্ম এলিমেন্টের সাথে লিংক করতে আমরা form এট্রিবিউট ব্যবহার করবো। লিংকের কাজ সম্পন্ন করতে আমরা ফর্মে আইডি ব্যবহার করবো। যখন উক্ত ফর্মে ডেটা সাবমিট করা হবে তখন ইনপুট ফিল্ডের ভ্যালুও সার্ভারে প্রেরিত হবে।
আমরা উক্ত ইনপুট ফিল্ডটিকে একাধিক ফর্মে নির্দেশ করতে ইনপুট ফিল্ডের
form এট্রিবিউটে একাধিক আইডি ব্যবহার করতে পারি। আইডি সমুহকে আলাদা করতে আমরা স্পেস ব্যবহার করবো।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>form এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php" id="form1">
প্রথম নামঃ <input type="text" name="firstname"><br>
<input type="submit" value="সাবমিট">
</form>
<p>ফর্মের বাইরে ইনপুট এলিমেন্টঃ</p>
শেষের নামঃ <input type="text" name="lastname" form="form1">
</body>
</html>
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
formaction এট্রিবিউট
ইনপুট ফিল্ডের formaction এট্রিবিউট ফর্ম এলিমেন্টের action এট্রিবিউটকে ওভার-রাইট করতে পারে। অর্থাৎ এটি সার্ভারের জন্য নতুন একটি ফাইলের URL নির্ধারণ করে।
formaction এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>formaction এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
প্রথম নামঃ <input type="text" name="firstname"><br>
শেষের নামঃ <input type="text" name="lastname"><br>
<input type="submit" value="সাবমিট"><br>
<input type="submit" formaction="action_page2.php" value="ভিন্ন ফাইলে সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ formaction এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
formenctype এট্রিবিউট
<form> এলিমেন্টের enctype এট্রিবিউটকে ইনপুট ফিল্ডের formenctype এট্রিবিউট ওভার-রাইট করে। এটি ফর্মের ডেটার জন্য নতুন একটি এনকোডিং পদ্ধতি নির্ধারণ করে। এটি শুধুমাত্র পোষ্ট মেথোডের ক্ষেত্রে প্রযোজ্য।
formenctype এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>formenctype এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php" method="post">
প্রথম নামঃ <input type="text" name="firstname"><br>
<input type="submit" value="সাবমিট">
<input type="submit" formenctype="multipart/form-data" value="ভিন্ন এনকোডিং">
</form>
</body>
</html>
বিঃদ্রঃ formenctype এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
formmethod এট্রিবিউট
<form> এলিমেন্টের method এট্রিবিউটকে ইনপুট ফিল্ডের formmethod এট্রিবিউট ওভার-রাইট করে। ফর্মের ডেটা পাঠানোর জন্য HTTP মেথড ডিফাইন করে।
formmethod এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>formmethod এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php" method="get">
প্রথম নামঃ <input type="text" name="firstname"><br>
শেষের নামঃ <input type="text" name="lastname"><br>
<input type="submit" value="সাবমিট">
<input type="submit" formmethod="post" formaction="action_page.php" value="পোস্ট সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ formenctype এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
formnovalidate এট্রিবিউট
ডিফল্টভাবে ফর্মের ডেটা গুলোর বৈধতা যাচাই করে ইনপুট করা হয়। আমরা ইনপুট ফিল্ডে formnovalidate এট্রিবিউট ব্যবহার করে তা ওভার-রাইট করতে পারি এবং বৈধতা যাচাই করা ব্যাতিত ডেটা সাবমিট করতে পারি।
formmnovalidate এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>formnovalidate এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
ই-মেইল: <input type="email" name="email"><br>
<input type="submit" value="সাবমিট">
<input type="submit" formnovalidate value="বৈধতা ব্যাতিত সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ formnovalidate এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
formtarget এট্রিবিউট
<form> এলিমেন্টের target এট্রিবিউটকে ইনপুট এলিমেন্টের formtarget এট্রিবিউট ওভার-রাইট করে। এটি ফর্মের তথ্য সাবমিট হওয়ার পর ফলাফল কোথায় দেখাবে তা নির্ধারণ করে।
formtarget এট্রিবিউট input type="submit" এবং input type="image" এর সাথে ব্যবহার করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>formtarget এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
প্রথম নামঃ <input type="text" name="firstname"><br>
শেষের নামঃ <input type="text" name="lastname"><br>
<input type="submit" value="সাবমিট">
<input type="submit" formtarget="_blank" value="নতুন উন্ডো সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ formtarget এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
height এবং width এট্রিবিউট
height এবং width এট্রিবিউট ব্যবহার করে ইনপুট এলিমেন্টের দৈর্ঘ্য এবং প্রস্থকে নির্ধারণ করতে পারি।
height এবং width এট্রিবিউট input type="image" এর সাথেই শুধুমাত্র ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>height এবং width এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
প্রথম নামঃ <input type="text" name="firstname"><br>
শেষের নামঃ <input type="text" name="lastname"><br>
<input type="image" src="submit_image.jpg" alt="Submit" width="48" height="48">
</form>
</body>
</html>
বিঃদ্রঃ ইমেজের ক্ষেত্রে সর্বদা দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করুন।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
list এট্রিবিউট
একটি ইনপুট ফিল্ডে <datalist> এলিমেন্টকে যুক্ত করতে list এট্রিবিউট ব্যবহার করা হয়। এই দুইয়ের মধ্য লিংক তৈরি করতে আইডি ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>list এট্রিবিউট</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>
বিঃদ্রঃ <datalist> ট্যাগ IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
minimum এবং maximum এট্রিবিউট
ইনপুট ফিল্ডে সর্বনিম্ন এবং সর্বোচ্চ ভ্যালু নির্ধারণ করতে minimum এবং maximum এট্রিবিউট ব্যবহার করা হয়। ইনপুট টাইপ number, range, date, datetime, datetime-local, month, time এবং week এর সাথে ব্যবহার করা যাবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>minimum এবং maximum এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
1980-01-01 এর পূর্বের তারিখঃ
<input type="date" name="birthday1" max="1979-12-31"><br>
2000-01-01 এর পরের তারিখঃ
<input type="date" name="birthday2" min="2000-01-02"><br>
পরিমান - 1 এবং 10 এর মধ্যেঃ
<input type="number" name="quantity" min="1" max="10"><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ minimum এবং maximum এট্রিবিউট ফায়ারফক্স, IE10 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
multiple এট্রিবিউট
multiple একটি বুলিয়ান এট্রিবিউট। এটি ব্যবহারকারীকে ইনপুট এলিমেন্টে একত্রে একাধিক ভ্যালু ইনপুট করতে সাহায্য করে।
ইনপুট টাইপ email এবং file এর সাথে এটি কাজ করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>multiple এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
ইমেজ সিলেক্টঃ <input type="file" name="image" multiple>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ ব্রাউজারে একাধিক ফাইল সিলেক্ট করার চেষ্টা করুন। multiple এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
pattern এট্রিবিউট
pattern এট্রিবিউট হচ্ছে একটি রেগুলার এক্সপ্রেশন(RegExp) যা ইনপুট এলিমেন্টের ভ্যালুর প্যাটার্ন নির্ধারণ করে অর্থাৎ ভ্যালুর টাইপ এবং সংখ্যা নির্ধারণ করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>pattern এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
দেশের কোডঃ <input type="text" name="country_code" pattern="[A-Za-z]{2}" placeholder="দুই অক্ষর বিশিষ্ট দেশের কোড">
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ রেগুলার এক্সপ্রেশন সম্পর্কে বিস্তারিত জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখুন। pattern এট্রিবিউট সাফারি, IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
placeholder এট্রিবিউট
ইনপুট এলিমেন্টের placeholder এট্রিবিউট কোন ধরনের তথ্য ইনপুট করতে হবে তা সম্পর্কে ব্যবহারকারীকে অবগত করে। ব্যবহারকারী ইনপুট ফিল্ডে লেখা শুরু করলে placeholder টি অদৃশ্য হয়ে যাবে।
placeholder এট্রিবিউট - text, search, url, tel, email এবং password ইনপুট টাইপগুলোর সাথে কাজ করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>placeholder এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
<input type="text" name="firstname" placeholder="নামের প্রথম অংশ লিখুন"><br>
<input type="text" name="lastname" placeholder="নামের শেষ অংশ লিখুন"><br>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ placeholder এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
required এট্রিবিউট
ইনপুট ফিল্ডটি যদি অবশ্যই পূরণীয় হয় সেক্ষেত্রে ইনপুট ফিল্ডে required এট্রিবিউটি যুক্ত করুন। required একটি বুলিয়ান এট্রিবিউট।
required এট্রিবিউট - text, search, url, tel, email, password, date pickers, number, checkbox, radio এবং file ইনপুট টাইপ গুলোর সাথে কাজ করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>required এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
ব্যবহারকারীর নাম: <input type="text" name="username" required>
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ required এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।
step এট্রিবিউট
ইনপুট এলিমেন্টে পূর্ণ সংখ্যার মধ্য ব্যবধান নির্ধারণ করতে step এট্রিবিউট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>step এট্রিবিউট</title>
</head>
<body>
<form action="action_page.php">
<input type="number" name="points" step="3">
<input type="submit" value="সাবমিট">
</form>
</body>
</html>
বিঃদ্রঃ step এট্রিবিউট IE9 এবং এর পূর্বের ভার্সনে সার্পোট করে না।
ফলাফল
বিঃদ্রঃ কিভাবে সার্ভার ফাইলকে প্রক্রিয়া করে তা শেখার জন্য আমাদের পিএইচপি টিউটোরিয়াল দেখুন।