tag - কিভাবে html তৈরি করা যায়




একটি ক্লিকযোগ্য লেবেল সহ একটি এইচটিএমএল চেকবাক্স কিভাবে তৈরি করবেন (7)

পদ্ধতি 1: মোড়ানো লেবেল ট্যাগ

একটি label ট্যাগের মধ্যে চেকবক্স মোড়ানো:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

পদ্ধতি 2: গুণাবলী for ব্যবহার করুন

বৈশিষ্ট্যের for ব্যবহার করুন (চেকবাক্স id মেলে):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

উল্লেখ্য : আইডি পাতা অনন্য হতে হবে!

ব্যাখ্যা

যেহেতু অন্যান্য উত্তরগুলি এটি উল্লেখ করে না, তাই একটি লেবেল 1 টি ইনপুট অন্তর্ভুক্ত করতে পারে এবং গুণটির for বাদ দিতে পারে এবং এটি অনুমান করা হবে যে এটির মধ্যে থাকা ইনপুটটির জন্য এটি রয়েছে।

w3.org থেকে w3.org (আমার জোর দিয়ে):

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

অন্য নিয়ন্ত্রণের সাথে একটি লেবেল সংযুক্ত করার জন্য, নিয়ন্ত্রণ উপাদানটি LABEL উপাদানের সামগ্রীর মধ্যে থাকা আবশ্যক । এই ক্ষেত্রে, LABEL শুধুমাত্র একটি নিয়ন্ত্রণ উপাদান থাকতে পারে। লেবেল নিজেই সংশ্লিষ্ট নিয়ন্ত্রণ আগে বা পরে অবস্থান করা যেতে পারে।

এই পদ্ধতি ব্যবহার করার for কিছু সুবিধার আছে:

  • প্রতিটি চেকবাক্সে একটি id বরাদ্দ করার প্রয়োজন নেই (মহান!)।

  • <label> অতিরিক্ত বৈশিষ্ট্য ব্যবহার করার প্রয়োজন নেই।

  • ইনপুট এর ক্লিকযোগ্য এলাকাটি লেবেল এর ক্লিকযোগ্য এলাকাও তাই দুইটি আলাদা স্থান নেই যা চেকবক্সটি নিয়ন্ত্রণ করতে পারে - শুধুমাত্র এক, <input> এবং প্রকৃত লেবেল পাঠ কতটা দূরে থাকুক না কেন এবং কোন ধরনের কোন ব্যাপার না সিএসএস এর জন্য আপনি এটি প্রয়োগ করেন।

কিছু সিএসএস সঙ্গে ডেমো:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

আমি কীভাবে একটি লেবেল সহ একটি HTML চেকবাক্স তৈরি করতে পারি যা ক্লিকযোগ্য (এই লেবেলে ক্লিক করা চেকবক্স চালু / বন্ধ করে)?


আপনি সিএসএস ছদ্ম উপাদানগুলি আপনার সমস্ত চেকবক্সের মান বৈশিষ্ট্যগুলি (যথাক্রমে) থেকে বাছাই এবং প্রদর্শন করতে ব্যবহার করতে পারেন।
সম্পাদনা: এটি কেবল ওয়েবকিট এবং ব্লিঙ্ক ভিত্তিক ব্রাউজারগুলির সাথে কাজ করবে (Chrome (ium), সাফারি, অপেরা ...) এবং এভাবে বেশিরভাগ মোবাইল ব্রাউজার। কোন Firefox বা IE এখানে সমর্থন।
আপনার অ্যাপ্লিকেশানগুলিতে ওয়েবকিট / ব্লিঙ্ক এম্বেড করার সময় এটি কেবল দরকারী হতে পারে।

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

সমস্ত ছদ্ম উপাদান লেবেল ক্লিকযোগ্য হতে হবে।

ডেমো: http://codepen.io/mrmoje/pen/oteLl , + এর অর্থ


এটা খুব কাজ করে:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

এটা ব্যবহার কর

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});

label উপাদানটি ব্যবহার করুন, এবং বৈশিষ্ট্যটি চেকবক্সের সাথে যুক্ত করার for :

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />


<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />




label