All HTML form elements to create HTML form easily

আমরা সবাই Facebook, gMail ব্যবহার করেছি তাই না? হ্য্য এই Facebook, gMail ব্যবহার করতে হলে আমাদেরকে প্রথমে Registration তারপর Login করতে হয়। এখন Registration বা Login করার সময় আমরা বিভিন্ন Input Field দেখতে পাই, তাই না? এই Input Field গুলোতেই আমরা বিভিন্ন তথ্য দিয়ে থাকি। যেমন- আমাদের নাম, ঠিকানা, পাসওয়ার্ড, বয়স, জন্ম তারিখ ইত্যাদি। আজকে আমরা শিখব যে কিভাবে বিভিন্ন রকম Input Field তৈরী করতে হয় ।

HTML Input Field তৈরী করতে হলে প্রথমে HTML Form elements এর সাহায্য নিতে হবে। এই HTML Form elements এর ভিতরেই বিভিন্ন রকম HTML Input Element দিতে হয় যেমন – text fields, checkboxes, radio buttons, submit buttons ইত্যাদি। এই HTML Input Element গুলোর ভিতরে ১ টি HTML Attribute রয়েছে যার নাম হলো type। এই type Attribute এর অনকে value রয়েছে যার মাধ্যমে আমরা বিভিন্ন রকম HTML Input Field তৈরী করতে পারি।

HTML Form Elements

HTML <form> element এর বিভিন্ন form elements রয়েছে আর তা হলো –

<input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option, <optgroup>

<Input> Element এর কাজ

সবচেয়ে বেশি যে Form Input Elements টি ব্যবহার হয় তা হলো <input> Element । এই Element এর বিভিন্ন রকম type Attribute এর value উপর ভিত্তি করে বিভ্নি Input Field দেখানো যায়। যেমন –

<input type=”text” name=”fname”>

এখানে type Attribute এর value – text দেওয়ার ফলে এই Input Field এ আমরা শুধুমাত্র alphanumeric characters দিতে পারব। যেমন – I have been working as a WordPress developer for 12 Years.

<select> Element এর কাজ

Drop down list তৈরী করার জন্য আমরা এই <select> Element টি ব্যবহার করি এবং এই drop down list এর ভ্যালুগুলো দেখার জন্য <option> Element ব্যবহার করতে হয়। যেমন –

<select name="country">
    <option>Bangladesh</option>
    <option>America</option>
    <option>India</option>
</select>

সাধারন এই drop down list এ প্রথম option টি দেখা যাবে কিন্তু আমরা যদি চাই যে America দেখা যাবে তাহলে <option> Element এর ভিতর selected নামে ১ টি attribute ব্যবহার করতে হবে যেমন –

<select name="country">
    <option>Bangladesh</option>
    <option selected>America</option>
    <option>India</option>
</select>

যদি <option> Element এর value নিতে হয় তাহলে লিখতে হবে value নামের ১টি attribute । যেমন –

<select name="country">
    <option value="bangladesh">Bangladesh</option>
    <option value="america" selected>America</option>
    <option value="india">India</option>
</select>

আমরা যদি একসাথে ২টি বা অনেকগুলো option নিতে চাই তাহলে multiple নামের attribute টি <select> Element এ দিতে হবে যেমন –

<select name="country" multiple>
    <option value="bangladesh">Bangladesh</option>
    <option value="america" selected>America</option>
    <option value="india">India</option>
</select>

<textarea> Element এর কাজ

<textarea> Element ব্যবহার করা হয় বড় কোন লেখা লিখার জন্য যেমন – আমাদের জীবন বৃত্তান্ত বা ঠিকানা। মেযন-

<textarea name="address" rows="10" cols="30"></textarea>

এখানে rows এবং cols নামে ২টি attribute ব্যবহার করা হয়েছে যার কাজ হলো যে এই <textarea> Element টির কতগুলো rows এবং columns হবে।

The <button> Element এর কাজ

clickable button তৈরী করার জন্য আমরা এই <button> element ব্যবহার করি। যেমন-

<button type="button">Send Request</button>

মনে রাখতে হবে যে, অবশ্যই এই <button> Element এ type=”button” নামের attribute  দিতে হবে তা না হলো clickable button হবে না।

<fieldset> এবং <legend> এর কাজ

Form এর মধ্যে কিছু Input Field গুলোকে group আকারে দেখানোর জন্য <fieldset> Element টি ব্যবহার করা হয় এবং <fieldset> element এর caption এর জন্য এই <legend> Element টি ব্যবহার করা হয়। মেযন-

<fieldset>
    <legend>Your Information</legend>
    <label for="fname">Your First Name</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Your Last Name</label><br>
    <input type="text" id="lname" name="lname><br><br>
    <input type="submit" value="Submit">
</fieldset>

এখানে আমরা Your First Name এবং Your Last Name এই ২ টি Input Field গুলো group আকারে দেখিয়েছি যাদের caption হলো Your Information।

<datalist> Element এর কাজ

<datalist> Element টি অনেকটা <select> Element এর মত যেখানে আমরা আগে থেকেই কিছু drop-down list দেখতে পাবো এবং এই Field এ আমরা type ও করতে পারব যার ফলে আগে থেকেই যে data গুলো দিয়েছি তা দেখতে পারব। যেমন –

<input list="countries">
<datalist id="countries">
    <option value="Bangladesh">
    <option value="America">
    <option value="India">
    <option value="Srilanka">
    <option value="Canada">
</datalist>

তবে অবশ্যই আমাদেরকে মনে রাখতে হবে যে, এখানে input element এর list attribute ভ্যালুর সাথে datalist element এর id attribute ভ্যালু একই হতে হবে।

<output> Element এর কাজ

কোন calculation এর ফলাফল দেখার জন্য আমরা এই টি ব্যবহার করে থাকি। মেযন –

<form action="/action_page.php"oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<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>