এইচটিএমএল ফরম উপাদানসমূহ (HTML Form Elements)
<input>Element:
ফর্ম element এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ element হল <input> element. এই element টি বিভিন্ন বিষয়ের উপর ভিক্তি করে বিভিন্ন রকম হয়ে থাকে।
<select> Element (drop-down-list):
উদাহরনঃ
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
ফলাফল
<option> element পছন্দ মতন কনটেন্ট সিলেক্ট অপশন থেকে নির্বাচন করার জন্য ব্যবহার করা হয়। তালিকাতে সাধারনত প্রথম অপশন টি সিলেক্ট করা থাকে।
উদাহরণ
<option value="fiat" selected>Fiat</option>
ফলাফল
<textarea> Element
ইনপুট ফিল্ডের অনেকগুলো লাইন লিখার ক্ষেত্রে আমরা <textarea> ব্যবহার করে থাকি।
উদাহরণ
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
ফলাফল
<button> element
কোন বাটন কে ক্লিক করার জন্য আমরা এই element টি ব্যবহার করে থাকি।
উদাহরণ
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
ফলাফল
এইচটিএমএল ৫ <datalist> element
Pre-defined অপশন্স এর তালিকা থেকে ইনপুট এর উপাদান এর জন্য দাতালিস্ত ব্যবহার করা হয়। ইউজার রা pre-defined অপশন্স এর একটি তালিকা দেখতে পাবে ডাটা ইনপুট দেওয়ার জন্য। এই জন্য <datalist> element এর ভিতর ID attribute নিশ্চিতভাবে ডিফাইন করে দিতে হবে।
উদাহরণ
<form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
ফলাফল
এইচটিএমএল ৫ <keygen> element
ইউজার রা নিরাপদ ভাবে বৈধতা ঘোষণা করার জন্য এই element ব্যবহার করা হয় । এই element এর মাধ্যমে একজোড়া ফিল্ড তৈরি হয় ফর্ম এর মধ্যে। যখন ফর্ম সাবমিট করা হয় দুই ধরনের key তৈরি হয়। একটি প্রাইভেট এবং পাবলিক। প্রাইভেট key লোকাল ভাবে জমা হয় এবং পাবলিক key সার্ভার এ পাঠানো হয়। client কে certify করার ক্ষেত্রে এই প্রাইভেট key ব্যবহার করা হয় যাতে ভবিষ্যতে এই ইউজার কে অথিনটিকেত করা যায়।
উদাহরণ
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
form>
ফলাফল
এইচটিএমএল ৫ <output> element
কোন ক্যালকুলাসন করার জন্য এবং তার ফলাফল দেখানোর জন্য এই element ব্যবহার করা হয়
উদাহরণ
<form action="action_page.asp" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
ফলাফল
এইচটিএমএল ফর্ম elements
| ট্যাগ | বর্ণনা |
| <form> | ইউজার দের ইনপুট দেওয়ার জন্য ফর্ম |
| <input> | ইনপুট কে নিয়ন্ত্রণ করার জন্য |
| <textarea> | একের অধিক লাইন কে ইনপুট দেওয়ার জন্য |
| <lable> | একটি ইনপুট এর লেবেল ডিফাইন করার জন্য |
| <fieldset> | একটি ফর্মের মধ্যে গ্রুপ সম্পর্কিত উপাদান ডিফাইন করার জন্য |
| <legend> <fieldset> | element এর নাম দেওয়ার জন্য (caption) |
| <select> | ড্রপ ডাউন তালিকা ডিফাইন করার জন্য |
| <optgroup> | গ্রুপ সম্পর্কিত অপশন ড্রপ ডাউন তালিকা থেকে পাওয়ার জন্য |
| <option> | ড্রপ ডাউন লিস্ট থেকে অপশন সিলেক্ট করার জন্য |
| <button> | বাটন কে ক্লিক করার ক্ষেত্রে |
| <datalist> | pre-defined অপশন্স এর একটি তালিকা যা থেকে ইনপুট কে নিয়ন্ত্রণ করা যাবে। |
| <keygen> | ফর্মের একজোড়া key ফিল্ড তৈরি করার জন্য |
| <optput> | calculation এর ফলাফল পাওয়ার জন্য। |
এইচটিএমএল ফরম (HTML Forms)
আজকে আমরা জানবো এইচটিএমএল ফর্ম কি এবং এর ব্যবহার সম্পর্কে। সাধারনত কোন ব্যাক্তির কাছ থেকে তথ্য গ্রহণ (ইনপুট) করতে এইচটিএমএল ফর্ম ব্যবহৃত হয়। যা <form> --- দ্বারা বোঝানো হয়। যেমনঃ
<form>
.
form elements
.
</form>
এইচটিএমএল ফর্ম এর মধ্যে ফর্ম এলিমেন্ট থাকে। তথ্য ইনপুট দেয়ার জন্য বিভিন্ন ধরনের ফর্ম এলিমেন্ট ব্যবহৃত হতে পারে যেমন চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।
টেক্সট ইনপুট
সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়।
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
নোটঃ ফর্ম নিজে নেজেই প্রদর্শিত হতে পারে না। ডিফল্ট টেক্সট ফিল্ড এর প্রসস্থতা হচ্ছে ২০ বর্ণ ।
চেকবক্স
চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।
রেডিও বাটন
<input type="radio"> রেডিও বাটনকে সঙ্গায়িত করে
রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়। লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
সাবমিট বাটন
ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।
যেমনঃ
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Masud"> <br> Last name:<br> <input type="text" name="lastname" value="Rana"> <br><br> <input type="submit" value="Submit"> </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
আপনি যদি "Submit" বাটন এ ক্লিক করেন তাহলে এই ফর্ম এর ডাটা "action_page.php".পেজ এ পাঠিয়ে দেবে।
একটু লক্ষ্য করলে দেখবো যে উপরের কোডটি লেখার সময় আমরা <form action=”action_page.php”> লিখেছি। এটি লেখা হয়েছে ফরমটা কোথায় সাবমিট হবে তা বুঝিয়ে। এটাকে Attribute বলা হয়।
এইচটিএমএল ইনপুট ধরন (HTML Input Types)
টেক্সট ইনপুট
সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়। এধরনের ইনপুট এক লাইনের হয়ে থাকে।
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
পাসওয়ার্ড ইনপুট
পাসওয়ার্ড গ্রহণের জন্য এ ধরনের ইনপুট ফিল্ড ব্যবহৃত হয়।
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
পাসওয়ার্ড এর ঘরটিতে কোনকিছু লিখলে তা মাস্কিং হয়ে থাকবে অর্থ্যাত লেখাগুলো দেখা যাবেনা।
সাবমিট বাটন
ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।
যেমনঃ
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Masud">
<br>
Last name:<br>
<input type="text" name="lastname" value="Rana">
<br><br>
<input type="submit" value="Submit">
</form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
চেকবক্স
চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।
<form> <input type="checkbox" name="vehicle" value="Bike">I have a cycle <br> <input type="checkbox" name="vehicle" value="Car">I have a motorcycle </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
রেডিও বাটন
রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়।লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ
এইচটিএমএল ইনপুট বৈশিষ্ট্যাবলী (HTML Input Attributes)
ভ্যালু attribute
ফর্ম এর শুরুতে ইনপুট ফিল্ড এর জন্য একটি প্রাথমিক ভ্যালু সেট করার জন্য value attribute ব্যবহার করা হয়
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>
ফলাফল
কেবল পঠনযোগ্য অ্যাট্রিবিউট (Readonly attribute)
ইনপুট ফিল্ডের ভ্যালু শুধু পরতে পারবে কিন্তু কোন প্রকার পরিবর্তন করতে পারবে না এই readonly attribute দ্বারা
উদাহরণ
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
এই attribute এর জন্য কোন মান লাগবে না শুধু লিখতে হবে readonly=”readonly”
ফলাফল
নিষ্ক্রিয়করণ অ্যাট্রিবিউট (Disabled attribute)
ইনপুট ফিল্ডের কোন ডাটা এডিট করা যাবে না,বাবহার করা যাবে না, ক্লিক করা যাবে না এবং সাবমিট করা যাবে না এই রকম disable করে রাখার জন্য এই disable attribute ব্যবহার করা হয়
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>
এই attribute এর কোন মানের দরকার পরে না (disabled=”disabled”)
ফলাফল
আকার অ্যাট্রিবিউট (Size attribute)
ইনপুট ফিল্ডের এর character এর আকার size attribute দ্বারা করা হয়
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>
ফলাফল
সর্বচ্চোআকার অ্যাট্রিবিউট (Maxlength attribute)
ম্যাক্সিমাম কতটি ক্যারেক্টার হতে পারে এর জন্য আমরা maxlength attribute ব্যবহার করব।
উদাহরণ
<form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> <br> Last name:<br> <input type="text" name="lastname"> </form>
ফলাফল
Maxlength দ্বারা নির্দিষ্ট character এর বেশি কোন ওয়ার্ড সাপোর্ট করে না। এই attribute কোন ফিডব্যাক প্রদান করে না। যদি ইউজার কে আমরা alert করতে চাই তাহলে আমাদের javascript বাবকার করতে হবে
ইনপুট নিষেধাজ্ঞা অব্যর্থ হয় না। javascript এর মাধ্যমে অবৈধ ভাবে ইনপুট করার অনেক উপায় আছে। নিরাপত্তার জন্য নিষেধাজ্ঞার পাশাপাশি রিসিভার (সার্ভার) দ্বারা চেক করা আবশ্যক.
এইচটিএমএল ৫ এর attribute গুলো
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
এবং ফর্ম এর জন্য
- Autocomplete
- Novalidate
স্বয়ংকৃয়ভাবে সম্পূর্ণ বৈশিষ্ট্য (Autocomplete attribute)
কোন ইনপুট ফিল্ড আপনা থেকেই পরিপূর্ণ করবে কিনা এর জন্য autocomplete অন বা অফ ব্যবহার করা হয়। যদি তা অন করা থাকে তাহলে ব্রাউজার ইনপুট ফিল্ডের কোন ভ্যালু insert করার আগে আগেই অটোমেটিক পুরণ হয়ে যাবে যদি আগে এই ভ্যালুটি ইনপুট করা হয়ে থাকে। ফর্মের এর ক্ষেত্রে autocomplete অন রাখা সম্ভব নির্দিষ্ট কিছু ইনপুট ফিল্ডের এর জন্য তা অফ করে রাখা যাবে। autocomplete attribute ফর্মের এর ক্ষেত্রে কাজ করে এবং ইনপুট ফিল্ড এর ভিন্ন ভিন্ন ধরন যেমন text, search, url, tel, email, password, date picker, range, এবং color এই সব ক্ষেত্রে কাজ করে।
উদাহরণ
<form action="action_page.php" autocomplete="on"> First name:<input type="text" name="fname">
Last name: <input type="text" name="lname">
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit"> </form>
কিছু কিছু ব্রাউজার এর ক্ষেত্রে কাজের জন্য autocomplete ফাংশন চালু করা লাগতে পারে।
ফলাফল
Novalidate attribute
ফর্ম ডাটা সাবমিট করার পর এটাকে অবৈধ ঘোষণা করার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
ফলাফল
অটোফোকাস বৈশিষ্ট্য (Autofocus attribute)
কোন ইনপুট ফিল্ড পেজ লোড হওয়ার সাথে সাথে ওই ঘরে কার্সর আনার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
First name:<input type="text" name="fname" autofocus>
ফলাফল
এইখানে firstname এর ঘরে কার্সর দেখা যাবে।
ফর্ম attribute
একাধিক ফর্মের input ফিল্ড কে একটি কমন ফর্ম এর ID দিয়ে চিহ্নিত করার জন্য এই attribute ব্যবহার করা হয়
উদাহরণ
যদিও ফর্ম এর বাইরে একটি ইনপুট ফিল্ড ব্যবহার করা হচ্ছে কিন্তু তারপরও এটি ফর্মের একটি অংশ
<form action="action_page.php" id="form1"> First name: <input type="text" name="fname">
<input type="submit" value="Submit"> </form>
Last name: <input type="text" name="lname" form="form1">
ফলাফল
The "Last name" field below is outside the form element, but still part of the form.
Last name:
Formaction attribute
Form action attribute একটি ফর্ম এর ফাইল এর URL চিহ্ন করে যেখানে যেয়ে ইনপুট ডাটা সাবমিট হবে। এই attribute দুটি টাইপ এ ব্যবহার করা হয় type=”submit”, type=”image”
উদাহরণ
ভিন্ন ভিন্ন action এ দুইটি বাটন দ্বারা দেখানো হল
<form action="action_page.php">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
ফলাফল
Formenctype attribute
যখন সার্ভার এ ফর্ম ডাটা সাবমিট করা হবে তখন তা কিভাবে encode করা হবে এর জন্য আমরা এই attribute ব্যবহার করব পোস্ট মেথড এর ক্ষেত্রে । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরন
প্রথম সাবমিট বাটন ডিফল্ট encoded এবং দ্বিতীয় সাবমিট বাঁটন multipart/form-data হিসেবে encode করা হয়েছে
<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
ফলাফল
Formmethod attribute
ফর্ম ডাটা url এ পাঠানোর ক্ষেত্রে HTTP মেথড বোঝার জন্য এই attribute ব্যবহার করা হয় । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
দ্বিতীয় বাটন টি HTTP এই মেথড এর
<form action="action_page.php" method="get">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>
ফলাফল
Formnovalidate attribute
Input উপাদান কে সাবমিট করার পর তা অবৈধ ঘোষণা করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়। type=”submit” এই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
দুইটি সাবমিট বাটন একটি validate ছাড়া অন্যটি validate সহ
<form action="action_page.php">
E-mail: <input type="email" name="userid">
<input type="submit" value="Submit">
<input type="submit" formnovalidate value="Submit without validation">
</form>
ফলাফল
Formtarget attribute
ফর্ম সাবমিট করার পর কোথায় আমরা এর প্রতিক্রিয়া দেখতে চাই তা আমরা এই attribute এর মাধ্যমে করতে পারি। type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
ভিন্ন ভিন্ন টার্গেট এর জন্য দুইটি বাটন ব্যবহার করা হল
<form action="action_page.php">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
ফলাফল
উচ্চতা এবং প্রস্থ অ্যাট্রিবিউট Height and width attribute
ইনপুট ফিল্ডের আকার নির্ধারণ করার জন্য এই attribute ব্যবহার করা হয়। type=”image” ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।
উদাহরণ
Width এবং height সহ একটি ইমেজ যুক্ত বাটন দেখানো হল
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
ফলাফল
তালিকা বৈশিষ্ট্য (List attribute)
<datalist> উপাদান যাতে ইনপুট করার জন্য কিছু pre-defned অপশন থাকবে
উদাহরণ
Pre-defined ভ্যালু সহ একটি ইনপুট ফিল্ড
<input list="browsers">
<datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
ফলাফল
ন্যূনতম, সর্বোচ্চ অ্যাট্রিবিউট (Min, max attribute)
একটি ইনপুট ফিল্ড এর মিনিমাম এবং ম্যাক্সিমাম ডাটা ইনপুট করার ক্ষেত্রে এই attribute গুলো ব্যবহার করা হয় ভিন্ন ভিন্ন ধরনের ইনপুট ব্যবহার করা যায় number, range, date, datetime, datetime-local, month, time এবং week।
উদাহরন
মিনিমাম এবং ম্যাক্সিমাম ভ্যালু সহ একটি উদাহরণ
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
ফলাফল
একাধিক অ্যাট্রিবিউট (Multiple attribute)
ইনপুট ফিল্ডে একাধিক ডাটা সাবমিট করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়।দুই ধরনের ইনপুটে কাজ করা যায় ইমেইল, ফাইল।
উদাহরণ
এই ইনপুট ফিল্ড এ অনেকগুলো ইমেজ আপলোড করা যাবে
Select images: <input type="file" name="img" multiple>
ফলাফল
প্যাটার্ন অ্যাট্রিবিউট (Pattern attribute)
Regular expression এই ধরনের ডাটা ইনপুট করার ক্ষেত্রে আমরা এই attribute ব্যবহার করব। এতে ফরম্যাট দেওয়া থাকে সেই অনুপাতে ডাটা ইনপুট দিতে হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।
উদাহরণ
এই ইনপুট ফিল্ড এ ৩ টা লেটার ইনপুট করা যাবে যেখানে কোন নাম্বার বা special character থাকবে না
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
ফলাফল
স্থানধারক অ্যাট্রিবিউট (Placeholder attribute)
ইনপুট ফিল্ড এ কোন কিছু ইনপুট করার আগে হালকা ভাবে কোন লেখা ডিসপ্লে করার জন্য এই attribute ব্যবহার করা হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।
উদাহরণ
<input type="text" name="fname" placeholder="First name">
ফলাফল
আবশ্যক অ্যাট্রিবিউট (Required attribute)
কোন ইউজার যেন কোন নির্দিষ্ট ইনপুট ফিল্ড ফাকা না রেখে ফর্ম সাবমিট করে সেই জন্য আমরা এই attribute ব্যবহার করব। এই টাইপ গুলো হল text, search, url, tel, email, password, date pickers, numbers, checkbox, radio, file.।
উদাহরণ
Username: <input type="text" name="usrname" required>
ফলাফল
ধাপ অ্যাট্রিবিউট (Step attribute)
ইনপুট ফিল্ড এ লিগাল নাম্বার ইনপুট দেওয়ার ক্ষেত্রে এই attribute টি ব্যবহার করা হয়। যেমন যদি স্টেপ ৩ হয় তাহলে লিগাল নাম্বার গুলো হবে -৩,০,৩,৬
এই attribute যেই ধরনের ইনপুট টাইপ গুলোর ক্ষেত্রে কাজ করতে পারে এইগুলো হল number, range, date, datetime, datetime-local, month, time এবং week.
উদাহরণ
<input type="number" name="points" step="3">
ফলাফল
HTML 5 এর পরিচিতি (HTML5 Introduction)
HTML 5 এর পরিচিতি
HTML 4 এর উন্নত ভার্সনই হল HTML 5।HTML 5 এ নতুন কিছু ট্যাগ, এলিমেন্ট, এট্রিবিউট যোগ করা হয়েছে এবং পুরনো কিছু বাদ দেয়া হয়েছে।
HTML 5 এর উদাহরনঃ
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
HTML 5 এ নতুন যা পরিবর্তন আনা হয়েছে
HTML 5 এ DOCTYPE ঘোষণা খুবই সহজ। যেমনঃ-
<!DOCTYPE html>
HTML 5 এ Character Encoding ঘোষণা করাও খুবই সহজ।যেমনঃ-
<meta charset="UTF-8">
HTML 5 এর নতুন কিছু Elements
HTML 5 এ খুব বেশী ব্যাবহৃত নতুন এলিমেন্টগুলো হচ্ছেঃ
Semantic Elements যেমন- <header>, <footer>, <article>, and <section>.
Form control attributes যেমন- number, date, time, calendar, range and required.
Graphic Elements যেমন- <svg> and <canvas>.
Multimedia Elements: যেমন- <audio> and <video>.
HTML5 API's (Application Programming Interfaces)
HTML 5 এর প্রধান নতুন API’s হচ্ছেঃ
- HTML Geolocation
- HTML Drag and Drop
- HTML Local Storage
- HTML Application Cache
- HTML Web Workers
- HTML SSE
HTML 5 থেকে যেসকল এলিমেন্ট বাদ দেয়া হয়েছে
| এলিমেন্ট | HTML 4 এলিমেন্টের পরিবর্তে লেখা হয় |
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | CSS |
| <big> | CSS |
| <center> | CSS |
| <dir> | <ul> |
| <font> | CSS |
| <frame> | |
| <frameset> | |
| <noframes> | |
| <strike> | CSS |
| <tt> | CSS |