এই চ্যাপ্টারে সব HTML ফর্ম এলিমেন্ট বর্ণনা করা হয়েছে।
সবচেয়ে গুরুত্বপূর্ণ ফর্ম এলিমেন্ট হলো <input> এলিমেন্ট।
<input> এলিমেন্ট type অ্যাট্রিবিউটের উপর নির্ভর করে বিভিন্নভাবে প্রদর্শিত হতে পারে।
<input name="firstname" type="text">type অ্যাট্রিবিউট বাদ দেওয়া হলে, ইনপুট ফিল্ড ডিফল্ট টাইপ পায়: "text"।
<select> এলিমেন্ট একটি ড্রপ-ডাউন লিস্ট নির্ধারণ করে:
<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> এলিমেন্ট এমন একটি অপশন নির্ধারণ করে, যা সিলেক্ট করা যায়।
ডিফল্টভাবে, ড্রপ-ডাউন লিস্টের প্রথম আইটেমটি সিলেক্ট করা থাকে।
একটি প্রি-সিলেক্টেড অপশন নির্ধারণ করতে, অপশনে selected অ্যাট্রিবিউট যোগ করুন:
<option value="fiat" selected>Fiat</option>ব্রাউজারে এটি এভাবে দেখাবে:
দৃশ্যমান মানের সংখ্যা নির্ধারণ করতে size অ্যাট্রিবিউট ব্যবহার করুন:
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>ব্রাউজারে এটি এভাবে দেখাবে:
ব্যবহারকারীকে একাধিক মান সিলেক্ট করার অনুমতি দিতে multiple অ্যাট্রিবিউট ব্যবহার করুন:
<textarea> এলিমেন্ট একটি মাল্টি-লাইন ইনপুট ফিল্ড (একটি টেক্সট এরিয়া) নির্ধারণ করে:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>rows অ্যাট্রিবিউট একটি টেক্সট এরিয়ায় দৃশ্যমান লাইনের সংখ্যা নির্ধারণ করে।
cols অ্যাট্রিবিউট একটি টেক্সট এরিয়ার দৃশ্যমান প্রস্থ নির্ধারণ করে।
উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
CSS ব্যবহার করেও আপনি টেক্সট এরিয়ার আকার নির্ধারণ করতে পারেন:
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea><button> এলিমেন্ট একটি ক্লিকযোগ্য বাটন নির্ধারণ করে:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
মনে রাখবেন: button এলিমেন্টের জন্য সবসময় type অ্যাট্রিবিউট উল্লেখ করুন। বিভিন্ন ব্রাউজার button এলিমেন্টের জন্য ভিন্ন ভিন্ন ডিফল্ট টাইপ ব্যবহার করতে পারে।
HTML5-এ নিচের ফর্ম এলিমেন্টগুলো যোগ করা হয়েছে:
<datalist><output>মনে রাখবেন: ব্রাউজার অচেনা এলিমেন্ট প্রদর্শন করে না। পুরনো ব্রাউজারে অসমর্থিত নতুন এলিমেন্ট আপনার ওয়েব পেজ "নষ্ট" করবে না।
<datalist> এলিমেন্ট একটি <input> এলিমেন্টের জন্য পূর্বনির্ধারিত অপশনের একটি তালিকা নির্ধারণ করে।
ডেটা ইনপুট করার সময় ব্যবহারকারীরা পূর্বনির্ধারিত অপশনগুলোর একটি ড্রপ-ডাউন লিস্ট দেখতে পাবেন।
<input> এলিমেন্টের list অ্যাট্রিবিউটকে অবশ্যই <datalist> এলিমেন্টের id অ্যাট্রিবিউট নির্দেশ করতে হবে।
<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>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে:
<output> এলিমেন্ট একটি হিসাবের ফলাফল প্রকাশ করে (যেমন একটি স্ক্রিপ্ট দ্বারা সম্পাদিত হিসাব)।
<form action="/action_page.php"
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>উপরের HTML কোডটি ব্রাউজারে এভাবে দেখাবে: