www - كود مربع البحث html




كيفية إنشاء مربع اختيار HTML مع تسمية قابلة للنقر (7)

كيف يمكنني إنشاء مربع اختيار HTML مع تسمية قابلة للنقر (وهذا يعني أن النقر على الملصق يؤدي إلى تشغيل / إيقاف مربع الاختيار)؟


الطريقة 1: علامة التفاف العلامة

لف مربع الاختيار داخل علامة label :

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

الطريقة الثانية: استخدام السمة

استخدم السمة (تطابق id مربع الاختيار):

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

ملاحظة : يجب أن يكون المعرف فريدًا على الصفحة!

تفسير

بما أن الإجابات الأخرى لا تذكرها ، يمكن أن تتضمن التسمية ما يصل إلى مدخلات واحدة وتحذف السمة ، وسيتم الافتراض أنها مخصصة للإدخال داخلها.

مقتطف من w3.org ( w3.org ):

[صفة for] تربط بشكل صريح العلامة التي يتم تعريفها مع عنصر تحكم آخر. عندما تكون موجودة ، يجب أن تكون قيمة هذه السمة مماثلة لقيمة السمة id لعنصر تحكم آخر في نفس المستند. عند غيابه ، فإن التسمية التي يتم تعريفها ترتبط بمحتويات العنصر.

لربط تسمية مع عنصر تحكم آخر ضمنيًا ، يجب أن يكون عنصر التحكم ضمن محتويات عنصر LABEL . في هذه الحالة ، قد يحتوي LABEL على عنصر تحكم واحد فقط. قد يتم وضع العلامة نفسها قبل أو بعد عنصر التحكم المرتبط.

استخدام هذه الطريقة له بعض المزايا لأكثر من:

  • لا حاجة لتعيين id لكل خانة (عظيم!).

  • لا حاجة لاستخدام السمة الإضافية في <label> .

  • منطقة الإدخال القابلة للنقر هي أيضًا منطقة التسمية القابلة للنقر ، لذلك لا توجد مكانين منفصلين للنقر يمكنهما التحكم في مربع الاختيار - واحد فقط ، بغض النظر عن مدى تباعد <input> ونص التسمية الفعلي ، بغض النظر عن نوع CSS التي تطبق عليها.

عرض تجريبي مع بعض CSS:

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>


استخدم عنصر label ، والسمة لربطه بمربع الاختيار:

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


فقط تأكد من أن التسمية مرتبطة بالإدخال.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

وهو يعمل أيضا:

<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>

يمكنك أيضًا استخدام عناصر CSS الزائفة لاختيار تصنيفاتك وعرضها من جميع سمات قيمة مربع الاختيار (على التوالي).
تعديل: سيعمل هذا فقط مع متصفحات webkit و blink القائمة على (Chrome (ium) و Safari و Opera ....) وبالتالي معظم متصفحات الجوال. لا يدعم Firefox أو IE هنا.
قد يكون هذا مفيدًا فقط عند تضمين webkit / blink على تطبيقاتك.

<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 ، + The gist of it


<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