HTML ফর্ম জাভাস্ক্রিপ্ট ইভেন্ট

বেশ কিছু দিন HTML এর নিয়মিত টিউটরিয়াল লিখছিলাম। সেখানে সর্ব শেষ টিউটরিয়াল ছিল ফর্ম ডিজাইনের উপরে। ওয়েবে ফর্ম ডিজাইন করার পর সাধারনত: তাকে কাজ করার জন্য জাভাস্ক্রিপ্ট বা পিএইচপি ব্যবহার করতে হয়। ফর্মের টেক্সটবক্স,ইনপুট বক্স,বাটন,চেকবক্স ইত্যাদির ক্লিক ডাবলক্লিক, ফোকাস,লস্ট ফোকাস ইত্যাদি ইভেন্ট সম্পর্কে আজকের আলোচনা। ছোট জাভাস্ক্রিপ্ট দিয়ে কাজটি উদ্ধার করতে হবে,তা না হলে সম্পুর্ণ বেপারটি বুঝা যাবে না।
tutorialbd,html,javascript

লিংক ইভেন্ট

onClick

এর মাধ্যমে ক্লিকের পরের কি হবে তা প্রকাশ করে দিতে পারেন। নিচের কোডটা দেখুন

<IMG SRC = http://tutorialbd.files.wordpress.com/2010/03/logo.gif onClick = “alert(‘This is Logo of TutorialBD.com’)”>

আউটপুট দেখুন: ছবিটিতে ক্লিক করলেই This is Logo of TutorialBD.com কমান্ডটি দেখা যাবে।

onDblClick

onDblClick এর জায়গায় onDblClick ণিখে কোড এক্সিকিউট করলে , ছবিটিতে ডাবল ক্লিক করলে একই ঘটনা ঘটবে।

mouseOut

মাউস কোন একটি লিঙ্কের উপর থেকে চলে গেলে,সেই ইভেন্টটি কাজ করবে।

mouseOver

মাউসটি কোন লিংকের উপরে আসলে সেই ইভেন্টটি কাজ করবে।

ইনপুট ইভেন্ট

blur

কোন একটি ইনপুট অবজেক্ট থেকে সরে গিয় অন্য অবজেক্টে কাজ করার সময়টাকে বুঝায়। (ফিজুয়ালবেসিকে এটাকে LostFocus বলা হয়।) সাধারনত: ডাটা চেক করতে এটি ব্যবহার করা হয়।নিচের কোডটা দেখুন।

<INPUT TYPE = text onBlur = “alert(‘Lost focus’)”>

এবার আউটপুট দেখুন। ইনপুট বক্সে কিছু লিখুন ।এবার অন্য কোথাও ক্লিক করুন। এলার্ট ব্কটি আসবে।

তাহলো আমরা একটি জাভাস্ক্রিপ্ট ফাংশনের মাধ্যমে এর ব্যবহারিক দিক দেখবো।

Enter email address <INPUT TYPE="text" VALUE=""          NAME="userEmail" onBlur=addCheck()>

<script type="text/javascript" language="JavaScript">

function addCheck() {
alert("Please check your email details are correct          before submitting")
}

</script>

পরবর্তিতে নিচের ইভেন্টগুলো আলোচনা করা হবে:

  • change
  • focus
  • reset
  • select
  • submit

টিউটরিয়ালবিডির ভক্ত হিসেবে আমি মনে করি ফিড সাবক্রাইব করার সুবিধা নিতে ভুলবেন না। আর টিউটরিয়ালবিডির লিংকটি আপনার সাইটের (যদি থাকে) কোন অংশে প্রদান করে-এগিয়ে চলার পথ সহজ করলে আমারা আরও নতুন নতুন টিউটরিয়াল নিয়ে হাজির হতে পারবো। ই-মেইলের মাধ্যমে অনেকেই টিউটিরয়াল পড়ছেন। এ পোস্ট লেখা পর্যন্ত প্রায় ৩০০+ জনকে প্রতিটি টিউটরিয়াল ই-মেইলের মাধ্যমে পাঠানো হচ্ছে। আপনি যদি ই-মেইল পাঠক হতে চান তাহলে এখানে আপনার ইমেইল আইডি দিয়ে দিন, তার পর নিজের মেইল ব্ক্স থেকে একটিভেট করে নিন। এছাড়াও টুইটারে,গুগল বাজ এবং ফেসবুকে টিউটরিয়ালবিডিকে পাবেন।

6 thoughts on “HTML ফর্ম জাভাস্ক্রিপ্ট ইভেন্ট”

  1. tanvir akanda

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

      1. tanvir akanda

        @টিউটো, ধন্যবাদ।বাংলায় ওয়েব ডিজাইনের উপর একটা পূর্ণাঙ্গ এবং ধারাবাহিক পোষ্ট দরকার।টিউটরিয়ালবিডিতে কি তা আমরা আশা করতে পারি?

    1. @tanvir akanda, অবশ্যই আশা করা যায়। আমরা অনেকটা এগিয়ে গিয়েছি। নিচের লিংকগুলোতে যথাক্রমে HTML, CSS, Javascript এর টিউটরিয়াল আছে।
      http://tutorialbd.com/bn/?cat=181
      http://tutorialbd.com/bn/?cat=240
      http://tutorialbd.com/bn/?cat=604

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

  2. Mir Hossain Khandakar

    আপনার দেওয়া টিউটোরিয়াল গুলি আমি নিয়মিত পড়ি। Webpage, Programming এ Professional হওয়ার জন্য আমাকে কি কি শিখতে হবে? যদি পরামশ দেন খুবই উপকার হত। ধন্যবাদ

    1. @Mir Hossain Khandakar,প্রথমত : আপনাকে HTML, CSS, Javascript শিখতে হবে । শুধু ওয়েব সাইটেই নয় বাস্তবে কারো সহযোগিতা নিয়ে কাজ শুরু করলে আরও ভাল করতে পারবেন।
      নিচের লিংকগুলোতে যথাক্রমে HTML, CSS, Javascript এর টিউটরিয়াল আছে।
      http://tutorialbd.com/bn/?cat=181
      http://tutorialbd.com/bn/?cat=240
      http://tutorialbd.com/bn/?cat=604

      আমার মনে হয়-ওয়েবডিজাইনিং শুরু করতে যতটুকু প্রয়োজন ততটুকু কাজ করে ফেলেছি। এখন আমাদের এগিয়ে যাওয়ার পালা। সাথে থাকুন ভাল থাকুন।

Leave a Comment