Apr 15

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

শরিফুল ইসলাম
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">

 

ফলাফল


 

Apr 14

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

-মাসুদ-

 

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

টেক্সট ইনপুট

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

 <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

 

Apr 13

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

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

 

Apr 12

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

শরিফুল ইসলাম
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 এর ফলাফল পাওয়ার জন্য।

 

Apr 11

এইচটিএমএল ও এক্সএইচটিএমএল (HTML and XHTML)

XHTML কি

XHTML এর পূর্নরুপ হল EXtensible HyperText Markup Language। এটি অবিকল HTML এর মত তবে কিছুটা কঠোর। XHTML সব বড় বড় ব্রাউজারে সাপোর্ট করে।

 

কেন XHTML ব্যবহার করবো?

HTML কোডিং এ কোন ভুল থাকলেও অনেক সময় বিভিন্ন ব্রাউজ়ারে তা ধরা পড়েনা এবং ব্রাউজারে সুন্দর ভাবেই দেখা যায়। কিন্ত বর্তমানে বাজারে অনেক নতুন ব্রাউজার এসেছে। অনেকেই কম্পিউটার ছাড়াও মোবাইলে সাইট ভিজিট করছে। অনেক মোবাইল ব্রাউজার HTML এর ভুলগুলো সঠিকভাবে দেখাতে পারেনা। XHTML এ যেহেতু কোডিং সঠিকভাবে করতে হয় তাই XHTML ব্যবহার করাই শ্রেয়।

ডকুমেন্ট এর গঠন (Document Structure)

  • XHTML DOCTYPE আবশ্যক XHTML কোডিং এর ক্ষেত্রে।
  • এর মধ্যে xmlns attribute ও আবশ্যক।
  • <html>, <head>, <title>, <body> ও আবশ্যক।

 

নিম্নে একটি XHTML ডেমো কোড দেয়া হলঃ<

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<title>Title of document</title>
</head>

<body>
some content
</body>

</html>

 

এক্সএইচটিএমএল এলিমেন্ট XHTML Elements

XHTML elements গুলো সঠিকভাবে বিন্যাস করতে হবে।
ভুলঃ <b><i>This text is bold and italic</b></i>

সঠিকঃ <b><i>This text is bold and italic</i></b>

  • XHTML elements গুলো অবশ্যই সঠিকভাবে শেষ করতে হবে।

ভুলঃ <p>This is a paragraph
<p>This is another paragraph

 

সঠিকঃ
<p>This is a paragraph</p>
<p>This is another paragraph</p>

 

  • XHTML elements গুলো lowercase বা ছোটহাতের হতে হবে।

 

ভুলঃ

<BODY>
<P>This is a paragraph</P>
</BODY>

 

সঠিকঃ
<body>
<p>This is a paragraph</p>
</body>

  • XHTML documents এর অন্তত একটা root element থাকতে হবে।

 

এক্সএইচটিএমএল এট্রিবিউট XHTML Attributes

  • Attribute names গুলো lowercase বা ছোটহাতের হতে হবে।

ভুলঃ <table WIDTH=”100%”>

সঠিকঃ <table width=”100%”>

  • Attribute values গুলোও quoted করা থাকতে হবে।

ভুলঃ <table width=100%>

সঠিকঃ <table width=”100%”>

  • Attribute সংক্ষিপ্ত করা যাবেনা।

ভুলঃ
<input type=”checkbox” name=”vehicle” value=”car” checked />

<input type=”text” name=”lastname” disabled />

 

সঠিকঃ

<input type=”checkbox” name=”vehicle” value=”car” checked=”checked” />

<input type=”text” name=”lastname” disabled=”disabled” />

 

কিভাবে HTML থেকে XHTML রুপান্তর করবো?

১। প্রতিটি পেজ এর প্রথম লাইনে XHTML <!DOCTYPE> যুক্ত করতে হবে।

২। প্রতিটি পেজ এর HTML elements এর মধ্যে xmlns attribute যুক্ত করতে হবে।

৩। প্রতিটি elements গুলো lowercase বা ছোটহাতের করতে হবে।

৪। প্রতিটি elements সঠিকভাবে বন্ধ করতে হবে।

৫। Attribute names গুলো lowercase বা ছোটহাতের করতে হবে।

৬। attribute values গুলো সঠিকভাবে Quote করতে হবে।

 

Apr 11

Searching Data with Apache Solr

Searching Data with Apache Solr

Apr 10

এইচটিএমএল ইউনিফর্ম রিসোর্স লোকেটর (HTML Uniform Resource Locators)

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

 

ওয়েব ঠিকানার অন্য নাম হচ্ছে URL

একটি URL লেখার জন্য আমাদের টাইপ করতে হয় শব্দের সাহায্যে (http://bangla.salearningschool.com) বা ইন্টারনেট প্রটোকল এড্রেস (IP) টাইপ করে, যেমন (192.185.24.202)।

প্রায় সবাই এড্রেস বারে ডোমেইন নামকে টাইপ করে থাকে কারন নাম্বার এর থেকে নাম মনে রাখা সহজ।

 

URL- ইউনিফর্ম রিসোর্স লোকেটর

ওয়েব ব্রাউজার গুলি ওয়েব সার্ভার থেকে url ব্যবহার করার মাধ্যমে কোন পেজ কে গ্রহণ করে থাকে। এইচটিএমএল পেজ এর কোন লিঙ্ক কে ক্লিক করলে <a> ট্যাগ কোন ওয়েব এড্রেস কে নির্দেশ করে। ওয়েব এ কোন ডকুমেন্ট বা পেজ কে খুজে পাওয়ার জন্য URL ব্যবহার করা হয়।

একটি ওয়েব এড্রেস  http://bangla.salearningschool.com/about-us.php নিচের নিয়মগুলোকে অনুসরন করে।

scheme://host.domain:port/path/filename

বর্ণনা

Scheme-ইন্টারনেট সার্ভিস এর ধরন কে ডিফাইন করে। (সাধারনভাবে http হয়ে থাকে)

Host-ডোমেইন এর host ডিফাইন করে (http এর ক্ষেত্রে ডিফল্ট হলত www)

Domain-ইন্টারনেট ডোমেইন এর নাম ডিফাইন করে (salearningschool.com)

port-host এর পোর্ট নাম্বার (http হল 80)

path- সার্ভার এর পাথ ডিফাইন করে (site এর প্রধান directory)

filename-ডকুমেন্ট বা ডাটার নাম

 

সাধারণ URL পরিকল্পনাগুলি

http (HyperText Transfer Protocol)- সাধারনত ওয়েব পেজ এর জন্য ব্যবহার করা হয়।

https (secure HyperText Transfer protocol)-নিরাপদ ওয়েব পেজ এর জন্য ব্যবহার করা হয়।

ftp (File Transfer Protocol)-ফাইল কে আপলোড বা ডাউনলোড করার জন্য

file-কম্পিউটার এর কোন ফাইল

 

URL এনকোডিং

ASCII character set এর মাধ্যমে URL গুলোকে ইন্টারনেট এ পাঠানো হয়। URL এ সবসময় character থাকে এবং তা ASCII তে পরিবর্তন করতে হয়। URL এনকোডিং নন ASCII characters গুলোকে “%” এ প্রতিস্থাপন করা হয় hexadecimal ডিজিট এর মাধ্যমে। URL এ কোন ফাকা জাইগা থাকে না ফাকা জায়গা গুলো (+) চিহ্ন অথবা %20 দিয়ে পুরন করা হয়।

 

ASCII এনকোডিং উদাহরণ

এইচটিএমএল ৫ এর ডিফল্ট character set গুলো হল UTF-8

বর্ণ Windows-1252 থেকে
 UTF-8 থেকে
€ %80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
 %C2 %C3%82
à %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85

 

Apr 09

এইচটিএমএল প্রতিক (HTML Symbols)

শরিফুল ইসলাম

 

অনেক গানিতিক, প্রযুক্তিগত, মুদ্রার চিহ্ন নরমাল কীবোর্ড এ পাওয়া যায় না। এইচটিএমএল এর entity নাম ব্যবহার করে আমরা এই চিহ্ন গুলো নিয়ে আসতে পারি। যদি কোন entity নাম না থাকে তাহলে আমরা entity নাম্বার ব্যবহার করতে পারি decimal or hexadecimal রেফারেঞ্চ। যদি আমরা এইচটিএমএল পেজ কোন entity নাম বা কোন নাম্বার ব্যবহার করি তাহলে এই character গুলি সঠিক ফরম্যাট এ ডিসপ্লে করবে।

উদাহরণ

 <p>I will display &euro;</p>
 <p>I will display &#8364;</p>
 <p>I will display &#x20AC;</p>

 

 

এর ফলাফল পাওয়া যাবে

I will display €
I will display €
I will display €

 

 

কিছু গানিতিক চিহ্ন যা এইচটিএমএল সাপোর্ট করে

Char নাম্বার Entity বর্ণনা
∀ &#8704; &forall; FOR ALL
∂ &#8706; &part; PARTIAL  DIFFERENTIAL
∃ &#8707; &exist; THERE EXISTS
∅ &#8709; &empty; EMPTY SETS
∇ &#8711; &nabla; NABLA
∈ &#8712; &isin; ELEMENT OF
∉ &#8713; &notin; NOT AN ELEMENT OF
∋ &#8715; &ni; CONTAINS AS MEMBER
∏ &#8719; &prod; N-ARY PRODUCT
∑ &#8721; &sum; N-ARY SUMMATION

 

কিছু গ্রীক লেটার যা এইচটিএমএল সাপোর্ট করে

Char

নাম্বার

Entity

 বর্ণনা
Α &#913; &Alpha; গ্রীক ক্যাপিটাল লেটার আলফা
Β &#914; &Beta; গ্রীক ক্যাপিটাল লেটার বিটা
Γ &#915; &Gamma; গ্রীক ক্যাপিটাল লেটার গামা
Δ &#916; &Delta; গ্রীক ক্যাপিটাল লেটার ডেলটা
Ε &#917; &Epsilon; গ্রীক ক্যাপিটাল লেটার EPSILON
Ζ &#918; &Zeta; গ্রীক ক্যাপিটাল লেটার যেটা

 

অন্যান্য আরও অনেক entities যা এইচটিএমএল সাপোর্ট করে

Char

নাম্বার

Entity

বর্ণনা
© &#169; &copy; কপিরাইট চিহ্ন
® &#174; &reg; নিবন্ধন চিহ্ন
€ &#8364; &euro; EURO চিহ্ন
™ &#8482; &trade; ট্রেডমার্ক
← &#8592; &larr; বামদিকের নির্দেশ
↑ &#8593; &uarr; উপরের নির্দেশ
→ &#8594; &rarr; ডানদিকের নির্দেশ
↓ &#8595; &darr; নিচের দিকের নির্দেশ
♠ &#9824; &spades; BLACK SPADE SUIT
♣ &#9827; &clubs; BLACK CLUB SUIT
♥ &#9829; &hearts; BLACK HEART SUIT
♦ &#9830; &diams; BLACK DIAMOND SUIT

 

Apr 08

এইচটিএমএল ইনট্রিগুলো (HTML Entities)

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

 

কিছু সংরক্ষিত অক্ষর অবশ্যই character entities দ্বারা পরিবর্তন করতে হয়।

এমনকি যেই অক্ষরগুলো কীবোর্ড এ নাই সেইগুলো পরিবর্তন করা সম্ভব

 

এইচটিএমএল Entities

কিছু অক্ষর এইচটিএমএল এ সংরক্ষিত করা আছে। যদি আমরা কোন টেক্সট এ ছোট চিহ্ন (<) এবং বড় চিহ্ন (>) ব্যবহার করি ব্রাউজার তাদের ট্যাগ দিয়ে মিক্স করে দিতে পারে।

character entities এইচটিএমএল এ কিছু সংরক্ষিত অক্ষর দেখাতে সাহায্য করে।

character entity গুলো নিচের মতন

&entity_name;
OR
&#entity_number;

 

যদি আমরা ছোট চিহ্ন ডিসপ্লে করতে চাই তাহলে লিখব  &lt; বা &#60;

নাম্বার এর পরিবর্তে নাম ব্যবহার করা বেশি উপকারী কারন এতে নামটা বেশি মনে থাকে। এর একটি অপকারিতা আছে কিছু কিছু ব্রাউজার entity নাম নাও পরতে পারে কিন্তু নাম্বার ঠিক পরতে পারে।

 

অবিচ্ছিন্ন স্থান (Non breaking space)

একই লাইন এ ফাকা জায়গা তৈরি করার জন্য &nbsp; ব্যবহার করা হয়। মনে রাখতে হবে ব্রাউজার সবসময় এইচটিএমএল পেজ এর অতিরিক্ত ফাকা জায়গা মুছে ফেলে কেবলমাত্র একটি ফাকা জায়গা রাখে। যদি আমি ১০ টি স্পেস দেই ব্রাউজার তার ৯ টাই মুছে ফেলে ১ টি লিখবে। যদি আমরা টেক্সট এ প্রকৃত ফাকা জায়গা পেতে চাই তাহলে ক্যারেক্টার ব্যবহার করতে হবে।

 

কিছু গুরুত্বপূর্ণ ক্যারেক্টার entities

ফলাফল বর্ণনা নাম প্রবেশকৃত নাম্বার
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

 

কিছু বৈশিষ্ট্যসূচক চিহ্ন

একটি বৈশিষ্ট্যসূচক চিহ্ন “glyph” লেখার বর্ণে যোগ করা হয়েছে। আবার কিছু বৈশিষ্ট্যসূচক চিহ্ন: grave ( ̀) এবং acute ( ́) কে বলা হয় accents (কথা)।

বৈশিষ্ট্যসূচক চিহ্ন বর্ণের উপরে , নিচে, পাশে এবং দুটি লেটার এর মাঝে হতে পারে। আলফানিউমেরিক ক্যারেক্টার এর কম্বিনেশন এ এই বৈশিষ্ট্যসূচক চিহ্নগুলো ব্যবহার করা হয়ে থাকে।

কিছু উদাহরণ নিচে দেওয়া হল

চিহ্ন বর্ণ গঠন ফলাফল
  ̀ a a&#768; à
  ́ a a&#769; á
̂ a a&#770; â
  ̃ a a&#771; ã
  ̀ O O&#768; Ò
  ́ O O&#769; Ó
̂ O O&#770; Ô
  ̃ O O&#771; Õ

 

Apr 08

Get Started with Cascading on Hortonworks Data Platform 2.1

Get Started with Cascading on Hortonworks Data Platform 2.1