এইচটিএমএল ফর্ম এলিমেন্ট - HTML Form Element



টিউটোরিয়ালের এই অংশে সকল এইচটিএমএল ফর্ম এলিমেন্ট গুলোর বর্ণনা দেওয়া হয়েছে।


ফর্ম <input> এলিমেন্ট

ফর্ম এলিমেন্টের মধ্যে সবচেয়ে গুরুত্বপূর্ণ এলিমেন্ট হচ্ছে <input> এলিমেন্ট। type এট্রিবিউটের উপর নির্ভর করে <input> এলিমেন্ট পরিবর্তিত হতে পারে।

উদাহরণ

<input name="firstname" type="text">


নোট - যদি type এট্রিবিউট বাদ দেওয়া হয় তবে, স্বয়ংক্রিয়ভাবে text নির্ধারিত হয়।


ফর্ম <select> এলিমেন্ট

আপনি <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> এলিমেন্টটি যেকোন একটি এলিমেন্টকে সিলেক্ট করে রাখার জন্য ব্যবহার করা হয়। স্বয়ংক্রিয়ভাবে, ড্রপ ডাউন তালিকাতে প্রথম আইটেমটি নির্বাচিত হয়ে থাকে।

উদাহরণ

<option value="fiat" selected>Fiat


দৃশ্যমান মান

কোন আইটেমকে আগে থেকে নিরধারন বা select করে দৃশ্যমান করে রাখতে চাইলে 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 এট্রিবিউট ব্যবহার করতে হবে।

উদাহরণ

<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>




<textarea> এলিমেন্ট

ইউজার থেকে বড় কোন মন্তব্য বা কমেন্ট পাবার জন্য টেক্সট এরিয়া তৈরি করা হয়। টেক্সট এরিয়ার ভেতরে কোন কিছু লিখলে তা ওয়েব পেজের টেক্সট এরিয়াতে দেখা যায়। টেক্সট এরিয়ার ওপেনিং এবং ক্লোজিং ট্যাগ রয়েছে।

rows এবং cols এট্রিবিউট ব্যবহার করে টেক্সট এরিয়ার সাইজ নির্ধারণ করা হয়। rows এবং cols এর মান বা value হিসেবে গানিতিক সংখ্যা বা newmerical value দেয়া হয়। এই এট্রিবিউট দুটি লেখার নিয়ম হল -
rows=”5” এবং cols=”8”
নীচে একটি উদাহরন দেখুন -

উদাহরণ দেখুন

<form>
First name: <input type="text" name="firstname" /> <br />
Last name: <input type="text" name="lastname" />
</form>


সিএসএস ব্যবহার করেও টেক্সট এরিয়া এর দৈর্ঘ্য ও প্রস্থ অর্থাৎ আকার নিরধার করা যায়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>




<button> এলিমেন্ট

<button> এলিমেন্ট ব্যবহার করে একটি ক্লিকযোগ্য বাটন তইরি করা যায়। নিচে এর একটি উদাহরন দেখুন।

উদাহরণ

<button type="button" onclick="alert('Hello World!')">Click Me!</button>


উপরের উদাহরণে একটি ইভেন্ট ব্যবহারের মাধ্যমে এলার্ট দেখানো হয়েছে। ইভেন্ট সম্পর্কে আরো জানতে আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল দেখুন।


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

নিম্নলিখিত ফর্ম এলিমেন্টগুলো এইচটিএমএল ৫ নতুন করে যুক্ত হয়েছে -

<datalist> - ইনপুট ফিল্ডে তথ্য ইনপুট করা শুরু করলে পূর্ব নির্ধারিত অপশন ড্রপ-ডাউন লিস্ট আকারে আসে।
<output> - ইনপুট এলিমেন্টের ভ্যালু আউটপুট করতে ব্যবহার করা হয়।

নোট - ব্রাউজারগুলো অজানা এলিমেন্ট প্রদর্শন করে না। তবে নতুন এলিমেন্ট যা পুরোনো ব্রাউজারগুলিতে সমর্থিত নয় ওয়েব পেজের এলিমেন্ট নষ্ট করবে না।


<datalist> এলিমেন্ট

<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>


নোট - সাফারি অথবা IE9 এর মধ্যে ডাটালিস্ট ট্যাগ সার্পোট করে না।


<output> এলিমেন্ট

কোন গাণিতিক গণনার ফলাফল <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>




এইচটিএমএল ফর্ম ট্যাগ

ট্যাগ বর্ণনা
<form> ব্যবহারকারীর জন্য একটি ইনপুট ফর্ম ডিফাইন করে
<input> ফর্মের মধ্যে তথ্য নেওয়ার জন্য ইনপুট বক্স তৈরি করে
<textarea> একাধিক লাইনের তথ্য নেওয়ার একটি বক্স বা টেক্সটএরিয়া তৈরি করা হয়
<label> <input> এলিমেন্টের জন্য একটি শিরোনাম ডিফাইন করা হয়
<fieldset> Groups related elements in a form
<legend> ফর্ম এলিমেন্টকে একটি শ্রেনীতে বিভক্ত করে
<select> একটি ড্রপ-ডাউন লিস্ট ( drop-down list) ডিফাইন করে।
<optgroup> এর মাধ্যমে একটি ড্রপ-ডাউন লিস্টকে বিভিন্ন শ্রেনীতে বিভক্ত করা হয়।
<option> ড্রপ-ডাউন লিস্টের একটি অপশন ডিফাইন করে
<button> একটি বাটন ডিফাইন করে।
<datalist> একটি ইনপুটের জন্য পূর্ব নির্ধারিত অপশনের লিস্ট তৈরি করে
<output> কোন গাণিতিক ফলাফল প্রদর্শন করা হয়







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.