CSS3 এ সুন্দর অনুসন্ধান ফর্ম। একটি সুন্দর CSS3 অনুসন্ধান ফর্ম ডিজাইন করা

আমার সমালোচনা করা হয়েছিল, তারা বলে, লেআউটটি খারাপ, তবে আধুনিক HTML5 এবং CSS3 রয়েছে।

অবশ্যই, আমি বুঝতে পারি, সর্বশেষ মানগুলি দুর্দান্ত এবং সমস্ত কিছু। কিন্তু সত্য যে আমি, একটি নিয়ম হিসাবে, অর্ডার করার জন্য টাইপসেটিং তৈরি করি এবং সেখানে, বেশিরভাগ ক্ষেত্রে, বিভিন্ন ব্রাউজারে সম্পূর্ণ পরিচয় গুরুত্বপূর্ণ, যা সর্বশেষ প্রযুক্তি ব্যবহার করার অনুমতি দেয় না। অতএব, আমি প্রাথমিকভাবে ক্রস-ব্রাউজার সামঞ্জস্যের উপর ফোকাস করি এবং, অভ্যাসের বাইরে, "পুরানো উপায়ে" অনুসন্ধান ফর্মটি তৈরি করেছি।

সাধারণভাবে, এই পোস্টের মাধ্যমে আমি পরিস্থিতি সংশোধন করি (যারা শেষ নিবন্ধটি নিয়ে অসন্তুষ্ট ছিলেন তাদের জন্য =) এবং একই সার্চ ফর্মের লেআউটের আমার সংস্করণটি অফার করি, কিন্তু HTML5 এবং CSS3 প্রযুক্তি ব্যবহার করে।

ফলে কী ঘটে তার একটি উদাহরণ সম্ভব।

HTML5 এবং CSS3 ব্যবহার করে এই ফর্মটি তৈরি করার সময় আমরা কী হারাতে পারি

1. IE9 এবং নীচে - ডিফল্ট পাঠ্য (প্লেসহোল্ডার অ্যাট্রিবিউট) দেখতে পাবে না।
2. IE8 এবং নীচে - গোলাকার কোণ এবং ভিতরের ছায়া দেখতে পাবে না।
3. IE7 - আপনাকে এটির জন্য একটি ভিন্ন ফর্ম প্রস্থ উল্লেখ করতে হবে, কারণ এটি বক্স-সাইজিং সম্পত্তি সমর্থন করে না।
4. IE6 - কিন্তু আমরা এটিকে মোটেই বিবেচনা করি না =)

অন্যান্য আধুনিক ব্রাউজারে, সবকিছু ঠিক আছে। আমি বিশ্বাস করি যে উপরের ত্রুটিগুলি সমালোচনামূলক নয়, তাই আমার সাইটের জন্য আমি সাহসের সাথে সর্বশেষ প্রযুক্তি ব্যবহার করে একটি ফর্ম ব্যবহার করব।

অনুসন্ধান ফর্ম HTML কোড

এটি এই মত দেখায়:

পূর্ববর্তী নিবন্ধের ফর্মের সাথে তুলনা করে, HTML5 প্রযুক্তি অনুসারে নিম্নলিখিত পরিবর্তনগুলি করা হয়েছে:

1. type="text" বৈশিষ্ট্যটি type="search" দিয়ে প্রতিস্থাপিত হয়েছে।
2. ইনলাইন স্ক্রিপ্ট স্থানধারক="(!LANG:অনুসন্ধান" .!}

CSS কোড

এখানে মন্তব্য সহ সমস্ত প্রয়োজনীয় শৈলী রয়েছে:

অনুসন্ধান ( /* নকশার উপর নির্ভর করে ফর্মের প্রয়োজনীয় প্রস্থ সেট করুন ** ফর্মটি সমস্যা ছাড়াই প্রসারিত হয় */ প্রস্থ: 35%; /* জমা দেওয়ার বোতামটি একেবারে অবস্থান করা হবে, ** তাই এই বৈশিষ্ট্যটি প্রয়োজন */ অবস্থান: আপেক্ষিক; ) .সার্চ ইনপুট ( /* ইনপুটগুলিতে সীমানা নিষ্ক্রিয় করুন */ বর্ডার: কোনটি নয়; ) /* ইনপুট ক্ষেত্রের জন্য শৈলী */ .অনুসন্ধান .ইনপুট ( /* ইনপুট ক্ষেত্রটিকে ফর্মের সম্পূর্ণ প্রস্থে প্রসারিত করুন */ প্রস্থ : 100%; /* উপরের (8px) এবং নীচে (9px) প্যাডিংয়ের কারণে ** ফর্মের উচ্চতা সামঞ্জস্য করুন ** ডানদিকে প্যাডিং (37px) বাম দিকের চেয়ে বেশি, ** কারণ জমা বোতামটি হবে সেখানে রাখা */ প্যাডিং: 8px 37px 9px 15px; /* ইনপুট ক্ষেত্রের প্রস্থ (100%) করতে ইনলাইন প্যাডিং অন্তর্ভুক্ত */ -moz-বক্স-সাইজিং: বর্ডার-বক্স; বক্স-সাইজিং: বর্ডার-বক্স; / * ইনলাইন শ্যাডো যোগ করুন */ বক্স-ছায়া: ইনসেট 0 0 5px rgba(0,0 ,0,0.1), ইনসেট 0 1px 2px rgba(0,0,0,0.3); /* বৃত্তাকার কোণ */ বর্ডার-ব্যাসার্ধ: 20px; ব্যাকগ্রাউন্ড: #EEE; ফন্ট: 13px Tahoma, Arial, sans-serif; রঙ: #555; রূপরেখা: কোনোটিই নয়; ) /* ফোকাসে ইনপুট ক্ষেত্রের চেহারা পরিবর্তন করুন */ .search .input:focus ( box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0, 0,0.4 ); ব্যাকগ্রাউন্ড: #E8E8E8; রঙ: #333; ) /* সাবমিট বোতামটি স্টাইল করুন */ .সার্চ .সাবমিট ( /* ফর্মের ডান প্রান্ত থেকে একেবারে বোতামটি অবস্থান করুন */ অবস্থান: পরম; শীর্ষ: 0; ডান: 0; প্রস্থ: 37px; /* ফর্মের সম্পূর্ণ উচ্চতায় বোতামটি প্রসারিত করুন */ উচ্চতা: 100%; কার্সার: পয়েন্টার; ব্যাকগ্রাউন্ড: url(https://lh4.googleusercontent.com/-b- 5aBxcxarY/UAfFW9lVyjI/AAAAAABUg/gQtEXuPuIds/s13/go. png) 50% নো-রিপিট; /* সাবমিট বোতামে স্বচ্ছতা যোগ করুন */ অস্বচ্ছতা: 0.5; ) /* হোভারে জমা বোতামের স্বচ্ছতা পরিবর্তন করুন। */ .submit:hover (অস্বচ্ছতা: 0.8; ) /* এই বৈশিষ্ট্যটির জন্য প্রয়োজন যাতে ব্রাউজারগুলি ** Chrome এবং Safari ইনপুটগুলি স্টাইল করতে পারে */ ইনপুট ( -ওয়েবকিট-আদর্শ: কিছুই নয়;)

এবং সংস্করণ 9 এর নীচে IE এর জন্য শৈলী:

/* সংস্করণ 9 এর নিচে IE এর জন্য আলাদা স্টাইল সেট করুন */ *+html .search ( /* IE7 এর জন্য অন্যান্য ব্রাউজারগুলির জন্য প্রস্থ সামঞ্জস্য করুন এবং একটি ডান ** প্যাডিং যোগ করুন যাতে জমা বোতামটি জায়গায় ফিট হয় */ প্রস্থ: 28%; প্যাডিং : 0 52px 0 0; ) .সার্চ .ইনপুট ( সীমানা: 1px কঠিন #DFDFDF; বর্ডার-টপ: 1px সলিড #B3B3B3; প্যাডিং-টপ: 7px; প্যাডিং-বটম: 8px; ) .সার্চ .ইনপুট:ফোকাস ( সীমানা: 1px সলিড #CFCFCF; বর্ডার-টপ: 1px সলিড #999; ) .সার্চ .সাবমিট ( ফিল্টার: আলফা(অস্বচ্ছতা=50); ) .অনুসন্ধান করুন। জমা দিন: হভার ( ফিল্টার: আলফা(অস্বচ্ছতা=80); )

পুনশ্চ.আগের নিবন্ধে মন্তব্যের জন্য সমালোচকদের ধন্যবাদ! আপনাকে ধন্যবাদ, আমার মাথায় কিছু নতুন লেআউট মুহূর্ত রয়েছে।

অনুসন্ধান ফর্মগুলির জন্য দুটি বিকল্প যা আপনার সাইটে স্থান বাঁচায়৷ ক্লিক করা হলে, ফর্মটি টেক্সট এন্ট্রির জন্য প্রসারিত হয়। শুধুমাত্র ব্যবহৃত CSS3.

এইচটিএমএল

সঙ্গে সহজ ফর্ম html5ট্যাগ:

css

প্রথম, এর জন্য শৈলী পুনরায় আরম্ভ করা যাক ওয়েবকিটযে ব্রাউজারগুলি সার্চ ইঞ্জিনে যোগ করার প্রবণতা রয়েছে ইনপুটট্যাগ ফ্রেম, ক্লোজ আইকন। অতএব, আমরা এই সমস্ত অতিরিক্ত অপসারণ করব:

ইনপুট ( রূপরেখা: কিছুই নয়; ) ইনপুট ( -ওয়েবকিট-আদর্শ: টেক্সটফিল্ড; -ওয়েবকিট-বক্স-সাইজিং: সামগ্রী-বক্স; ফন্ট-ফ্যামিলি: ইনহেরিট; ফন্ট-সাইজ: 100%; ) ইনপুট::-ওয়েবকিট-সার্চ-সজ্জা , ইনপুট::-ওয়েবকিট-সার্চ-বাতিল বোতাম (প্রদর্শন: কিছুই নয়; /* অনুসন্ধান এবং বাতিল আইকন মুছে ফেলুন */ )

আসুন একটি অনুসন্ধান ফর্ম তৈরি করি:

আমরা সমস্ত বৈশিষ্ট্যের উপর নির্ভর করব না, শুধু মনে রাখবেন যে অনুসন্ধান ইনপুটের প্রস্থের প্রথমে একটি মান আছে 55px, এবং প্রসারিত হবে 130pxফোকাসের মুহূর্তে : ফোকাস. সম্পত্তি স্থানান্তরআপনি প্রস্থ এই পরিবর্তন অ্যানিমেট করতে পারবেন. দীপ্তি জন্য ব্যবহৃত বক্স ছায়া:

ইনপুট (পটভূমি: #ededed url(search-icon.png) নো-রিপিট 9px কেন্দ্র; সীমানা: কঠিন 1px #ccc; প্যাডিং: 9px 10px 9px 32px; প্রস্থ: 55px; -webkit-বর্ডার-ব্যাসার্ধ: 10em-zmo; - বর্ডার-ব্যাসার্ধ: 10em; বর্ডার-ব্যাসার্ধ: 10em; -ওয়েবকিট-ট্রানজিশন: সব .5s; -moz-ট্রানজিশন: সব .5s; ট্রানজিশন: সব .5s; ) ইনপুট: ফোকাস ( প্রস্থ: 130px; ব্যাকগ্রাউন্ড-রং: # fff; বর্ডার-রঙ: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); বক্স-ছায়া: 0 0 5px rgba(109,207,246,.5); )

AT ডেমো 2 ইনপুটঅনুসন্ধান ক্ষেত্রটি আরও কমপ্যাক্ট - শুধুমাত্র আইকনটি প্রদর্শিত হবে৷ এটিতে ক্লিক করলে ইনপুট ক্ষেত্রের প্রস্থও পরিবর্তন হবে।

#demo-b ইনপুট (প্রস্থ: 18px; প্যাডিং-বাম: 10px; রঙ: স্বচ্ছ; কার্সার: পয়েন্টার; ) #demo-b ইনপুট: হোভার (ব্যাকগ্রাউন্ড-রঙ: #fff;) #demo-b ইনপুট: ফোকাস ( প্রস্থ : 130px; প্যাডিং-বাম: 32px; রঙ: #000; ব্যাকগ্রাউন্ড-রঙ: #fff; কার্সার: স্বয়ংক্রিয়; )

এবং পাঠ্যটি স্বচ্ছ করা হয়েছে:

#ডেমো-বি ইনপুট:-মোজ-প্লেসহোল্ডার (রঙ: স্বচ্ছ; ) #ডেমো-বি ইনপুট::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডার (রঙ: স্বচ্ছ; )

ফর্মটি সমস্ত আধুনিক ব্রাউজারে কাজ করে ক্রোম, ফায়ারফক্স, সাফারি, এবং IE8+.

যেকোনো ওয়েবসাইটের সবচেয়ে বেশি ব্যবহৃত উপাদানগুলোর মধ্যে একটি হল সার্চ ফর্ম। আপনি যদি আপনার সাইটের ব্যবহারযোগ্যতা উন্নত করতে চান এবং আপনি যা খুঁজছেন তা খুঁজে পাওয়া আরও সহজ করতে চান, তাহলে আপনার একটি অনুসন্ধান ফর্ম ডিজাইন করার বিষয়ে গুরুতর হওয়া উচিত।

তাই, আজ আমরা আপনাকে CSS3 বৈশিষ্ট্য ব্যবহার করে একটি অনুসন্ধান ফর্ম ডিজাইন করার বিষয়ে বলতে চাই।

আপনি সম্ভবত অতীতে একটি CSS3 অনুসন্ধান ফর্ম ডিজাইন করার টিউটোরিয়াল খুঁজে পেয়েছেন, কিন্তু আজ আমরা আপনাকে একটি সামান্য ভিন্ন বিকল্প অফার করতে চাই - বক্স-শ্যাডো প্যারামিটার ব্যবহার করে বাস্তবায়িত একটি 3D প্রভাব সহ একটি অনুসন্ধান ফর্ম।

মার্কআপ

নীচে আপনি এই ফর্মটি তৈরি করতে ব্যবহৃত HTML কোড দেখতে পারেন৷ দয়া করে মনে রাখবেন যে আমাদের ফিলারটি HTML5 ব্যবহার করে তৈরি করা হয়েছে এবং আমরা সমস্ত প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করেছি।

প্রথমে আমরা HTML5 এ প্রবর্তিত type="search" ব্যবহার করতে চেয়েছিলাম, কিন্তু তারপর অনেক আধুনিক ব্রাউজারগুলির সাথে সামঞ্জস্যহীনতার কারণে আমাদের মন পরিবর্তন করেছি৷ এখন মূল মানগুলি ওভাররাইট করতে আমাদের CSS কোডের কয়েকটি অতিরিক্ত লাইন যুক্ত করতে হবে।

আসুন একটি সুন্দর CSS3 অনুসন্ধান ফর্ম তৈরি করতে ব্যবহৃত ন্যূনতম শৈলীগুলি একবার দেখে নেওয়া যাক:

ফর্ম-র্যাপার (
প্রস্থ: 450px
প্যাডিং: 8px
মার্জিন: 100px অটো;
যথোপযুক্ত সৃষ্টিকর্তা;
সীমানা-প্রস্থ: 1px;
বর্ডার-স্টাইল: কঠিন
বর্ডার-রং: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-ওয়েবকিট-বক্স-শ্যাডো: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
বক্স-ছায়া: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-মোজ-বর্ডার-ব্যাসার্ধ: 10px;
-ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 10px;
সীমানা-ব্যাসার্ধ: 10px
ব্যাকগ্রাউন্ড-রঙ: #f6f6f6;
ব্যাকগ্রাউন্ড-ইমেজ: -ওয়েবকিট-গ্রেডিয়েন্ট (লিনিয়ার, বাম উপরে, বাম নীচে, থেকে(#f6f6f6), থেকে(#eae8e8));
ব্যাকগ্রাউন্ড-ইমেজ: -ওয়েবকিট-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #f6f6f6, #eae8e8);
ব্যাকগ্রাউন্ড-ইমেজ: -moz-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #f6f6f6, #eae8e8);
ব্যাকগ্রাউন্ড-ইমেজ: -ms-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #f6f6f6, #eae8e8);
ব্যাকগ্রাউন্ড-ইমেজ: -o-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #f6f6f6, #eae8e8);
ব্যাকগ্রাউন্ড-ইমেজ: লিনিয়ার-গ্রেডিয়েন্ট (শীর্ষ, #f6f6f6, #eae8e8);
}

ফর্ম-র্যাপার #অনুসন্ধান(
প্রস্থ: 330px
উচ্চতা: 20px;
প্যাডিং: 10px 5px;
float: বাম;
ফন্ট: বোল্ড 16px "lucida sans", "trebuchet MS", "Tahoma";
সীমানা: 1px কঠিন #ccc;
-moz-box-shadow: 0 1px 1px #ddd ইনসেট, 0 1px 0 #fff;
-ওয়েবকিট-বক্স-শ্যাডো: 0 1px 1px #ddd ইনসেট, 0 1px 0 #fff;
বক্স-ছায়া: 0 1px 1px #ddd ইনসেট, 0 1px 0 #fff;
-মোজ-বর্ডার-ব্যাসার্ধ: 3px;
-ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 3px;
সীমানা-ব্যাসার্ধ: 3px
}

ফর্ম-র্যাপার # অনুসন্ধান: ফোকাস (
রূপরেখা: 0;
বর্ডার-রং: #aaa;
-moz-box-shadow: 0 1px 1px #bbb ইনসেট;
-ওয়েবকিট-বক্স-ছায়া: 0 1px 1px #bbb ইনসেট;
বক্স-ছায়া: 0 1px 1px #bbb ইনসেট;
}

ফর্ম-র্যাপার #অনুসন্ধান::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডার (
রঙ: #999;
ফন্ট-ওজন: স্বাভাবিক
}

ফর্ম-র্যাপার #অনুসন্ধান:-মোজ-প্লেসহোল্ডার (
রঙ: #999;
ফন্ট-ওজন: স্বাভাবিক
}

ফর্ম-র্যাপার #অনুসন্ধান:-এমএস-ইনপুট-প্লেসহোল্ডার (
রঙ: #999;
ফন্ট-ওজন: স্বাভাবিক
}

ফর্ম-র্যাপার # জমা দেওয়া (
float: right;
সীমানা: 1px কঠিন #00748f;
উচ্চতা: 42px;
প্রস্থ: 100px
প্যাডিং: 0;
কার্সার: পয়েন্টার;
ফন্ট: বোল্ড 15px এরিয়াল, হেলভেটিকা;
রঙ: #fafafa;
টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর;
ব্যাকগ্রাউন্ড-রঙ: #0483a0;
ব্যাকগ্রাউন্ড-ইমেজ: -ওয়েবকিট-গ্রেডিয়েন্ট (লিনিয়ার, বাম উপরে, বাম নীচে, থেকে(#31b2c3), থেকে(#0483a0));
ব্যাকগ্রাউন্ড-ইমেজ: -ওয়েবকিট-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #31b2c3, #0483a0);
ব্যাকগ্রাউন্ড-ইমেজ: -moz-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #31b2c3, #0483a0);
ব্যাকগ্রাউন্ড-ইমেজ: -ms-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #31b2c3, #0483a0);
ব্যাকগ্রাউন্ড-ইমেজ: -o-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #31b2c3, #0483a0);
ব্যাকগ্রাউন্ড-ইমেজ: লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #31b2c3, #0483a0);
-মোজ-বর্ডার-ব্যাসার্ধ: 3px;
-ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 3px;
সীমানা-ব্যাসার্ধ: 3px
পাঠ্য-ছায়া: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-বক্স-শ্যাডো: 0 1px 0 rgba(255, 255, 255, 0.3) ইনসেট, 0 1px 0 #fff;
-ওয়েবকিট-বক্স-শ্যাডো: 0 1px 0 rgba(255, 255, 255, 0.3) ইনসেট, 0 1px 0 #fff;
বক্স-ছায়া: 0 1px 0 rgba(255, 255, 255, 0.3) ইনসেট, 0 1px 0 #fff;
}

ফর্ম-র্যাপার # জমা দিন: হোভার,
.form-wrapper #submit:focus (
ব্যাকগ্রাউন্ড-রঙ: #31b2c3;
ব্যাকগ্রাউন্ড-ইমেজ: -ওয়েবকিট-গ্রেডিয়েন্ট (লিনিয়ার, বাম উপরে, বাম নীচে, থেকে(#0483a0), থেকে(#31b2c3));
ব্যাকগ্রাউন্ড-ইমেজ: -ওয়েবকিট-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #0483a0, #31b2c3);
ব্যাকগ্রাউন্ড-ইমেজ: -moz-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #0483a0, #31b2c3);
ব্যাকগ্রাউন্ড-ইমেজ: -ms-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #0483a0, #31b2c3);
ব্যাকগ্রাউন্ড-ইমেজ: -o-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #0483a0, #31b2c3);
ব্যাকগ্রাউন্ড-ইমেজ: লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #0483a0, #31b2c3);
}

ফর্ম-র্যাপার # জমা দিন: সক্রিয় (
রূপরেখা: 0;
-moz-বক্স-ছায়া: 0 1px 4px rgba(0, 0, 0, 0.5) ইনসেট;
-ওয়েবকিট-বক্স-শ্যাডো: 0 1px 4px rgba(0, 0, 0, 0.5) ইনসেট;
বক্স-ছায়া: 0 1px 4px rgba(0, 0, 0, 0.5) ইনসেট;
}

ফর্ম-র্যাপার # জমা দিন::-মোজ-ফোকাস-ইনার (
সীমানা: 0;
}
ব্রাউজার সমর্থন

নীচে আপনি আমাদের অনুসন্ধান ফর্ম দেখানো কিছু স্ক্রিনশট দেখতে পারেন. আপনার লক্ষ্য করা উচিত যে পৃষ্ঠাটি ব্রাউজারের একটি পুরানো সংস্করণে খোলা হলে এটিও ভাল কাজ করে। আমি আরও যোগ করতে চাই যে এই CSS3 অনুসন্ধান ফর্মটি ব্যবহার করার জন্য সম্পূর্ণরূপে প্রস্তুত।

আধুনিক ব্রাউজার ক্রোম, ফায়ারফক্স, সাফারি, অপেরা, IE10:

ভাল খবর হল যে IE10 এছাড়াও HTML5 ফিলার সমর্থন করে।

IE এর উত্তরাধিকার সংস্করণ (6/7/8):

উপসংহারে

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

একটি অনুসন্ধান ব্লক তৈরি করতে একটি CSS3 ফর্ম ব্যবহার করার পাশাপাশি, আপনি এটিকে একটি অনুমোদন ফর্ম বা একটি সদস্যতা ফর্ম তৈরি করতে সহজেই মানিয়ে নিতে পারেন৷

নিবন্ধটি সাইট অনুসন্ধান ফর্ম লেআউটের বৈশিষ্ট্যগুলি বর্ণনা করে, শব্দার্থিক কোড মার্কআপ, CSS3 ডিজাইন, এবং শেষে সামান্য jQuery ম্যাজিকের একটি উদাহরণ প্রদান করে৷

• মার্কআপ

  HTML5 এর আবির্ভাবের আগে, অনুসন্ধান ফর্মটি একটি নিয়মিত পাঠ্য ক্ষেত্রে তৈরি হয়েছিল, ধীরে ধীরে আমাদের জীবনে মার্কআপ ভাষার একটি নতুন সংস্করণের আগমনের সাথে, এটির জন্য একটি বিশেষ ধরণের অনুসন্ধান ক্ষেত্র উপস্থিত হয়েছিল। সুতরাং একটি আধুনিক সাইটের এইচটিএমএলে, আমরা এইরকম কিছু দেখতে পারি:

  কোড ফলাফল FF, Opera, IE9:

  এবং ওয়েবকিট ইঞ্জিন (Chrome, Safari) এর উপর ভিত্তি করে ব্রাউজারে একটু ভিন্নভাবে:

  ওয়েবকিটে সার্চ বক্স

  আপনি দেখতে পাচ্ছেন, যখন ক্ষেত্রে ফোকাস যুক্ত করা হয়, একটি হাইলাইট যোগ করা হয় এবং পাঠ্য প্রবেশ করার সময়, একটি পরিষ্কার বোতাম প্রদর্শিত হয়, যখন আপনি এটিতে ক্লিক করেন, ক্ষেত্রের বিষয়বস্তুগুলি মুছে ফেলা হয়, যা নিজেই বেশ সুবিধাজনক।

  CSS স্টাইলিং ছাড়া, আমাদের অনুসন্ধান ফর্মটি এখন পর্যন্ত বেশ সহজ দেখায়, এই নিবন্ধে আমরা এরকম কিছু করার চেষ্টা করব:

  
  উদাহরণ স্বরূপ: অনুসন্ধান ফর্ম বিন্যাস

  পুরানো ব্রাউজারগুলির জন্য সমর্থন পরিকল্পনা করা না হলে, একটি খালি অ-অর্থবোধক উপাদান

  ছদ্ম-উপাদান দিয়ে প্রতিস্থাপন করা যেতে পারে: আগে।

  অনুসন্ধান ফর্ম নকশা বৈশিষ্ট্য

  যেহেতু আমি প্রচুর CSS3 বৈশিষ্ট্য ব্যবহার করার সিদ্ধান্ত নিয়েছি, তাই এই অলৌকিক কাজগুলি পুরানো ইন্টারনেট এক্সপ্লোরার ব্রাউজারগুলিতে কাজ করবে না এবং ক্রস-ব্রাউজার সামঞ্জস্য অর্জনের জন্য, আপনাকে ক্রাচ সংযোগ করতে হবে, ছবি সহ কিছু করতে হবে ইত্যাদি।

  প্রথমত, আমি কিছু বৈশিষ্ট্যের প্রতি দৃষ্টি আকর্ষণ করতে চাই, যথা:

  • শৈলীকরণ ওয়েবকিট ব্রাউজারে
  • স্থানধারক স্টাইলিং

  Chrome, Safari ব্রাউজারে ফর্ম শৈলী অনুসন্ধান করুন

  .search ক্লাসের সাথে ফিল্ডে কিছু স্টাইল যোগ করা যাক:

  অনুসন্ধান (পটভূমি: #d8e6ef; সীমানা: 1px কঠিন #000; )

  স্ক্রিনশট ফলাফল:

  এফএফ, অপেরা, ক্রোম এবং সাফারি ব্রাউজারে অনুসন্ধান করুন

  ব্রাউজারগুলিতে যথারীতি, বিস্ময়কর এবং বিভ্রান্তি রয়েছে, ক্রোমে সীমানা একরকম অদ্ভুতভাবে কাজ করে (মার্জিন প্রদর্শিত হয়, যেন আমরা প্যাডিং সেট করছি), সাফারি নিয়মগুলি সম্পূর্ণরূপে উপেক্ষা করে। কিন্তু এই পরিস্থিতিতে একটি সমাধান আছে, আমরা এই নিয়মটি CSS কোডে যোগ করি:

  অনুসন্ধান ( -ওয়েবকিট-আবির্ভাব: কিছুই নয়;)

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

  অনুসন্ধান:ফোকাস ( রূপরেখা: কোনোটিই নয়; /* সরানো ফোকাস হাইলাইট */ -moz-box-shadow: inset 0 0 2px #000; -o-box-shadow: inset 0 0 2px #000; -webkit-box-shadow : ইনসেট 0 0 2px #000; বক্স-শ্যাডো: ইনসেট 0 0 2px #000; /* সমস্ত ব্রাউজারগুলির জন্য একটি বিকল্প হিসাবে অভ্যন্তরীণ-ছায়া যোগ করা হয়েছে */ )

  এটি পরিষ্কার বোতাম পরিত্রাণ পেতে অবশেষ। প্রকৃতপক্ষে, এটি সহজে একটি সাধারণ ক্রসকে কিছু ধরণের ব্যাকগ্রাউন্ড, অবস্থান ইত্যাদির সাথে প্রতিস্থাপন করে স্টাইল করা যেতে পারে, তবে আমার উদাহরণে এটির প্রয়োজন হবে না:

  /* শুধুমাত্র ক্লাস সার্চ সহ উপাদানের জন্য নিয়ম */ .search::-webkit-search-cancel-button ( display: none; /* মুছে ফেলা পরিষ্কার বোতাম */ ) /* অথবা নথিতে টাইপ অনুসন্ধান সহ সমস্ত ক্ষেত্র */ ইনপুট : :-ওয়েবকিট-সার্চ-বাতিল-বোতাম (প্রদর্শন: কিছুই নয়;)

  প্লেসহোল্ডার টেক্সট টুলটিপ ফরম্যাটিং

  দুর্ভাগ্যবশত, একটি টেক্সট ইঙ্গিত সহ, সবকিছু প্রথম নজরে মনে হওয়ার চেয়ে একটু বেশি জটিল। প্রথমত, এটি IE9-এ কাজ করে না, পুরানো ব্রাউজারগুলির উল্লেখ না করে, তাই জাভাস্ক্রিপ্ট এমন গুরুত্বপূর্ণ জায়গায় ব্যবহার করা উচিত যেখানে ক্ষেত্রে কিছু পাঠ্য প্রাথমিকভাবে প্রয়োজন। দ্বিতীয়ত, ফায়ারফক্স, ক্রোম, সাফারি ব্রাউজারে ডিজাইন করার জন্য প্লেসহোল্ডার নিজেকে ধার দেয় না এবং অপেরাকে মোটেও ধার দেয় না:

  :-moz-প্লেসহোল্ডার ( রঙ: #304e62; /* FF এ রঙ পরিবর্তন করা হয়েছে */ ) ::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডার (রঙ: #304e62; /* ওয়েবকিটে রঙ পরিবর্তন করা হয়েছে */ )

  অনুগ্রহ করে মনে রাখবেন যে এই নির্বাচকরা কাজ করবে না যদি তারা কমা দ্বারা পৃথক করা হয়, প্রতিটিকে অবশ্যই একটি নতুন লাইনে শুরু করতে হবে।

  আমি বিশেষ মুহূর্তগুলি বিবেচনা করেছি যেখানে অসুবিধা দেখা দিতে পারে, বাকিগুলি কম বা কম অভিজ্ঞ লেআউট ডিজাইনারের জন্য সমস্যা সৃষ্টি করবে না।

  jQuery স্ক্রিপ্ট

  অবশেষে, আমাদের ফর্মে কিছু স্ক্রিপ্ট যোগ করা যাক, যথা:

  • আসুন অনুরোধটি বাতিল করি এবং একটি খালি ক্ষেত্র পাঠানোর সময় একটি ত্রুটি বার্তা প্রদর্শন করি
  • ক্ষেত্রের উপর ফোকাস করার সময়, নীচে একটি ছোট টুলটিপ যোগ করুন

  jQ এর শক্তি দিয়ে এই সব বাস্তবায়ন করা খুব সহজ, আমি মন্তব্য সহ নিম্নলিখিত কোড পেয়েছি:

  $(function() ( /* হ্যান্ডেল ফর্ম জমা */ $(.search-form").submit(function() ( var errVal = "খালি অনুরোধ"; /* যদি ক্ষেত্র খালি থাকে বা errVal মান থাকে */ যদি ( $(.search").val() == "" || $(.search").val() == errVal) ( /* ক্ষেত্রে errVal মান যোগ করুন, পটভূমির রঙ পরিবর্তন করুন এবং */ $( " .search").val(errVal).css((backgroundColor: "rgba(0,0,0,.1)")); /* মিথ্যা ফেরত - ফর্মটি জমা দেওয়া হয়নি */ মিথ্যা ফেরত; );) ); / * যখন ফিল্ড ফোকাস করা হয় */ $(. search").focus(function() ( /* ফিল্ডের মান খালিতে সেট করুন, ব্যাকগ্রাউন্ডের রঙ ডিফল্ট */ $(this).val("") এ সেট করুন। css((backgroundColor : "#d8e6ef")); /* টুলটিপ দেখান */ $(."notice").fadeIn(400); )); /* যখন ফোকাস মুছে ফেলা হয় */ $(.search")। blur(ফাংশন() ( /* টুলটিপ সরান */ $(."notice").fadeOut(400); )); ));

  অবশ্যই, দ্রুত স্ক্রিপ্ট অপারেশনের জন্য স্ক্রিপ্টের ক্লাসগুলিকে শনাক্তকারীর সাথে প্রতিস্থাপন করা ভাল, এবং যদি একই ক্লাস সহ অন্যান্য উপাদানগুলি নথিতে উপস্থিত হয় তবে তারা স্ক্রিপ্টটি ভাঙবে না।

  ফলাফল

  এইভাবে, আমরা সাইটের জন্য অনুসন্ধান ফর্মটি ডিজাইন এবং প্রোগ্রাম করেছি, এটি Firefox, Chrome, Opera, Safari এবং IE9+ এর সর্বশেষ সংস্করণে কাজ করে। একটি দৃঢ় ইচ্ছার সাথে, আপনি কমপক্ষে IE6 দিয়ে শুরু করে একটি কম-বেশি ক্রস-ব্রাউজার সংস্করণ তৈরি করতে পারেন।

  চেক করা হয়েছে

  • ইন্টারনেট এক্সপ্লোরার 9+
  • অপেরা
  • ফায়ারফক্স
  • ক্রোম
  • সাফারি

  প্রকল্পে সাহায্য করুন

অনুসন্ধান বাক্স সম্ভবত সবচেয়ে সাধারণ ব্যবহারকারী ইন্টারফেস উপাদান এক. ইন্টারফেস ব্যবহারযোগ্যতার স্তরে কাজ করার সময়, একটি আড়ম্বরপূর্ণ অনুসন্ধান ক্ষেত্র যুক্ত করতে চাওয়া খুব সাধারণ। এই টিউটোরিয়ালে, আমরা সিউডো-এলিমেন্ট ব্যবহার করে এমন একটি জনপ্রিয় উপাদান তৈরি করব।

এইচটিএমএল মার্কআপ

এই ধরনের একটি ক্ষেত্র প্রস্তুত করতে, মার্কআপ ন্যূনতম হবে।

এটি বিশেষ HTML5 স্থানধারক এবং প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করে:

• স্থানধারক- ফিল্ড ইনপুট ফোকাস পাওয়ার আগে এই অ্যাট্রিবিউট ফিল্ডে টেক্সটের আউটপুট সেট করে, তারপর টেক্সট লুকানো হয়।
• প্রয়োজনীয়- এই বৈশিষ্ট্যটি ফর্ম জমা দেওয়ার আগে ইনপুট ক্ষেত্রে তথ্য উপস্থিতির জন্য একটি বাধ্যতামূলক শর্ত সেট করে৷

HTML5-এরও টাইপ অ্যাট্রিবিউটের একটি নতুন অর্থ রয়েছে: type="search"। কিন্তু এটি ব্রাউজারে ভালোভাবে সমর্থিত নয়, তাই আমরা আপাতত এটি ব্যবহার করব না।

এইচটিএমএল উপাদান যেমন img এবং ইনপুট কোন বিষয়বস্তু নেই. অতএব, একটি ছদ্ম-উপাদান যেমন :before বোতামের জন্য কোনো তীর প্রদর্শন করবে না।

আমাদের ক্ষেত্রে এই সমস্যার সমাধান হল ইনপুট type="submit" এর পরিবর্তে বোতাম type="submit" ব্যবহার করা। তাই আমরা ENTER কী ব্যবহার করে ফর্মটি রাখি।

css

নীচে আমাদের ডেমোর জন্য প্রয়োজনীয় শৈলীগুলি রয়েছে:

পাঠ্য মোড়ানো বাতিল করুন

Cf:আগে, .cf:পরে( বিষয়বস্তু:""; প্রদর্শন:টেবিল; ) .cf:পরে (স্পষ্ট:উভয়; ) .cf( জুম:1; )

ফর্ম উপাদান

ভালো স্পষ্টতার জন্য পাঠের কোডে ব্রাউজার উপসর্গ দেখানো হয় না। আপনি উৎস টেক্সট সম্পূর্ণ কোড দেখতে পারেন.

/* ফর্ম কন্টেইনার স্টাইল করা */ .ফর্ম-র্যাপার (প্রস্থ: 450px; প্যাডিং: 15px; মার্জিন: 150px অটো 50px অটো; ব্যাকগ্রাউন্ড: #444; ব্যাকগ্রাউন্ড: rgba(0,0,0,.2); বর্ডার-ব্যাসার্ধ : 10px; বক্স-ছায়া: 0 1px 1px rgba(0,0,0,.4) ইনসেট, 0 1px 0 rgba(255,255,255,.2); ) /* টেক্সট ইনপুট বক্স স্টাইল করুন */ .ফর্ম-র্যাপার ইনপুট ( প্রস্থ: 330px; উচ্চতা: 20px; প্যাডিং: 10px 5px; float: left; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; সীমানা: 0; ব্যাকগ্রাউন্ড: #eee; সীমানা-ব্যাসার্ধ: 3px 0 0 3px; ) .ফর্ম-র্যাপার ইনপুট:ফোকাস ( রূপরেখা: 0; ব্যাকগ্রাউন্ড: #fff; বক্স-ছায়া: 0 0 2px rgba(0,0,0,.8) ইনসেট; ) .form-wrapper ইনপুট::- ওয়েবকিট -ইনপুট-প্লেসহোল্ডার (রঙ: #999; ফন্ট-ওজন: স্বাভাবিক; ফন্ট-স্টাইল: ইটালিক; ) .ফর্ম-র্যাপার ইনপুট:-মোজ-প্লেসহোল্ডার (রঙ: #999; ফন্ট-ওয়েট: স্বাভাবিক; ফন্ট-স্টাইল: italic ; ) .form-wrapper ইনপুট:-ms-input-placeholder ( color: #999; font-weight: normal; font-style: italic; ) /* ফর্ম জমা দেওয়ার বোতাম */ .form-wrapper বাটন ( overflow: দৃশ্যমান অবস্থান: আপেক্ষিক; float: right; সীমানা: 0; প্যাডিং: 0; কার্সার: পয়েন্টার; উচ্চতা: 40px; প্রস্থ: 110px ফন্ট: বোল্ড 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; রঙ: #fff; টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর; পটভূমি: #d83c3c; সীমানা-ব্যাসার্ধ: 0 3px 3px 0; পাঠ্য-ছায়া: 0 -1px 0 rgba(0, 0,0, .3); ) .ফর্ম-র্যাপার বোতাম:হোভার (ব্যাকগ্রাউন্ড: #e54040; ) .ফর্ম-র্যাপার বোতাম: সক্রিয়, .ফর্ম-র্যাপার বোতাম:ফোকাস (পটভূমি: #c42f2f; রূপরেখা: 0; ) .ফর্ম-র্যাপার বোতাম: আগে ( / * বাম তীর */ বিষয়বস্তু: ""; অবস্থান: পরম; সীমানা-প্রস্থ: 8px 8px 8px 0; বর্ডার-স্টাইল: কঠিন কঠিন কোনটি নয়; বর্ডার-রঙ: স্বচ্ছ #d83c3c স্বচ্ছ; শীর্ষ: 12px; বাম: -6px; ) .ফর্ম-র্যাপার বোতাম:হোভার:বিফোর (বর্ডার-ডান-রং: #e54040; ) .ফর্ম-র্যাপার বোতাম:ফোকাস: আগে, .ফর্ম-র্যাপার বোতাম: সক্রিয়: আগে (বর্ডার-ডান-রং: #c42f2f; ) .form-wrapper button::-moz-focus-inner ( /* Mozilla Firefox এ বোতামের পাশের অতিরিক্ত স্থান সরান */ বর্ডার: 0; প্যাডিং: 0; )