Tag Archives: Input

এইচটিএমএল HTML

এইচটিএমএল ইনপুট বৈশিষ্ট্যাবলী (HTML Input Attributes)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শরিফুল ইসলাম
Job category-Php Coder

 

ভ্যালু attribute

ফর্ম এর শুরুতে ইনপুট ফিল্ড এর জন্য একটি প্রাথমিক ভ্যালু সেট করার জন্য value attribute ব্যবহার করা হয়

উদাহরণ

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

 

ফলাফল

First name:
Last name:

 

 

কেবল পঠনযোগ্য অ্যাট্রিবিউট (Readonly attribute)

ইনপুট ফিল্ডের ভ্যালু শুধু পরতে পারবে কিন্তু কোন প্রকার পরিবর্তন করতে পারবে না এই readonly attribute দ্বারা

উদাহরণ

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

এই attribute এর জন্য কোন মান লাগবে না শুধু লিখতে হবে readonly=”readonly”

 

ফলাফল

First name:
Last name:

 

নিষ্ক্রিয়করণ অ্যাট্রিবিউট (Disabled attribute)

ইনপুট ফিল্ডের কোন ডাটা এডিট করা যাবে না,বাবহার করা যাবে না, ক্লিক করা যাবে না এবং সাবমিট করা যাবে না এই রকম disable করে রাখার জন্য এই disable attribute ব্যবহার করা হয়

উদাহরণ

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

এই attribute এর কোন মানের দরকার পরে না (disabled=”disabled”)

 

ফলাফল

First name:
Last name:

 

আকার অ্যাট্রিবিউট (Size attribute)

ইনপুট ফিল্ডের এর character এর আকার size attribute দ্বারা করা হয়

উদাহরণ

 <form action="">
 First name:<br>
 <input type="text" name="firstname" value="John" size="40">
 <br>
 Last name:<br>
 <input type="text" name="lastname">
 </form>

 

ফলাফল

First name:
Last name:

 

সর্বচ্চোআকার অ্যাট্রিবিউট (Maxlength attribute)

ম্যাক্সিমাম কতটি ক্যারেক্টার হতে পারে এর জন্য আমরা maxlength attribute ব্যবহার করব।

উদাহরণ

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

 

ফলাফল

First name:
Last name:

Maxlength দ্বারা নির্দিষ্ট character এর বেশি কোন ওয়ার্ড সাপোর্ট করে না। এই attribute কোন ফিডব্যাক প্রদান করে না। যদি ইউজার কে আমরা alert করতে চাই তাহলে আমাদের javascript বাবকার করতে হবে

ইনপুট নিষেধাজ্ঞা অব্যর্থ হয় না। javascript এর মাধ্যমে অবৈধ ভাবে ইনপুট করার অনেক উপায় আছে। নিরাপত্তার জন্য নিষেধাজ্ঞার পাশাপাশি রিসিভার (সার্ভার) দ্বারা চেক করা আবশ্যক.

 

এইচটিএমএল ৫ এর attribute গুলো

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

এবং ফর্ম এর জন্য

  • Autocomplete
  • Novalidate

 

স্বয়ংকৃয়ভাবে সম্পূর্ণ বৈশিষ্ট্য (Autocomplete attribute)

কোন ইনপুট ফিল্ড আপনা থেকেই পরিপূর্ণ করবে কিনা এর জন্য autocomplete অন বা অফ ব্যবহার করা হয়। যদি তা অন করা থাকে তাহলে ব্রাউজার ইনপুট ফিল্ডের কোন ভ্যালু insert করার আগে আগেই অটোমেটিক পুরণ হয়ে যাবে যদি আগে এই ভ্যালুটি ইনপুট করা হয়ে থাকে। ফর্মের এর ক্ষেত্রে autocomplete অন রাখা সম্ভব নির্দিষ্ট কিছু ইনপুট ফিল্ডের এর জন্য তা অফ করে রাখা যাবে। autocomplete attribute ফর্মের এর ক্ষেত্রে কাজ করে এবং ইনপুট ফিল্ড এর ভিন্ন ভিন্ন ধরন যেমন text, search, url, tel, email, password, date picker, range, এবং color এই সব ক্ষেত্রে কাজ করে।

উদাহরণ

<form action="action_page.php" autocomplete="on">
 First name:<input type="text" name="fname">
Last name: <input type="text" name="lname">
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit">
 </form>

কিছু কিছু ব্রাউজার এর ক্ষেত্রে কাজের জন্য autocomplete ফাংশন চালু করা লাগতে পারে।

 

ফলাফল

First name:Last name: E-mail:

 

Novalidate attribute

ফর্ম ডাটা সাবমিট করার পর এটাকে অবৈধ ঘোষণা করার জন্য এই attribute ব্যবহার করা হয়

উদাহরণ

<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

 

ফলাফল

E-mail:

 

অটোফোকাস বৈশিষ্ট্য (Autofocus attribute)

কোন ইনপুট ফিল্ড পেজ লোড হওয়ার সাথে সাথে ওই ঘরে কার্সর আনার জন্য এই attribute ব্যবহার করা হয়

উদাহরণ

First name:<input type="text" name="fname" autofocus>

 

ফলাফল

First name:Last name:

এইখানে firstname এর ঘরে কার্সর দেখা যাবে।

 

ফর্ম attribute

একাধিক ফর্মের input ফিল্ড কে একটি কমন ফর্ম এর ID দিয়ে চিহ্নিত করার জন্য এই attribute ব্যবহার করা হয়

উদাহরণ

যদিও ফর্ম এর বাইরে একটি ইনপুট ফিল্ড ব্যবহার করা হচ্ছে কিন্তু তারপরও এটি ফর্মের একটি অংশ

<form action="action_page.php" id="form1">
 First name: <input type="text" name="fname">
<input type="submit" value="Submit">
 </form>
Last name: <input type="text" name="lname" form="form1">

 

ফলাফল

First name:

The "Last name" field below is outside the form element, but still part of the form.

Last name:

 

 

Formaction attribute

Form action attribute একটি ফর্ম এর ফাইল এর URL চিহ্ন করে যেখানে যেয়ে ইনপুট ডাটা সাবমিট হবে। এই attribute দুটি টাইপ এ ব্যবহার করা হয় type=”submit”, type=”image”

উদাহরণ

ভিন্ন ভিন্ন action এ দুইটি বাটন দ্বারা দেখানো হল

<form action="action_page.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="Submit">

<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>

 

ফলাফল

First name: Last name:

 

Formenctype attribute

যখন সার্ভার এ ফর্ম ডাটা সাবমিট করা হবে তখন তা কিভাবে encode করা হবে এর জন্য আমরা এই attribute ব্যবহার করব পোস্ট মেথড এর ক্ষেত্রে । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরন

প্রথম সাবমিট বাটন ডিফল্ট encoded এবং দ্বিতীয় সাবমিট বাঁটন multipart/form-data হিসেবে encode করা হয়েছে

<form action="demo_post_enctype.asp" method="post">
First name: <input type="text" name="fname">

<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

 

ফলাফল

First name:

 

Formmethod attribute

ফর্ম ডাটা url এ পাঠানোর ক্ষেত্রে HTTP মেথড বোঝার জন্য এই attribute ব্যবহার করা হয় । type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

দ্বিতীয় বাটন টি HTTP এই মেথড এর

<form action="action_page.php" method="get">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="demo_post.asp"
value="Submit using POST">
</form>

 

ফলাফল

First name: Last name:

 

Formnovalidate attribute

Input উপাদান কে সাবমিট করার পর তা অবৈধ ঘোষণা করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়। type=”submit” এই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

দুইটি সাবমিট বাটন একটি validate ছাড়া অন্যটি validate সহ

<form action="action_page.php">
E-mail: <input type="email" name="userid">

<input type="submit" value="Submit">

<input type="submit" formnovalidate value="Submit without validation">
</form>

 

ফলাফল

E-mail:

 

Formtarget attribute

ফর্ম সাবমিট করার পর কোথায় আমরা এর প্রতিক্রিয়া দেখতে চাই তা আমরা এই attribute এর মাধ্যমে করতে পারি। type=”submit” & type=”image” এই দুই ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

ভিন্ন ভিন্ন টার্গেট এর জন্য দুইটি বাটন ব্যবহার করা হল

<form action="action_page.php">
First name: <input type="text" name="fname">

Last name: <input type="text" name="lname">

<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>

 

ফলাফল

First name: Last name:

 

উচ্চতা এবং প্রস্থ অ্যাট্রিবিউট Height and width attribute

ইনপুট ফিল্ডের আকার নির্ধারণ করার জন্য এই attribute ব্যবহার করা হয়। type=”image” ধরেনের ক্ষেত্রে এই attribute ব্যবহার করা হয়।

উদাহরণ

Width এবং height সহ একটি ইমেজ যুক্ত বাটন দেখানো হল

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

 

ফলাফল

First name: Last name:

 

তালিকা বৈশিষ্ট্য (List attribute)

<datalist> উপাদান যাতে ইনপুট করার জন্য কিছু pre-defned অপশন থাকবে

উদাহরণ

Pre-defined ভ্যালু সহ একটি ইনপুট ফিল্ড

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
 </datalist>

 

ফলাফল



 

ন্যূনতম, সর্বোচ্চ অ্যাট্রিবিউট (Min, max attribute)

একটি ইনপুট ফিল্ড এর মিনিমাম এবং ম্যাক্সিমাম ডাটা ইনপুট করার ক্ষেত্রে এই attribute গুলো ব্যবহার করা হয় ভিন্ন ভিন্ন ধরনের ইনপুট ব্যবহার করা যায় number, range, date, datetime, datetime-local, month, time এবং week।

উদাহরন

মিনিমাম এবং ম্যাক্সিমাম ভ্যালু সহ একটি উদাহরণ

Enter a date before 1980-01-01:
 <input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
 <input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
 <input type="number" name="quantity" min="1" max="5">

 

ফলাফল

Enter a date before 1980-01-01:
Enter a date after 2000-01-01:
Quantity (between 1 and 5):

 

একাধিক অ্যাট্রিবিউট (Multiple attribute)

ইনপুট ফিল্ডে একাধিক ডাটা সাবমিট করার ক্ষেত্রে এই বুলিয়ান attribute ব্যবহার করা হয়।দুই ধরনের ইনপুটে কাজ করা যায় ইমেইল, ফাইল।

উদাহরণ

এই ইনপুট ফিল্ড এ অনেকগুলো ইমেজ আপলোড করা যাবে

Select images: <input type="file" name="img" multiple>

 

ফলাফল

Select images:

 

প্যাটার্ন অ্যাট্রিবিউট (Pattern attribute)

Regular expression এই ধরনের ডাটা ইনপুট করার ক্ষেত্রে আমরা এই attribute ব্যবহার করব। এতে ফরম্যাট দেওয়া থাকে সেই অনুপাতে ডাটা ইনপুট দিতে হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।

উদাহরণ

এই ইনপুট ফিল্ড এ ৩ টা লেটার ইনপুট করা যাবে যেখানে কোন নাম্বার বা special character থাকবে না

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

 

ফলাফল

Country code:

 

স্থানধারক অ্যাট্রিবিউট (Placeholder attribute)

ইনপুট ফিল্ড এ কোন কিছু ইনপুট করার আগে হালকা ভাবে কোন লেখা ডিসপ্লে করার জন্য এই attribute ব্যবহার করা হয়। এই টাইপ গুলো হল text, search, url, tel, email এবং password।

উদাহরণ

<input type="text" name="fname" placeholder="First name">

 

ফলাফল

 

আবশ্যক অ্যাট্রিবিউট (Required attribute)

কোন ইউজার যেন কোন নির্দিষ্ট ইনপুট ফিল্ড ফাকা না রেখে ফর্ম সাবমিট করে সেই জন্য আমরা এই attribute ব্যবহার করব। এই টাইপ গুলো হল text, search, url, tel, email, password, date pickers, numbers, checkbox, radio, file.।

উদাহরণ

Username: <input type="text" name="usrname" required>

 

ফলাফল

Username:

 

ধাপ অ্যাট্রিবিউট (Step attribute)

ইনপুট ফিল্ড এ লিগাল নাম্বার ইনপুট দেওয়ার ক্ষেত্রে এই attribute টি ব্যবহার করা হয়। যেমন যদি স্টেপ ৩ হয় তাহলে লিগাল নাম্বার গুলো হবে -৩,০,৩,৬

এই attribute যেই ধরনের ইনপুট টাইপ গুলোর ক্ষেত্রে কাজ করতে পারে এইগুলো হল number, range, date, datetime, datetime-local, month, time এবং week.

উদাহরণ

<input type="number" name="points" step="3">

 

ফলাফল


 

এইচটিএমএল HTML

এইচটিএমএল ইনপুট ধরন (HTML Input Types)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

-মাসুদ-

 

আজকে আমরা জানবো এইচটিএমএল ইনপুট সম্পর্কে।

টেক্সট ইনপুট

সাধারন তথ্য গ্রহণ করতে টেক্সট ইনপুট ব্যবহৃত হয়। এধরনের ইনপুট এক লাইনের হয়ে থাকে।

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

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

First name:

Last name:

 

পাসওয়ার্ড ইনপুট

পাসওয়ার্ড গ্রহণের জন্য এ ধরনের ইনপুট ফিল্ড ব্যবহৃত হয়।

<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

User name:
User password:

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

 

সাবমিট বাটন

ফরম পূরণ শেষে ফরম সাবমিট করতে সাবমিট বাটন ব্যবহৃত হয়।

যেমনঃ

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Masud">
<br>
Last name:<br>
<input type="text" name="lastname" value="Rana">
<br><br>
<input type="submit" value="Submit">
</form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

First name:

Last name:

 

চেকবক্স

চেকবক্স ব্যবহৃত হয় যখন একের অধিক অপশন বাছাই করতে বলা হয়।

<form>
 <input type="checkbox" name="vehicle" value="Bike">I have a cycle
 <br>
 <input type="checkbox" name="vehicle" value="Car">I have a motorcycle
 </form>

 

 উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

I have a cycle
I have a motorcycle

 

রেডিও বাটন

রেডিও বাটন ব্যবহৃত হয় যখন একের অধিক অপশন থেকে একটি অপশন বাছাই করতে বলা হয়।লিঙ্গ নির্বাচন করতে রেডিও বাটন ব্যবহৃত হয়। যেমনঃ

 <form>
 <input type="radio" name="sex" value="male" checked>Male
 <br>
 <input type="radio" name="sex" value="female">Female
 </form>

 

উপরোক্ত কোডটি ওয়েব ব্রাউজারে দেখা যাবে এভাবেঃ

Male
Female

 

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ ইনপুট সাইজিং (Bootstrap Input Sizing)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

.input-lg এবং .input-sm Class ব্যবহার করে প্রয়োগকৃত উপাদানসমুহের heights নির্ধারন করা হয়।

.col-lg-* এবং .col-sm-* grid column classe ব্যবহার করে প্রয়োগকৃত উপাদানসমুহের widths নির্ধারন করা হয়।

 

উচ্চতা মাপবদল / Height Sizing

নিচের উদাহরনের সাহায্যে input Element এর বিভিন্ন heights দেখানো যায়ঃ

উদাহরনঃ

<form role="form">
  <div class="form-group">
    <label for="inputdefault">Default input</label>
    <input class="form-control" id="inputdefault" type="text">
  </div>
  <div class="form-group">
    <label for="inputlg">input-lg</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
  <div class="form-group">
    <label for="inputsm">input-sm</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
</form>

ফলাফল : ইনপুট মাপবদল

 

<div class="form-group"> এর ভিতরে .form-group-* ব্যবহার করে আনুভুমিক ফর্ম এর খুব দ্রুত লেবেল এবং ফর্ম Controls করা যায়

উদাহরনঃ

<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="lg">form-group-lg</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="lg">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="sm">form-group-sm</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="sm">
</div>
</div>
</form>

ফলাফল :ইনপুট মাপবদল

 

কলাম মাপবদল (Column Sizing)

নিচের উদাহরনের সাহায্যে আমরা দেখব কি করে বিভিন্ন widths এ বিভিন্নি .col-xs-* classes ব্যবহার করা যায়

উদাহরনঃ

<div class="col-xs-2">
  <label for="ex1">col-xs-2</label>
  <input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
  <label for="ex2">col-xs-3</label>
  <input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
  <label for="ex3">col-xs-4</label>
  <input class="form-control" id="ex3" type="text">
</div>

ফলাফল : কলাম মাপবদল

 

সাহায়ক নির্দেশিকা (Help Text)

ব্লক লেবেল সহায়ক নির্দেশিকা যোগ করার জন্য .help-block ক্লাস যোগ করা হয়।

উদাহরণ :

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
  <span class="help-block">This is some help text...</span>
</div>

ফলাফল : সাহায়ক নির্দেশিকা

 

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ ইনপুট ফরম (আরো জানুন) Bootstrap Form Inputs (more)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

স্ট্যাটিক কন্ট্রোল

আপনি যদি একটি অনুভূমিক ফর্ম এর মধ্যে একটি ফর্ম লেবেল এর পরে প্লেইন টেক্সট সন্নিবেশ করতে চান তাহলে <p> এলিমেন্ট এর ভিতরে .form-control-static ক্লাস ব্যবহার করুন।

উদাহরনঃ

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@example.com</p>
    </div>
  </div>
</form>

ফলাফল : স্ট্যাটিক কন্ট্রোল

 

বুটস্ট্র্যাপ ফরম কন্ট্রোল অবস্থা

  • INPUT FOCUS - ইনপুট সীমারেখা মুছে ফেলা হয় এবং ফোকাস এর উপর বক্স ছায়ার প্রয়োগ করা হয়
  • DISABLED INPUTS - একটি ইনপুট ক্ষেত্রেকে নিষ্ক্রিয় করার জন্য disabled এট্রিবিউট যোগ করা হয়
  • DISABLED FIELDSETS - একটি fieldset এর মধ্যে সকল Controls কে নিস্ক্রিয় করারা জন্য disable এট্রিবিউট যোগ করা হয়
  • READONLY INPUTS - একটি ইনপুট ফিল্ড এর মধ্যে ব্যবহারকারীর ইনপুট প্রদান প্রতিহত করার জন্য একটি readonly এট্রিবিউট যোগ করা হয়
  • VALIDATION STATES - Bootstrap ত্রুটি, সতর্কতা, এবং সাফল্যের বার্তা জন্য validation styles ব্যবহার করে। এটা ব্যবহার করেতে .has-warning, .has-error, অথবা .has-success ক্লাস  পিতৃ এলিমেন্ট এর সাথে ব্যবহার করা হয়
  • ICONS- আপনি .has-feedback ক্লাস এর মাধ্যমে feedback icons যোগ করতে পারবেন ।
  • HIDDEN LABELS - অ দৃশ্যমান লেবেল এর ক্ষেত্রে .sr-only ক্লাস যোগ করা হয়

 

নিম্নলিখিত উদাহরণে একটি অনুভূমিক আকারের ফর্মের উপরে নিয়ন্ত্রণ নিয়ন্ত্রণ অবস্থা প্রদর্শন করে:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="Click to focus">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label" for="inputError">
    Input with error and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>

ফলাফল : অনুভূমিক ফর্মটি নিয়ন্ত্রণ হালচাল

 

এবং এখানে একটি ইনলাইন form control states এর কিছু একটি উদাহরণ দেয়া হল:

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="focusedInput">Focused</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disabled</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>

ফলাফল : ইনলাইন form control state

 

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ ফরম ইনপুট (Bootstrap Form Inputs)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

মো: আসাদুজ্জামান মিলন
আইটি ইন্সট্রাক্টর,
এমএসআইটি, কুড়িগ্রাম।

 

সমর্থিত ফরম কন্ট্রোল

বুটস্ট্র্যাপ নিম্নলিখিত ফর্ম কন্ট্রোলগুলো সমর্থন করে

  • input
  • textarea
  • checkbox
  • radio
  • select

 

বুটস্ট্র্যাপ ইনপুট

বুটস্ট্র্যাপ এইচটিএমএল ৫ এর সকল ইনপুট টাইপ, যেমন : text, password, time, color. datetime, datetime-local, date, month, week, number, email, url ইত্যাদি সর্মথন করে।

নিচের উধাহরনে দুই প্রকারের এইচটিএমএল ৫ ইনপুট যথাঃ text ও password এর ব্যবহার দেখান হল।

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

 

বুটস্ট্র্যাপ টেক্সটএরিয়া


ওয়েবপেজের যে অংশে ব্যবহার কারী তার মতামত বা মনের কথা লিখতে পারে সেটিকে টেক্সট এরিয়া বলে। নিচের উদাহরনে টেক্সটএরিয়া এর ব্যবহার দেখান হল।

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

 

বুটস্ট্র্যাপ চেকবক্স


ওয়েবপেজে চেকবক্স ব্যবহার করা হয় যাতে ব্যবহারকারী অনেক গুলি অপশন থেকে তার পছন্দের এক বা একাধিক অপশন বেছে নিতে পারে । এর মাধ্যমে ব্যবহার কারী অনেকগুলি র্পূব নির্ধারিত বিষয় থেকে তার পছন্দের বিষয়টি বা বিষয়গুলি র্নিবাচন করতে পারেন। নিচের উদাহরন থেকে বিষয়টি বোঝা যাবে।

<div class="checkbox">
  <label><input type="checkbox" value="">Dhaka</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Rangpur</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি অপশন পাবেন যার মধ্যে বেইজিং অপশনটি নিস্ক্রিয় থাকবে।

যদি সবগুলি চেকবক্স একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে checkbox-inline ক্লাস এর ব্যবহার করা যায়। নিচের উধাহরনে বিষয়টি বোঝা যাবে।

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

 

বুটস্ট্র্যাপ রেডিও বাটন


ওয়েবপেজে রেডিও বাটন ব্যবহার করা হয়, যাতে ব্যবহার কারী অনেক গুলি অপশন থেকে তার পছন্দের একটি মাত্র অপশন বেছে নিতে পারে। উদাহরনঃ

<div class="radio">
  <label><input type="radio" name="optradio">Dhaka</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Rangpur</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি শহর থেকে ঢাকা ও রংপুর এর যেকোন একটি নির্বাচনের সুযোগ পাবেন। বেইজিং নামক অপশনটি নিস্ক্রিয় দেথানো হয়েছে।যদি সবগুলি রেডিও বাটন একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে radio-inline ক্লাস এর ব্যবহার করা যায়।

 

বুটস্ট্র্যাপ সিলেক্ট লিষ্ট


ব্যবহারকারীকে অনেকগুলি বিষয়ের একটি তালিকা থেকে একটি বিষয় বাছাই করার সুযোগ দিতে সিলেক্ট লিষ্ট ব্যবহার করতে হয। নিচের উধাহরনে বিষয়টি বোঝা যাবে।

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

 

 

Academic, Computer Engineering (Hardware), Computer Science, CSE-100:Programming in C, CSE-100:Programming in C, Engineering, Science, Science and Engineering, Universities

লেকচার-০৪: সিএসই-১০০: সি প্রোগ্রামিং পরিচিতি – ইনপুট, অ্যারে, বুলিয়ান এক্সপ্রেশন; আপনার প্রথম প্রোগ্রাম (Input, Array, Boolean Expression; your first program)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Input

Array

Boolean Expression