Tag Archives: Form

পিএইচপি ৫ ফরম – ই-মেইল এবং URL সন্নিবেশ করা (PHP 5 Forms – Validate E-mail and URL)

Huge Sell on Popular Electronics

এই অধ্যায়ে আমরা ই-মেইল ও URL কিভাবে বেলিডেট করা যায় সে সম্পর্কে আলোচনা করবো।

পিএইচপি - নাম যাচাই করা

নিচের কোডটি নিশ্চিত করে যে, এতে শুধুমাত্র লেটার বা বর্ণ থাকবে এবং কোন ফাঁকা স্থান থাকবে না। যদি শর্ত না মানে তাহলে এরর ম্যাসেজ দেখাবে।


$name = test_input($_POST["name"]);
 if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
   $nameErr = "Only letters and white space allowed"; 
 }

 

preg_match() ফাংশন স্ট্রিং এর ধরণ খুঁজে দেখে এবং যদি ফাংশনে উল্লেখিত ধরণ সঠিক থাকে তাহলে সত্য ফেরত দেয় না হলে মিথ্যা ফেরত দেয়।

 

পিএইচপি - ই-মেইল যাচাই করা

filter_var() ফাংশনের মাধ্যমে পিএইচপি যাচাই করে দেখে যে ই-মেইল এন্ট্রিটি সঠিকভাবে প্রবেশ করানো হয়েছে কিনা।


$email = test_input($_POST["email"]);
 if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
   $emailErr = "Invalid email format"; 
 }

 

 

পিইএচপি - URL যাচাই করা

নিচের কোডটি URL ঠিকানা ঠিকভাবে লেখা হয়েছে কিনা তা যাচাই করে দেখে


$website = test_input($_POST["website"]);
 if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)
    [-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
   $websiteErr = "Invalid URL"; 
 }

 

 

পিইএচপি - নাম, ই-মেইল, URL যাচাইকরণ


<?php
 // define variables and set to empty values
 $nameErr = $emailErr = $genderErr = $websiteErr = "";
 $name = $email = $gender = $comment = $website = "";
 
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
   if (empty($_POST["name"])) {
     $nameErr = "Name is required";
   } else {
     $name = test_input($_POST["name"]);
     // check if name only contains letters and whitespace
     if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
       $nameErr = "Only letters and white space allowed"; 
     }
   }
 
   if (empty($_POST["email"])) {
     $emailErr = "Email is required";
   } else {
     $email = test_input($_POST["email"]);
     // check if e-mail address is well-formed
     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       $emailErr = "Invalid email format"; 
     }
   }
 
   if (empty($_POST["website"])) {
     $website = "";
   } else {
     $website = test_input($_POST["website"]);
     // check if URL address syntax is valid 
        (this regular expression also allows dashes in the URL)
     if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)
        [-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
       $websiteErr = "Invalid URL"; 
     }
   }
 
   if (empty($_POST["comment"])) {
     $comment = "";
   } else {
     $comment = test_input($_POST["comment"]);
   }
 
   if (empty($_POST["gender"])) {
     $genderErr = "Gender is required";
   } else {
     $gender = test_input($_POST["gender"]);
   }
 }
 ?>

 

 

পরবর্তী অধ্যায় এ ফর্ম সাবমিট করার পূর্বে সকল ফিল্ডগুলো পূরণ করা হয়েছে কিনা এবং না করলে কিভাবে সাবমিট করা থামানো যায় সে সম্পর্কে আলোচনা করা হবে।

 

 

অ্যাপ এম এল ফর্ম (AppML Forms)

Huge Sell on Popular Electronics

রিদওয়ান বিন শামীম

 

এই অধ্যায়ে দেখানো হবে কীভাবে ডাটাবেসের বিপরীতে ইনপুট ফর্ম তৈরি করা যায়।

 

ফর্ম মডেল তৈরি করা

model_customersform.js


{
 "database" : {
     "connection" : "localmysql",
     "maintable" : "Customers",
     "keyfield" : "CustomerID",
     "sql" : "SELECT * FROM Customers"},
 "updateItems" : [
     {"item" : "CustomerName"},
     {"item" : "Address"},
     {"item" : "PostalCode"},
     {"item" : "City"},
     {"item" : "Country"}]
 }

 

 

এইচটিএমএল ফর্ম তৈরি করা

পূর্ববর্তী অধ্যায়ে আমরা দেখেছি কীভাবে ডাটাবেস থেকে রেকর্ড লিস্ট করার জন্য এপ্লিকেশন তৈরি করতে হয়। এখানে ওয়েব পেজে একটি ফর্ম এপ্লিকেশন যোগ করতে হবে,

HTML Form


<div id="Form01" appml-data="local?model=model_customersform"
 class="jumbotron">
 
 <div class="form-group">
   <label for="customername">Customer:</label>
   <input id="customername" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="address">Address:</label>
   <input id="address" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="city">City:</label>
   <input id="city" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="postalcode">Postal Code:</label>
   <input id="postalcode" class="form-control">
 </div>
 
 <div class="form-group">
   <label for="country">Country:</label>
   <input id="country" class="form-control">
 </div>
 
 </div>

 

 

এইচটিএমএল ফর্মের ব্যাখ্যা

appml-data="local?model=model_customersform" দ্বারা ফরমের জন্য অ্যাপ এম এল এপ্লিকেশন বোঝায়।

 

এইচটিএমএল ফর্ম কমান্ড তৈরি করা

পছন্দসই স্টাইলশিট ব্যবহার করে(এখানে bootstrap ব্যবহার করা হয়েছে) কাঙ্খিত ফর্ম কমান্ড তৈরি করা হয়,

inc_formcommands.htm


<button type="button" class="close" onclick="document.getElementById('Form01').style.display='none';">X</button>
 
 <button type="button" class="close">X</button>
 
 <div class="btn-toolbar" style="margin-bottom:20px;">
 <div class="btn-group">
 
 <button type="button" class="btn btn-default" onclick="appml('Form01').newRecord();">
 <span class="glyphicon glyphicon-new-window"></span> New</button>
 
 <button type="button" class="btn btn-primary" onclick="appml('Form01').saveRecord();">
 <span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
 
 <button type="button" class="btn btn-default" onclick="appml('Form01').deleteRecord();">
 <span class="glyphicon glyphicon-trash"></span> Delete</button>
 
 </div>
 </div>
 
 <div id="appmlmessage" class="alert alert-warning" style="display:none;">
 <button type="button" class="close"
 onclick="this.parentNode.style.display='none';">X</button>
 <div id="message"></div>
 
</div>

 

 

ফর্ম কমান্ড অন্তর্ভুক্তি

ফরমে ফর্ম কমান্ড অন্তর্ভুক্ত করা হয়,

HTML Form


<div id="Form01" appml-data="local?model=model_customersform"
 class="jumbotron">
 
 <div appml-include-html="inc_formcommands.htm"></div>
 
 <div class="form-group">
 <label for="customername">Customer:</label>
 <input id="customername" class="form-control">
 </div>
 
 <label for="address">Address:</label>
 <input id="address" class="form-control">
 </div>
 
 <div class="form-group">
 <label for="city">City:</label>
 <input id="city" class="form-control">
 </div>
 
 <div class="form-group">
 <label for="postalcode">Postal Code:</label>
 <input id="postalcode" class="form-control">
 </div>
 
 <div class="form-group">
 <label for="country">Country:</label>
 <input id="country" class="form-control">
 </div>
 
 </div>

 

 

 

 

ডাটা টেবিলে ক্লিকেবল কলাম যোগ করা

পূর্ববর্তী অধ্যায়ে আমরা দেখেছি কীভাবে ডাটাবেস থেকে রেকর্ড লিস্ট করার জন্য এপ্লিকেশন তৈরি করতে হয়।এখানে আমরা টেবিলে নতুন কলাম যোগ করব।

 

HTML Source


<div appml-data="local?model=model_customerslist">
 
 <h1>Customers</h1>
 <div appml-include-html="inc_listcommands.htm"></div>
 <div appml-include-html="inc_filter.htm"></div>
 
 <table class="table table-striped table-bordered">
   <tr>
     <th></th>
     <th>Customer</th>
     <th>City</th>
     <th>Country</th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer;width:34px;"
         onclick="appml('Form01').run({{CustomerID}})">
         <span class="glyphicon glyphicon-edit"></span></td>
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
   </tr>
 </table>
 
</div>

 

 

নতুন কলামের অনক্লিক ইভেন্ট অ্যাপ এম এল এর একটি এপ্লিকেশন রান করায়, যা এইচটিএমএল উপাদানের মধ্যে id="Form01" পরিচিতি নিয়ে অবস্থান করে।

 

  • appml('Form01') অ্যাপ এম এল এর এপ্লিকেশন পুনরাবৃত্তি করায়,
  • run({{CustomerID}}) প্যারামিটাররূপে কাস্টমার আইডির সাথে এপ্লিকেশন রান করায়।

 

চূড়ান্ত পর্যায়ে, ফর্মকে লুকিয়ে রাখা

ফর্মকে লুকিয়ে রাখতে একধরনের স্টাইল ব্যবহার করা হয়,

 

HTML


<div id="Form01" appml-data="local?model=model_customersform"
 appml-controller="myFormController"
 class="jumbotron" style="display:none">

 

ফর্মে একটি কন্ট্রোলার ব্যবহার করা হয় যেন এটি কেবল তখনই দৃশ্যমান হবে যখন এটি লোডেড ও ডাটা প্রদর্শনের জন্য প্রস্তুত।

Controller


<script>
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1;}
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display="";
     }
 }
 </script>

 

 

 

এইচটিএমএল ফরম (HTML Forms)

Huge Sell on Popular Electronics

আজকে আমরা জানবো এইচটিএমএল ফর্ম কি এবং এর ব্যবহার সম্পর্কে। সাধারনত কোন ব্যাক্তির কাছ থেকে তথ্য গ্রহণ (ইনপুট) করতে এইচটিএমএল ফর্ম ব্যবহৃত হয়। যা <form> --- দ্বারা বোঝানো হয়। যেমনঃ


<form>
.
form elements
.
</form>


 

এইচটিএমএল ফর্ম এর মধ্যে ফর্ম এলিমেন্ট থাকে। তথ্য ইনপুট দেয়ার জন্য বিভিন্ন ধরনের ফর্ম এলিমেন্ট ব্যবহৃত হতে পারে যেমন চেকবক্স, রেডিও বাটন, সাবমিট বাটন ইত্যাদি।

 

টেক্সট ইনপুট

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


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

 

 

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


First name:

Last name:


নোটঃ ফর্ম নিজে নেজেই প্রদর্শিত হতে পারে না। ডিফল্ট টেক্সট ফিল্ড এর প্রসস্থতা হচ্ছে ২০ বর্ণ ।

 

চেকবক্স

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

 

রেডিও বাটন

<input type="radio"> রেডিও বাটনকে সঙ্গায়িত করে

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


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

 

 

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


Male
Female

 

সাবমিট বাটন

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

যেমনঃ


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


আপনি যদি "Submit" বাটন এ ক্লিক করেন তাহলে এই ফর্ম এর ডাটা "action_page.php".পেজ এ পাঠিয়ে দেবে।

একটু লক্ষ্য করলে দেখবো যে উপরের কোডটি লেখার সময় আমরা <form action=”action_page.php”> লিখেছি। এটি লেখা হয়েছে ফরমটা কোথায় সাবমিট হবে তা বুঝিয়ে। এটাকে Attribute বলা হয়।

 

এইচটিএমএল ফরম উপাদানসমূহ (HTML Form Elements)

Huge Sell on Popular Electronics

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

<input>Element:

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

<select> Element (drop-down-list):

উদাহরনঃ


 <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> element পছন্দ মতন কনটেন্ট সিলেক্ট অপশন থেকে নির্বাচন করার জন্য ব্যবহার করা হয়। তালিকাতে সাধারনত প্রথম অপশন টি সিলেক্ট করা থাকে।

উদাহরণ


<option value="fiat" selected>Fiat</option>


 

 

ফলাফল



 

<textarea> Element

ইনপুট ফিল্ডের অনেকগুলো লাইন লিখার ক্ষেত্রে আমরা <textarea> ব্যবহার করে থাকি।

উদাহরণ


<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>


 

 

ফলাফল



 

<button> element

কোন বাটন কে ক্লিক করার জন্য আমরা এই element টি ব্যবহার করে থাকি।

উদাহরণ


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


 

 

ফলাফল



 

এইচটিএমএল ৫ <datalist> element

Pre-defined অপশন্‌স এর তালিকা থেকে ইনপুট এর উপাদান এর জন্য দাতালিস্ত ব্যবহার করা হয়। ইউজার রা pre-defined অপশন্‌স এর একটি তালিকা দেখতে পাবে ডাটা ইনপুট দেওয়ার জন্য। এই জন্য <datalist> element এর ভিতর ID attribute নিশ্চিতভাবে ডিফাইন করে দিতে হবে।

উদাহরণ


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

 

ফলাফল





 

এইচটিএমএল ৫ <keygen> element

ইউজার রা নিরাপদ ভাবে বৈধতা ঘোষণা করার জন্য এই element ব্যবহার করা হয় । এই element এর মাধ্যমে একজোড়া ফিল্ড তৈরি হয় ফর্ম এর মধ্যে। যখন ফর্ম সাবমিট করা হয় দুই ধরনের key তৈরি হয়। একটি প্রাইভেট এবং পাবলিক। প্রাইভেট key লোকাল ভাবে জমা হয় এবং পাবলিক key সার্ভার এ পাঠানো হয়। client কে certify করার ক্ষেত্রে এই প্রাইভেট key ব্যবহার করা হয় যাতে ভবিষ্যতে এই ইউজার কে অথিনটিকেত করা যায়।

উদাহরণ


<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
form>


 

 

ফলাফল


Username:Encryption:


 

এইচটিএমএল ৫ <output> element

কোন ক্যালকুলাসন করার জন্য এবং তার ফলাফল দেখানোর জন্য এই element ব্যবহার করা হয়

উদাহরণ


<form action="action_page.asp"
 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>

 

 

ফলাফল


0

100 +

=


 

এইচটিএমএল ফর্ম elements

ট্যাগ বর্ণনা
<form> ইউজার দের ইনপুট দেওয়ার জন্য ফর্ম
<input> ইনপুট কে নিয়ন্ত্রণ করার জন্য
<textarea> একের অধিক লাইন কে ইনপুট দেওয়ার জন্য
<lable> একটি ইনপুট এর লেবেল ডিফাইন করার জন্য
<fieldset> একটি ফর্মের মধ্যে গ্রুপ সম্পর্কিত উপাদান ডিফাইন করার জন্য
<legend> <fieldset> element এর নাম দেওয়ার জন্য (caption)
<select> ড্রপ ডাউন তালিকা ডিফাইন করার জন্য
<optgroup> গ্রুপ সম্পর্কিত অপশন ড্রপ ডাউন তালিকা থেকে পাওয়ার জন্য
<option> ড্রপ ডাউন লিস্ট থেকে অপশন সিলেক্ট করার জন্য
<button> বাটন কে ক্লিক করার ক্ষেত্রে
<datalist> pre-defined অপশন্‌স এর একটি তালিকা যা থেকে ইনপুট কে নিয়ন্ত্রণ করা যাবে।
<keygen> ফর্মের একজোড়া key ফিল্ড তৈরি করার জন্য
<optput> calculation এর ফলাফল পাওয়ার জন্য।

 

পিএইচপি ৫ কমপ্লিট ফর্ম উদাহরণ (PHP 5 Complete Form Example)

Huge Sell on Popular Electronics

ইনপুট ফিল্ড এর টাইপ করা ডাটা যদি ইউজার সাবমিট বাটন ক্লিক করার পর দেখতে চায় আমরা কিছু পিএইচপি কোড যুক্ত করব ইনপুট ফিল্ড এর মধ্যে (name, email, and website)। কমেন্ট টেক্সট এরিয়া এর মধ্যে আমরা পিএইচপি কোড যুক্ত করব <textarea> and </textarea> এই ট্যাগ এর ভিতরে। এই চারটি ফিল্ড এর জন্য রাখা হয়েছে $name, $email, $website, and $comment এই variables গুলোকে ব্যবহার করা হয়েছে। আমাদের এরপর লক্ষ্য রাখতে হবে যে রেডিও বাটন চেক করা হয়েছে কিনা। এই চারটি ফিল্ড ব্যবহার করে আমরা যদি কোড এর দিকে লক্ষ্য করি


Name: <input type="text" name="name" value="<?php echo $name;?>">
 
 E-mail: <input type="text" name="email" value="<?php echo $email;?>">
 
 Website: <input type="text" name="website" value="<?php echo $website;?>">
 
 Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
 
 Gender:
 <input type="radio" name="gender"
 <?php if (isset($gender) && $gender=="female") echo "checked";?>
 value="female">Female
 <input type="radio" name="gender"
 <?php if (isset($gender) && $gender=="male") echo "checked";?>
 value="male">Male

 

 

পিএইচপি - সম্পূর্ণ ফর্ম উদাহরণ


PHP Form Validation Example

* required field.

 

Name: * E-mail: *

Website:

Comment:

Gender: Female Male *

Your Input:

 



 

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

Huge Sell on Popular Electronics

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

আপনি যদি একটি অনুভূমিক ফর্ম এর মধ্যে একটি ফর্ম লেবেল এর পরে প্লেইন টেক্সট সন্নিবেশ করতে চান তাহলে <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 Form Inputs)

Huge Sell on Popular Electronics

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

 

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

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

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

 

 

বুটস্ট্র্যাপ ফর্মস (Bootstrap Forms)

Huge Sell on Popular Electronics

বুটস্ট্র্যাপ এর ডিফল্ট সেটিংস

বুটস্ট্র্যাপ ফর্মস কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু global styling নেয়:

সকল Textual .form-control Class এর <input>, <textarea>, এবং <select> এলিমেন্টগুলোর  বিস্তার ১০০%

 

বুটস্ট্র্যাপ ফরম লেআউট

Bootstrap তিন ধরনের ফর্ম layouts প্রদর্শন করেঃ

  • Vertical form বা উল্লম্ব ফর্ম (এটি ডিফল্ট হিসেবে থাকে)
  • Horizontal form বা আড়াআড়ি ফর্ম
  • Inline form

এই সকল ফর্ম layouts এর জন্য কিছু আদর্শ বিধিমালা আছে

  • সবসময় <form role="form"> ব্যবহার করতে হবে (স্ক্রিন রিডার ব্যবহার করে মানুষের জন্য প্রবেশযোগ্যতা উন্নত করতে সাহায্য করে)
  • ফর্ম গুছাতে এবং নিয়ন্ত্রন করতে <div class="form-group"> ব্যবহার করতে হয় (সর্বোত্তম ফাঁকা স্থান দেয়ার জন্য প্রয়োজন)
  • সকল টেক্সট বেজ এলিমেন্ট <input>, <textarea>, এবং <select> এর জন্য .form-control ক্লাস কোয করা হয়।

 

বুটস্ট্র্যাপ উল্লম্ব ফরম Vertical Form (default)

দুইটা input fields, একটি চেকবক্স এবং একটি submit button এর সাহায্যে নিচের উদাহরন এর মতো একটি উলম্ব ফর্ম গঠন করা যায়:

উদাহরনঃ


<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

 

বুটস্ট্র্যাপ ইনলাইন ফরম

একটি inline form এ সকল উপাদানগুলো একটা সরল রেখায় থাকে , left-aligned, এবং লেবেল পাশাপাশি থাকে

বিশেষ দ্রস্টব্যঃ এটা শুধু মাত্র তখনই প্রদর্শিত হবে যখন viewports এর প্রসস্থতা 768px হবে।

কিছু অতিরিক্ত নিয়ম আছে এটা ব্যবহার করার জন্যঃ

  • .form-inline class টা <form> এর মাঝে স্থাপন করতে হয়

উদাহরনঃ


<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Bootstrap Inline Form

 

সতর্কতাঃ প্রত্যেক input এর জন্য যদি label ব্যবহার না করা হয় তাহলে screen readers ফর্ম গঠনে সমস্যা করতে পারে ।

শধু মাত্র screen reader ছাড়া .sr-only class ব্যবহার করে সকল devices এর জন্য labels hide করে রাখা যাবে।

উদাহরনঃ


<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Inline form with sr-only class

 

বুটস্ট্র্যাপ অনুভূমিক ফর্ম

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.

উভয় markup এবং presentation ফর্ম এর ক্ষেত্রে আড়াআড়ি ফর্ম গুলো অন্য ফর্মগুলো থেকে দূরত্ব বজায় রাখে

টা ব্যবহার করার কিছু নিয়ম আছে:

  • <form> এলিমেন্ট এর মধ্যে .form-horizontal class স্থাপন করতে হয়
  • সকল <label> এলিমেন্ট এর মাঝে .control-label class ব্যবহার করতে হয়

উদাহরনঃ


<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">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

ফলাফল : Bootstrap Horizontal Form

 

 

পিএইচপি ৫ ফর্ম হ্যান্ডলিং (PHP 5 Form Handling)

Huge Sell on Popular Electronics

আক্তারুজ্জামান

Department of CSE, University of Chittagong

 

ইউজার এর কাছ থেকে বিভিন্ন ধরনের তথ্য সংগ্রহ করতে ফর্ম (form) ব্যাবহার করা হয়। এই তথ্যগুলো পিএইচপি প্রোগ্রামের মাধ্যমে ডাটাবেজে স্টোর করা হয়। পিএইচপি তে দুটি সুপার গ্লুবাল ভেরিয়েবল আছে যা ফর্ম থেকে বিভিন্ন উপাত্ত বা ইউজার এর ইনপুট তুলে আনতে ব্যাবহৃত হয়। এই দুইটি ভেরিয়েবল হল $_GET এবং $_POST।

নিচের উদাহরণে একটি সিম্পল এইচটিএমএল ফর্ম দেওয়া হয়েছে যেখানে ২ টি ইনপুট ফিল্ড এবং একটি সাবমিট বাটন রয়েছে।


<html>
 <body>
 
 <form action="welcome.php" method="post">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

 

যখন ইউজার এই ফর্মের ডাটা ফিল্ড গুলো পূর্ণ করে সাবমিট বাটনে ক্লিক করবে তখন উক্ত ডাটা গূলো “welcome.php” ফাইলে চলে যাবে। এখানে যেহেতু মেথড “post” ব্যাবহার করা হয়েছে তাই ডাটা গুলো HTTP POST মেথডের মাধ্যমে সেন্ড হবে।
সাবমিট করা ডাটা গুলো খুব সহজে নিচের মত করে “welcome.php” ফাইলে প্রদর্শন করা যাবে।


 <html>
 <body>
 
 Welcome <?php echo $_POST["name"]; ?><br>
 Your email address is: <?php echo $_POST["email"]; ?>
 
 </body>
 </html>

 

এই কোডটির আউটপূট হবে নিচের মতঃ


Welcome John
Your email address is john.doe@example.com


 

একই ভাবে HTTP GET মেথডে ব্যাবহার করেও কাজটি করা যাবে।
উদাহরনঃ


 <html>
 <body>
 
 <form action="welcome_get.php" method="get">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

 

এখেত্রে "welcome_get.php" ফাইলটি নিচের মত হবেঃ


<html>
 <body>
 
 Welcome <?php echo $_GET["name"]; ?><br>
 Your email address is: <?php echo $_GET["email"]; ?>
 
 </body>
 </html>

 

গেট বনাম পোষ্ট (GET vs. POST)

  • GET এবং POST উভয়েইএকটি অ্যারে নির্মাণ করে (যেমনঃ array( key => value, key2 => value2, key3 => value3, ...))। এখানে key,key1,key2 হল ফর্ম কন্ট্রোল গুলোর নামে এবং value,value1,value2 হল ইউজারের ইনপুট ডাটা।
  • GET এবং POST উভয়েই $ _GET এবং $ _POST হিসাবে গণ্য হয়। এইগুলো হল সুপার গ্লুবালস অর্থাৎ এইগুলো সবসময় সব ফাংশন এবং সব ক্লাস থেকে এক্সেস করা যাবে।
  • ফর্মের ডাটা GET মেথড ব্যাবহার করে সেন্ড করলে সকল ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয়। অন্য দিকে ফর্মের ডাটা POST মেথড ব্যাবহার করে সেন্ড করলে ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয় না।

 

কখন GET ব্যবহার করতে হবে? (When to use GET?)

GET এর মাধ্যমে পাঠানো ডাটা সবাই দেখতে পায়। GET এর মাধ্যমে খুব বেশি ডাটা পাঠানো যায় না ,সর্বোচ্চ 2000 characters পাঠানো যায়। সেনসিটিভ ডাটা যেমন passwords সেন্ড করার জন্য কখনো GET ব্যাবহার করা উচিত নয়।

 

কখন POST ব্যবহার করতে হবে? (When to use POST?)

POST এর মাধ্যমে পাঠানো ডাটা অন্যরা দেখতে পায় না এবং এইখানে যত ইচ্ছা তথ্য পাঠানো যায়। এছাড়াও POST এর মাধ্যমে সার্ভারে ফাইল আপলোড করা যায় যেটা GET এর মাধ্যমে করা সম্ভব না।

 

লেকচার ৪৩: মাইক্রোসফট ওয়ার্ড 2010 – টেবিল দ্বারা ফরম তৈরি (Word 2010 – a Form by Table)

Huge Sell on Popular Electronics