HSC ICT Chaper 4 Part-7

Introduction to Web Design and HTML

In this HSC ICT Chapter 4 Part-7 : Introduction to Web Design And Html we will learn about What is Html Form,Tags of form, How to Creat a form .


53. HTML নকশা ফর্ম (HTML design FORM) ফর্ম (Forms)?

উঃ HTML ফর্মসমূহ বিভিন্ন ধরনের ইউজার ইনপুট সিলেক্ট কার জন্য ব্যবহৃত হয়ে থাকে। ফর্ম হলাে একটি এলাকা যা কোনাে কর্মের উপাদান বা এলিমেন্টগুলােকে ধারণ করতে পারে। ফর্ম এলিমেন্ট হলাে এমন ধরনের এলিমেন্ট যা ব্যবহারকারীকে কোনাে ফর্মের ভেতর তথ্য (যেমন: টেক্সট ফিল্ড, টেক্সট এরিয়া ফিল্ড, ড্রপ-ডাউন মেনু, রেডিও বাটন, চেক বক্স ইত্যাদি) প্রবেশ করানাের সুযোগ দেয়। একটি ফর্মকে <form> ট্যাগ দ্বারা নির্ধারণ করা হয়ে থাকে। যেমন:
<form> input elements </form>


<form>... </form> সমন্ত কন্ট্রোল গুলোতেই ধারণ ত পারে। শুধু পারে না আর একটি কর্মকে ধারণ করতে অর্থাৎ কর্মের ভিতর ফর্ম তৈরি করা যায় না।<form> ট্যাগের অন্তরেই Action এবং Method নামে দুটি অ্যাট্রিবিউট ব্যবহার করে নির্দেশ দিতে হয়। কর্ম এর ফিল্ড তৈরির জন্য তিন ধরনের ট্যাগ ব্যবহৃত হয়। যথা:

  • <Text Area>
  • <Select>
  • <Input>

<Text Area> ট্যাগ: এটি একটি কনটেইনার ট্যাগ। এই ট্যাগটি কর্মে এমন একটি ফিড তৈরি করে , যেখানে ব্যবহারকারীর তথ্যপ্রদানের জন্য একাধিক টেক্সটলাইন টাইপ করতে পারবে। ভিন্ট মান অনুযায়ী €Text Area> | দ্বারা তৈরিকৃত কর্ম ৪টি ক্লে এর পরিমান দীর্ঘ ও 4০ টি ক্যারেক্টার পর্যন্ত প্রশস্ত হয়। তবে এই ট্যাগে row এবং cols অ্যাট্রিবিউট ব্যবহার করে যেকোনাে মাপেই ফর্ম তৈরি করা যায়। যেটাকে নামকরণ করার জন্য এই ট্যাগের মধ্যে Name 'অ্যাট্রিবিউট ব্যবহৃত হয়।
<Select> ট্যাগ: এটি একটি কনটেইনার ট্যাগ। এই ট্যাগ ব্যবহার করে Popup Menu অথবা Scrolling List উতই তৈরি করা যায়। এখানেও ছেটাকে নামকরণ করার জন্য Name অ্যাট্রিবিউট ব্যবহূত হয়। এবাও এখানে size, Method, multiple, option, value, selected অ্যাট্রিবিউট ব্যবহূত হতে পারে।
<Input> ট্যাগঃ Input ট্যাগটি Text Area এবং Select ট্যাগের মতই তথ্য একত্রিকরণের জন্য ব্যবহূত হয়। এটি একটি এম্পটি ট্যাগ। তথ্য আহরণ করার জন্য Input ট্যাগ অন্যান্য সব Option গুলােকেই ধারণ করে। Input ট্যাগের সাথে 'Type ও Name এই দুটি অ্যাট্রিবিউট অবশ্যই থাকতে হবে এবং অন্যান্য আরও ঐচ্ছিক অ্যাবিত Size, Maxlength, Value, Checked, Text ব্যবহার করা যেতে পারে। Type অ্যাট্রিবিউটের তেল হতে পারেtext, Password , Radio, Check, Submit, Reset ইত্যাদি। ফলে Input ট্যাগ ব্যবহার করে text field, Password field, Radio button, Check mark button, Submit button, Reset button
  • Text Fields: কোনাে ব্যবহারকারী একটি ফর্মে অক্ষর, সংখ্যা ইত্যাদি style করবে, সে ক্ষেত্রে আপনাকে টেয়ট কিন্তু ব্যবহার করতে হবে। বমটি নিলে ব্রাউরে সৃশ্যমান হয় না। অধিকাংশ ব্রাউজারই হাইতি ২০ ক্যারেক্টার পর্যন্ত প্রস্থের হয়ে থাকে।
  • রেডিও বাটন (Radio Buttons): ব্যবহারকারী সীমিত কিছু পক্ষ থেকে একটিকে বেছে নেবে সেক্ষেত্রে আপনাকে রেতিও বাটনগুলাে ব্যবহার করতে হবে।
  • চেকবক্স (Checkboxes): আপনি যখন চান user সীমিত কিছু খেতে এক বা একাধিক বিষয়কে পছন্দ করে তাহলে আপনাকে চেকবক্স ব্যবহার শুরতে হবে।
  • ফর্ম এর অ্যাকশন অ্যাট্রিবিউট ও সাবমিট বাটন (The Forms Action Attribute and the submit Button): ব্যবহারকারী যখন কোনাে "Submit" বাটনে ক্লিক করে তখন কর্মের শুনশটি সার্ভারে প্রেরিত হয়। কর্মের অ্যাকশন অ্যাট্রিবিউটটি কনটেন্টটিকে পাঠানাের ক্ষেত্রে ফাইলের নামটি কি হবে সেটি নির্ধারণ করে।

Form Example

54. Creat An Admission Page?

<!DOCTYPE html>
<html> 
  <head>
  <title> Admission Page </title>
  </head>

  <body>
    <h2>
    <i>
    <center>tutorialforbeginner<br>
    <small>Free learing site<br>       
    <a href="www.tutorialforbeginner.com">www.tutorialforbeginner.com</a>     
    </small>
    </center>  
    </i>
    </h2>
    <fieldset> 
    <h3>Admission Form</h3> 
    <form>  
    First Name: <input type="text">    <br><br>
    Last Name:  <input type="text">     <br><br>
    Class : <select>     
            <option>XI</option>
            <option>XII</option>
            </select><br><br>
    ROLL: <input type="number">    <br><br>
    Gender: <input type="radio" name="gender" >Male 
            <input type="radio" name="gender" >Female <br><br>

    Category:  <input type="checkbox">ICT   
               <input type="checkbox">Math <br><br>
               
    Upload Your Photo: <input type="file" name="img">    <br><br>
    User Name:   <input type="text">    <br><br> 
    Password :   <input type="password" value="password">    <br><br> 
                  <input type="Submit" value="Save">
    </form>  
</fieldset> 
    
</body>
</html>

Output:

tutorialforbeginner
Free learing site
www.tutorialforbeginner.com

Admission Form

First Name:

Last Name:

Class :

ROLL:

Gender: Male Female

Category: ICT Math

Upload Your Photo:

User Name:

Password :


Best way of learing

Self learing is the best learing in the world. Discover yourself first then will get what you are And what you want to do .It will push you for self learing.

Why you need to learn coding?

Coding will play a vital role in one's life . It will help to open a new window of thinking . You can think better way than past . It helps to organise all the thing in better way .