WEB DESIGN - HTML FORM PART 05

 

HTML এ Form কি?

সাইটের ব্যবহারকারীদের থেকে সরাসরি তথ্য নেয়ার যে মাধ্যম সেটাকে বলা হয় form। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ব্যবহারকারীর তথ্য সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়ে থাকে।

Form ট্যাগ দিয়ে user/visitor দের information collect করার পর আপনাকে Database এ backend script অর্থাৎ ASP, PHP or python ইত্যাদি দিয়ে process করে সংরক্ষন করতে পারবেন।

HTML এ <form>—</form> এই ট্যাগ এর মাধ্যমে code করতে হয়। Information process করতে বিভিন্ন Tags & Attributes ব্যবহার করতে হয়।

Form Attributes

form তৈরী করার জন্য ব্যবহৃত <form> tag এ বহুল বেবহত Attributes গুলো হল-

1. Action এই attribute এর মাধ্যমে backend script এ data pass করে।
2. Target এই attribute এর কাজ হল database এ pass হওয়া result টি new tab (window), frame অথবা current window তে show সেটাকে specify করা। এর value গুলো হল _self, _blank, _top এবং _parent
3. Enctype এই attribute টি data কে কিভাবেserver এ submit/পাঠানোর পূর্বে encode করে সেটাই নির্ধারণ করে। 

Form Controls

Visitor দের Data collect করার জন্য কিছু form control আছে, যেখানে input type পরিবর্তন এর মাধ্যমে কি কি ধরনের data কিভাবে collect করবেন সেটা নির্ধারণ করতে পারবেন। চলুন দেখা যাক-

1. Text Input Controls
2. Checkboxes Controls
3. Radio Box Controls
4. Select Box Controls
5. File Select boxes
6. Hidden Controls
7. Clickable Buttons
8. Submit and Reset Button

Text input control

Text Input Controls সাধারণত তিন ধরনের হয়ে থাকে যা আপনি HTML FORM এ ব্যাবহার করতে পারবেন।

1. Single-line text input controls
2. Password input controls
3. Multiple-Line Text Input Controls

Single-line text input controls

এই Control টি user থেকে শুধু মাত্র এক লাইনে input নেওয়ার জন্য ব্যবহৃত হয়। যেমন, সার্চ বাক্স, নাম ইত্যাদি। আর এটি তৈরী করতে হয় HTML এর <input> tag ব্যবহার করার মাধ্যমে।

Example:

<form >

         First name: <input type = "text" name = "first_name" />

         

         Last name: <input type = "text" name = "last_name" />

      </form>

Single-line text input controls এর attributes কি কি?

HTML Single line input tag

<form >

          Input Type color:  <input type="color" name="favcolor"><br>

          Input Type Date:  <input type="date" name="bday"><br>

          Input Type (date and time):  <input type="datetime-local" name="bdaytime"><br>

          Input Type E-mail:   <input type="email" name="email"><br>

          Input Type Month: <input type="month" name="bdaymonth"><br>

          Input Type Number: <input type="number" name="quantity" min="1" max="5"><br>

          Input Type Range: <input type="range" name="points" min="0" max="10"><br>

          Input Type Search: <input type="search" name="googlesearch"><br>

          Input Type Telephone: <input type="tel" name="usrtel"><br>

          Input Type Time:  <input type="time" name="usr_time"><br>

          Input Type URL: <input type="url" name="homepage"><br>

          Input Type Week:  <input type="week" name="week_year">

      </form>

Password input controls

এইটাও একটা single-line text input , এটা User দের Password collect করার জন্য ব্যবহৃত হয়, এই input control টি ব্যবহারের ফলে user দের input করা character গুলা mask হয়ে যায় অর্থাৎ character/অক্ষর গুলি dot এর মত আসে যা আমরা সাধারণত password বক্স এ দেখতে পাই। এটি <input type=”password”>দিয়ে ডিফাইন করা হয়।

Example:

<form >

         Password: <input type = "password" name = "password" />

</form>

Multiple-Line Text Input Controls

একাধিক লাইনের input প্রধানের জন্য এই input method টি ব্যবহৃত হয়। এটি <textarea></textarea>দিয়ে define করা হয়। চলুন একটা উদাহরণ দিয়ে দেখা যাক :

<form>

         Description :

         <textarea rows = "5" cols = "50" name = "description">

            Enter description here...

         </textarea>

 </form>

Multiple-Line Text Input Controls এর attributes কি কি?