আপনি যা হারিয়েছেন তা হল শব্দার্থক মার্কআপ এবং ডিওএম বোঝার an
বাস্তবতাত্ত্বিকভাবে, আপনি HTML5 মার্কআপের সাহায্যে যা কিছু করতে পারেন তা করতে পারেন এবং বেশিরভাগ ব্রাউজারগুলি এটিকে বিশ্লেষণ করবে। শেষবার আমি চেক করা থাকে, ওয়েবকিট / নাচা এমনকি পারবেন ভিতরে সিউডো-উপাদানের <input>উপাদান , যা বৈশিষ্ট একটি স্পষ্ট লঙ্ঘন - গেকো এত না। যাইহোক, আপনার মার্কআপের সাথে আপনি যা পছন্দ করেন তা করা নিঃসন্দেহে শব্দার্থবিজ্ঞানের বিষয়ে অবৈধ করে দেবে।
কেন আমরা <input>উপাদানগুলির ভিতরে উপাদান রাখি <form>? একই কারণে আমরা <li>ট্যাগগুলির মধ্যে <ul>এবং <ol>উপাদানগুলির ভিতরে রেখেছি - এটি সেখান থেকেই। এটি শব্দার্থগতভাবে সঠিক, এবং মার্কআপ সংজ্ঞায়িত করতে সহায়তা করে। পার্সার্স, স্ক্রিন রিডার এবং বিভিন্ন সফ্টওয়্যার আপনার মার্কআপটি যখন শব্দার্থগতভাবে সঠিক হয় তখন এটি আরও ভালভাবে বুঝতে পারে - যখন মার্কআপটির অর্থ থাকে কেবল কাঠামো নয়।
<form>উপাদান এছাড়াও আপনি নির্ধারণ করতে পারবেন methodএবং actionবৈশিষ্ট্যাবলী, যা ব্রাউজার যখন ফর্ম জমা করতে হবে বলুন। AJAX একটি 100% কভারেজ টুল নয়, এবং ওয়েব বিকাশকারী হিসাবে আপনাকে করুণাময় অবক্ষয়ের অনুশীলন করা উচিত - জেএস বন্ধ থাকা সত্ত্বেও ফর্মগুলি জমা দেওয়া এবং ডেটা স্থানান্তর করতে সক্ষম হওয়া উচিত।
পরিশেষে, ফর্মগুলি সমস্ত ডিওমে সঠিকভাবে নিবন্ধিত হয়। আমরা জাভাস্ক্রিপ্ট দিয়ে এই এক নজরে নিতে পারেন। আপনি যদি এই খুব পৃষ্ঠায় আপনার কনসোলটি খোলেন এবং টাইপ করুন:
document.forms
আপনি পৃষ্ঠায় সমস্ত ফর্ম একটি দুর্দান্ত সংগ্রহ পাবেন। সার্চবার, মন্তব্য বাক্স, উত্তর বাক্স - সমস্ত সঠিক ফর্ম। এই ইন্টারফেসটি তথ্য অ্যাক্সেস করতে এবং এই উপাদানগুলির সাথে যোগাযোগের জন্য কার্যকর হতে পারে। উদাহরণস্বরূপ, ফর্মগুলি খুব সহজেই সিরিয়ালায়িত করা যায়।
এখানে কিছু পড়ার উপাদান রয়েছে:
দ্রষ্টব্য: <input>উপাদানগুলি ফর্মের বাইরে ব্যবহার করা যেতে পারে, তবে যদি আপনার উদ্দেশ্যটি কোনও উপায়ে ডেটা জমা দেওয়ার হয় তবে আপনার উচিত একটি ফর্ম ব্যবহার করা।
এটি প্রশ্নের উত্তর যেখানে আমি প্রশ্নটি প্রায় ঘুরিয়ে ফেলি।
আমি কীভাবে ফর্ম এড়িয়ে আমার জীবনকে আরও কঠিন করে তুলছি?
প্রথম এবং সর্বাগ্রে - ধারক উপাদান। কার দরকার আছে, তাই না ?!
অবশ্যই আপনার সামান্য <input>এবং <button>উপাদানগুলি কোনও ধরণের ধারক উপাদানের ভিতরে বাসা বাঁধে ? এগুলি কেবল সমস্ত কিছুর মাঝে ভাসতে পারে না। সুতরাং যদি না <form>, তবে কি? ক <div>? ক <span>?
এই উপাদান আছে কোথাও রক্ষিত, এবং যদি না আপনার মার্কআপ একটি ছবি জগাখিচুড়ি ধারক উপাদান মাত্র একটি ফর্ম হতে পারে।
না? উহু.
এই মুহুর্তে আমার মাথার ভয়েসগুলি খুব কৌতূহলযুক্ত যে আপনি কীভাবে এই সমস্ত বিভিন্ন এজেএক্স পরিস্থিতিতে আপনার ইভেন্ট হ্যান্ডলার তৈরি করেন। বাইটগুলি বাঁচাতে আপনার মার্কআপটি কাটা দরকার হলে অবশ্যই অনেক কিছু আছে। তারপরে আপনাকে অবশ্যই প্রতিটি এএএএক্সএক্স ইভেন্টের জন্য কাস্টম ফাংশন তৈরি করতে হবে যা উপাদানগুলির প্রতিটি 'সেট' এর সাথে মিলে যায় - যা আপনাকে পৃথকভাবে বা ক্লাসগুলির সাথে লক্ষ্য করতে হবে, তাই না? এই উপাদানগুলি প্রকৃতপক্ষে গোষ্ঠীভুক্ত করার কোনও উপায় নেই, যেহেতু আমরা প্রতিষ্ঠিত করেছি যে তারা কেবল মার্কআপের চারপাশে ঘুরে বেড়াচ্ছে, প্রয়োজন না হওয়া পর্যন্ত যা কিছু করছে।
সুতরাং আপনি কাস্টম কোড কয়েক হ্যান্ডলার।
$('#searchButton').on('click', function (e) {
e.preventDefault();
var search = $('#mySearch');
$.ajax({
url: 'http://example.com/text',
type: 'GET',
dataType: 'text',
data: 'query=' + search.val(),
success: function (data) {
console.log(data);
}
});
});
$('#login').on('click', function (e) {
e.preventDefault();
var user = $('#username'),
pass = $('#password'),
rem = $('#remember');
$.ajax({
url: 'http://example.com/login',
type: 'POST',
data: user.add(pass, rem).serialize(),
dataType: 'text',
success: function (data) {
console.log(data);
}
});
});
<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
এটি সেই অংশ যেখানে আপনি কিছু বলছেন:
'যদিও আমি সম্পূর্ণ পুনরায় ব্যবহারযোগ্য ফাংশন ব্যবহার করি। অতিরঞ্জিত করা বন্ধ করুন। '
যথেষ্ট ভাল, তবে আপনার এখনও এই অনন্য উপাদানগুলির সেটগুলি তৈরি করতে হবে, বা লক্ষ্য শ্রেণীর সেটগুলি ঠিক আছে? আপনার এখনও এই উপাদানগুলিকে একরকম গ্রুপ করতে হবে ।
আমাকে আপনার চোখ (বা কান, যদি আপনি কোনও স্ক্রিন রিডার ব্যবহার করছেন এবং যদি কিছু সহায়তার প্রয়োজন হয় তবে ধার দিন) ভাল জিনিস আমরা এই সমস্ত শব্দার্থক চিহ্নগুলিতে কিছু এআরআইএ যুক্ত করতে পারি , তাই না?), এবং জেনেরিক ফর্মটির শক্তি দেখি।
function genericAjaxForm (e) {
e.preventDefault();
var form = $(this);
return $.ajax({
url: form.attr('action'),
type: form.attr('method'),
dataType: form.data('type'),
data: form.serialize()
});
}
$('#login-form').on('submit', function (e) {
genericAjaxForm.call(this, e).done(function (data) {
console.log(data);
});
});
<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
<input type="text" name="username" value="user" />
<input type="password" name="password" value="mypass" />
<label>
<input type="checkbox" name="remember" /> Remember me
</label>
<button type="submit">Login</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
আমরা এটিকে যে কোনও সাধারণ ফর্মের সাথে ব্যবহার করতে পারি, আমাদের গ্রেফিউস অবক্ষয় বজায় রাখতে পারি এবং ফর্মটি কীভাবে এটি কাজ করা উচিত তা সম্পূর্ণরূপে বর্ণনা করতে দিন । জেনেরিক স্টাইল রাখার সময় আমরা এই বেস কার্যকারিতাটি প্রসারিত করতে পারি - আরও মডিউলার, কম মাথা ব্যথা। জাভাস্ক্রিপ্ট কেবল নিজস্ব জিনিসগুলি নিয়েই উদ্বিগ্ন, যেমন উপযুক্ত উপাদানগুলি গোপন করা, বা আমরা যে কোনও প্রতিক্রিয়া পেয়েছি তা পরিচালনা করার মতো।
এবং এখন আপনি বলেছেন:
'তবে আমি আমার সিউডো-ফর্মগুলি <div>নির্দিষ্ট আইডি থাকা উপাদানগুলিতে গুটিয়ে রাখি - আমি তারপরে ইনপুটগুলি আলগাভাবে .findএবং .serializeতাদের সাথে লক্ষ্যবস্তু করতে পারি এবং ...'
ওহ, এটা কি? আপনি আসলে আপনার <input>উপাদানগুলি একটি পাত্রে জড়িয়ে রাখবেন?
তাহলে কেন এটি এখনও ফর্ম নয়?