نقوم بإنشاء قوائم منسدلة أنيقة. الاختيار من القائمة المنسدلة في HTML توسيع قائمة متعددة المستويات عند تمرير html

في هذه المقالة، سننظر في العناصر التي تسمح لك بإنشاء قوائم منسدلة، ونتعرف على كيفية تكوين مجموعات في هذه القوائم، وننظر في كيفية تعطيل العناصر وحتى مجموعات القوائم، ونتعرف على عنصر يسمح لك بإنشاء حقل نصي متعدد الأسطر، والذي يمكنك استخدامه لاحقًا داخل نماذج HTML (element

قائمة منسدلة

عادةً ما يظهر العنصر الأول في القائمة على أنه محدد، ولكن يمكنك إضافة سمة محددة إلى العنصر لتحديد خيار محدد مسبقًا.

دعونا

</span>مثال على استخدام عنصر <select><span>

في هذا المثال نضع علامة

في المتصفح يبدو هكذا:

تجميع عناصر القائمة

دعونا نلقي نظرة على العلامة التالية ، والذي يُستخدم لتجميع البيانات ذات الصلة في قائمة منسدلة الاسم = "أبيض وأسود"> التسمية = "القائمة البيضاء">

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

في المثال التالي، باستخدام السمة المنطقية المعطلة، سنقوم بتعطيل مجموعة واحدة (" المجموعة ب"):

</span>مثال على استخدام السمة المعطلة لعلامة HTML <optgroup><span>

نتيجة مثالنا:

تعطيل القائمة والاختيار المتعدد

</span>سمات العلامات المعوقة والمتعددة <select><span>

في هذا المثال، قمنا بإنشاء قائمتين منسدلتين. بالنسبة للقائمة الأولى، استخدمنا خاصية المعوقين، والتي تمنع التفاعل مع القائمة (تعطيلها).

بالنسبة للقائمة الثانية، استخدمنا السمة المتعددة، والتي تشير إلى أنه من الممكن تحديد عدة خيارات في القائمة مرة واحدة (عبر كنترولعلى ويندوز وعبر يأمرعلى ماك).

في المتصفح يبدو هكذا:

منطقة النص

نتيجة مثالنا:

تعطيل منطقة النص

قياسا على عناصر العلامة التي تمت مناقشتها سابقا يحتوي على سمة منطقية معطلة تحدد أنه يجب تعطيل منطقة النص (غير متاحة لتفاعل المستخدم). يمكن استخدام السمة مع البرامج النصية، على سبيل المثال، حتى يتم استيفاء بعض الشروط، يكون العنصر غير نشط.</p> <p>دعونا نلقي نظرة على مثال للاستخدام:</p> <span><!DOCTYPE html> <html> <head> <title> </span>سمات علامة الاسم والتعطيل <textarea><span></title> </head> <body> <form> <textarea name = "userInfo" > </span>حقل النص متاح للتعبئة. <span> </span>حقل النص غير متاح للملء.

)، بالنسبة للمنطقتين الأولى والثانية، قمنا بتعيين أسماء فريدة مع سمة الاسم. بالنسبة لمنطقة النص الثانية، حددنا باستخدام السمة "disabled" أنه سيتم تعطيلها عند تحميل الصفحة.</p> <p>بالإضافة إلى ذلك قمنا بوضع زر داخل النموذج يعمل على إرسال النموذج (element <input>باستخدام الزر اكتب "إرسال النموذج": اكتب = "إرسال" ).</p> <p>نتيجة مثالنا:</p> <h2>تلميح أداة منطقة النص</h2> <p>ولذا فإننا سوف ننظر إلى المثال الأخير وننتقل إلى المهمة العملية للمقال في هذا الكتاب المدرسي.</p> <p>بفضل السمة (علامة HTML <textarea>) يُسمح بتحديد نص تلميح الأداة الذي يصف القيمة المتوقعة لإدخال المستخدم في العنصر.</p> <p>يتم إخفاء نص تلميح الأداة عندما يقوم المستخدم بإدخال قيمة (أي حرف) في حقل النص؛ وإذا تمت إزالتها، فسيتم عرض تلميح الأداة مرة أخرى.</p> <p>دعونا نلقي نظرة على مثال للاستخدام:</p> <span><!DOCTYPE html> <html> <head> <title> </span>العنصر النائب وسمات العلامة للقراءة فقط <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>"أدخل المعلومات في حقل النص"</span>> "الحقل للقراءة فقط"</span>للقراءة فقط>
اكتب = "إرسال" الاسم = "إرسال المعلومات" القيمة = "submit" > !}

في هذا المثال، قمنا بإنشاء منطقتين للنص (العنصر )، بالنسبة للمنطقتين الأولى والثانية، قمنا بتعيين السمة على تلميح للمستخدم، والذي يتم عرضه بلون نص باهت داخل العنصر. بالنسبة لمنطقة النص الثانية، حددنا باستخدام السمة للقراءة فقط أنها ستكون للقراءة فقط (لا يمكن تغيير المحتوى).</p> <p>لاحظ أنه إذا كان الحقل النصي للقراءة فقط، فلا يمكن تغيير المحتوى، ولكن لا يزال بإمكان المستخدم التنقل إلى المحتوى وتحديده ونسخه.</p> <p>بالإضافة إلى ذلك قمنا بوضع زر داخل النموذج يعمل على إرسال النموذج (element <input>باستخدام الزر اكتب "إرسال النموذج": اكتب = "إرسال" ).</p> <p>نتيجة مثالنا:</p> <h2>أسئلة ومهام حول الموضوع</h2> <p>قبل الانتقال إلى الموضوع التالي، أكمل التدريب العملي:</p> <ul><li>باستخدام المعرفة التي اكتسبتها، قم بإنشاء نموذج الإعلان عن الوظيفة التالي:</li> </ul><p>قبل بدء المهمة، افتح المثال في نافذة جديدة وافحص النموذج بعناية لتكرار جميع نقاطه. لإكمال المهمة، ستحتاج إلى المعرفة من المقالة. إذا فاتك ذلك، ارجع لدراسته.</p> <p>بعد الانتهاء من التمرين، قم بفحص رمز الصفحة عن طريق فتح المثال في نافذة منفصلة للتأكد من أنك فعلت كل شيء بشكل صحيح.</p> <p>مرحبا عزيزي القراء لموقع بلوق. كجزء من دراستنا للتعقيدات، كالمهمة التالية، سنستمر في تحليل تفاصيل إنشاء النماذج على الموقع باستخدام النماذج المناسبة.</p> <p>اليوم سننظر في كيفية الإنشاء <b>القوائم المنسدلة (المنسدلة).</b>، بما في ذلك الاختيار من متعدد، باستخدام التحديد والخيار، وكيفية البناء <b>حقل النص</b>عبر منطقة النص، وتحدث أيضًا عن إمكانية توسيع وظائف النماذج باستخدام العلامات <b>مجموعة الحقول والتسمية والأسطورة</b>.</p> <p>اسمحوا لي أن أذكرك أن أي نموذج موجود على الصفحة يتم إنشاؤه باستخدام ويهدف إلى إدخال أي معلومات من المستخدم وإرسالها إلى الخادم (مثال - ).</p> <p>لسوء الحظ، لا تسمح لنا أدوات لغة ترميز النص التشعبي بمعالجة هذه المعلومات مباشرة، لذلك باستخدام HTML نقوم بإنشاء مظهر النموذج فقط، ويتم إرسال البيانات الضرورية للمعالجة. لهذا الغرض، يتم إنشاء ملف خاص على خادم الويب، مكتوبًا بإحدى لغات الخادم (غالبًا PHP). لنفترض أنه للحصول على تعليقات، يمكنك إنشاء ملف mail.php، والذي سيكون المعالج.</p> <p>عند استخدام المعلومات التي تم الحصول عليها في هذا المنشور عمليًا، لا تنس كيف يجب أن تبدو، حيث توجد دائمًا رموز جميع عناصر الصفحة المرئية، بما في ذلك النماذج، داخل علامة النص.</p> <p>هذه المعلومات ضرورية للغاية، لأنه حتى لو كنت تستخدم جميع أدوات المطور الحديثة المضمنة فيها (دعني أذكرك، كانت أول علامة في تنفيذ هذه الوظيفة)، يجب أن تفهم بوضوح آلية استخدام العلامات الرئيسية، ثم تحرير كود HTML، الذي تنشأ الحاجة إليه من وقت لآخر، سوف يتحول إلى نشاط ممتع.</p> <p>2. <b>عديد</b>— هذه السمة، التي لا تحتوي على معلمات، تسمح بالاختيار المتعدد، على عكس المثال أعلاه، حيث يمكنك تحديد عنصر واحد فقط (سطر). حاول تحديد عدة أسطر في هذه القائمة باستخدام الماوس مرة واحدة (واحد تلو الآخر في أي مكان، مع الضغط باستمرار على مفتاح Ctrl، أو باستخدام Shift، ومتابعة صف تلو الآخر):</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple> <option>خيار</option> <option>منطقة النص</option> <option>ملصق</option> <option>مجموعة الحقول</option> <option>أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>3. <b>مقاس</b>— يضبط ارتفاع القائمة المنسدلة، أي عدد الأسطر المعروضة. إذا كانت السمة المتعددة موجودة ولم يتم تحديد قيمة الحجم (كما في المثال أعلاه)، إذن <i>بشكل افتراضي يتم عرض أربعة أسطر</i>، وعلى سبيل المثال، بالحجم = "5" خمسة سيكون مرئيًا:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" size="5" multiple> <option>خيار</option> <option>منطقة النص</option> <option>ملصق</option> <option>مجموعة الحقول</option> <option>أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>4. <b>مطلوب</b>(لا يحتوي على معلمات)—يحدد أنه يجب إجراء التحديد قبل إرسال البيانات إلى المعالج. إذا لم يتم تحديد عنصر من القائمة، فلن يتم إرسال بيانات النموذج:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" required> <option></option> <option>خيار</option> <option>منطقة النص</option> <option>ملصق</option> <option>مجموعة الحقول</option> <option>أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>5. <b>التركيز التلقائي</b>(لا يهم) - يضبط التركيز على القائمة مباشرة بعد تحميل الصفحة. بالإضافة إلى ذلك، إذا اعتاد المستخدم على تنفيذ معظم الإجراءات باستخدام المفاتيح، فإن هذا التركيز الذي تم تكوينه مسبقًا سيساعد في إجراء التحديدات من القائمة باستخدام الأسهم الموجودة على لوحة المفاتيح دون أي استخدام للماوس:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" autofocus> <option>اختر من القائمة</option> <option>خيار</option> <option>منطقة النص</option> <option>ملصق</option> <option>مجموعة الحقول</option> <option>أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2018/10/2018-10-25_093419.png' height="146" width="205" loading=lazy loading=lazy></p> </td> </tr></tbody></table><p>6. <b>عاجز</b>(لا توجد معلمات) - يمنع الوصول إلى القائمة (يعطلها). من الناحية العملية، يتم استخدامه عادةً مع البرامج النصية في الحالات التي تحتاج فيها إلى تمكين القائمة المنسدلة فقط عند استيفاء شروط معينة:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" disabled> <option>اختر من القائمة</option> <option>خيار</option> <option>منطقة النص</option> <option>ملصق</option> <option>مجموعة الحقول</option> <option>أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>7. <b>استمارة</b>— يقوم بتوصيل القائمة بنموذج واحد أو أكثر تنتمي إليه، ولكنه يقع خارج الحاوية <form></form>. في هذه الحالة، تتم كتابة المعلمة كقيمة سمة النموذج <i>معرف السمة العالمية</i>والتي تتم إضافتها إلى علامة النموذج:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" id="data"></form> <p><select name="list1" form="data"> <option>اختر من القائمة</option> <option>خيار</option> <option>منطقة النص</option> <option>ملصق</option> <option>مجموعة الحقول</option> <option>أسطورة</option> </select></p> <p><input type="submit" value="يرسل" form="data"></p> </td> <td class="tab" width="35%"> <p>حدد الخيار Textarea Label Fieldset Legend من القائمة</p> <p><input type="submit"></p> </td> </tr></tbody></table><p>لا تخلط بين سمة علامة التحديد وعلامة النموذج الرئيسية. في المثال أعلاه، تمت إضافة سمة id = "data" إلى علامة النموذج، وتمت إضافة form = "data" إلى علامة التحديد، مما جعل من الممكن ربط القائمة المنسدلة بنموذج معين.</p> <h3>سمات علامة الخيار</h3> <p>1. <b>قيمة</b>- يحدد القيمة من القائمة المنسدلة التي سيتم إرسالها إلى الخادم (معالج النماذج). في الواقع، يتم إرسال اسم للمعالج، والذي يتم تحديده بواسطة سمة الاسم لعلامة التحديد، و <b>قيمة القيمة</b>(على سبيل المثال - 1، 2، 3، 4، 5)، المطابق للسطر المحدد من القائمة المنسدلة:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1"> <option>اختر من القائمة</option> <option value="1">خيار</option> <option value="2">منطقة النص</option> <option value="3">ملصق</option> <option value="4">مجموعة الحقول</option> <option value="5">أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>2. <b>عاجز</b>- يمنع تحديد عنصر القائمة المنسدلة.</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="5"> <option value="1" disabled>خيار</option> <option value="2">منطقة النص</option> <option value="3">ملصق</option> <option value="4">مجموعة الحقول</option> <option value="5">أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>كما ترون من المثال، فإن سطر "الخيار" غير نشط ولا يمكن تحديده.</p> <p>3. <b>ملصق</b>- يعرض محتوى النص (الذي يمثل قيمته) لعنصر قائمة معين. إذا كانت التسمية موجودة، فسيتم طباعة سطر مطابق لقيمة هذه السمة ويتم تجاهل محتوى النص الموجود داخل علامة الخيار. ويحدث نفس الشيء إذا كانت المحتويات بين <option>و</option>غائبة تماما.</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="5"> <p><option value="1" label="Тег Option"></option> <option value="2" label="Textarea">علامة منطقة النص</option> <option value="3">تسمية العلامة</option> <option value="4">مجموعة حقول العلامة</option> <option value="5">أسطورة العلامة</option></p> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>علامة منطقة النص، تسمية العلامة، مجموعة حقول العلامة، وسيلة إيضاح العلامة</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>ينظر. في المثال أعلاه، السطر الأول للخيار في الكود فارغ (على الجانب الأيسر من الجدول)، ولكن تتم كتابة المعلمة label = "Option Tag"، ونتيجة لذلك، يظهر هذا النص المحدد في القائمة (على الجانب الأيمن). يحتوي السطر الثاني من التعليمات البرمجية على النص "Textarea Tag" كمحتوى علامة الخيار، ولكن القائمة المنسدلة الموجودة على اليمين تعرض كلمة "Textarea" لمطابقة قيمة التسمية = "Textarea".</p> <p>4. <b>المحدد</b>- تحديد عنصر القائمة المنسدلة الحالي:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1"> <option value="1">خيار</option> <option value="2">منطقة النص</option> <option value="3">ملصق</option> <option value="4" selected>مجموعة الحقول</option> <option value="5">أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>في حالة وجود السمة المتعددة، فمن الممكن تحديد أكثر من عنصر واحد:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="5"> <option value="1">خيار</option> <option selected value="2">منطقة النص</option> <option value="3">ملصق</option> <option selected value="4">مجموعة الحقول</option> <option value="5">أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><h3>سمات علامة optgroup</h3> <p>إذا كانت القائمة المنسدلة بحاجة إلى الفرز بطريقة ما، على سبيل المثال، تقسيمها إلى مجموعات، فسيتم استخدام حاوية لكل مجموعة من هذه المجموعات، تتكون من علامات فتح وإغلاق مجموعة optgroup، والتي تحتوي على جزء من عناصر القائمة المنسدلة. ومع ذلك، هناك سمتان لإعداد مثل هذه القائمة المنسدلة.</p> <p>1. <b>ملصق</b>— يعين اسم كل مجموعة كمعلمة:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1"> <optgroup label="group1"> <option value="1">خيار</option> <option value="2">منطقة النص</option> </optgroup> <optgroup label="group2"> <option value="3">ملصق</option> <option value="4">مجموعة الحقول</option> <option value="5">أسطورة</option> </optgroup> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>نفس الشيء، ولكن مع التعدد والحجم = "7" لعلامة التحديد:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="7"> <optgroup label="group1"> <option value="1">خيار</option> <option value="2">منطقة النص</option> </optgroup> <optgroup label="group2"> <option value="3">ملصق</option> <option value="4">مجموعة الحقول</option> <option value="5">أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>2. <b>عاجز</b>(بدون قيم) - يحظر اختيار عناصر المجموعة التي تم تثبيتها عليها، وعادةً ما يتم تمييز العناصر غير النشطة باللون الرمادي:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><select name="list1" multiple size="7"> <optgroup label="group1"> <option value="1">خيار</option> <option value="2">منطقة النص</option> </optgroup> <optgroup label="group2" disabled> <option value="3">ملصق</option> <option value="4">مجموعة الحقول</option> <option value="5">أسطورة</option> </select></p> <p><input type="submit" value="يرسل"></p> </form> </td> <td class="tab" width="35%"> <p>خيار Textarea Label Fieldset Legend</p> <p><input type="submit" value="يرسل"></p> </td> </tr></tbody></table><p>سيكون الفيديو القصير مفيدًا هنا:</p> <p><span class="m2sgO7Lgf8I"></span></p> <h2>حقل نص في نموذج باستخدام منطقة النص</h2> <p>عنصر النموذج الآخر للموقع الذي سنأخذه في الاعتبار هو الحقل الذي لديه القدرة على إدخال نص متعدد الأسطر فيه. يمكن إنشاؤه باستخدام علامة textarea. بدون السمات الافتراضية، سيؤدي تطبيق هذه العلامة إلى النتيجة التالية:</p> <table><tbody><tr><td class="tab" width="65%"> <form action="formdata" method="post" name="form1"> <p><b>أدخل النص:</b></p> <p><textarea>

أدخل النص:

يمكنك إجراء فواصل أسطر في الحقل، وسيتم إرسال النص إلى المعالج الموجود على الخادم، مع مراعاة التغييرات التي تم إجراؤها. يمكن تمديد الحقل بالعرض والطول من خلال النقر على الزاوية اليمنى السفلية، والتي تتميز بخطين قطريين.

لنحاول الآن إضافة عدة سمات مع معلمات إلى الكود الأصلي:

1. اسم- يحدد اسم منطقة النص كقيمة للتعرف عليها بعد إرسال بيانات النموذج عند معالجتها على الخادم.

2. كولز— عرض الحقل، والذي يتم تحديده كمعلمة بواسطة عدد الأحرف المتماثلة المتجاورة الموضوعة أفقيًا. القيمة الافتراضية هي 20.

3. الصفوف- ارتفاع حقل النص، الذي يحدده عدد الأسطر. إذا كان عدد أسطر النص التي أدخلها المستخدم أكبر من القيمة المحددة بواسطة هذه السمة، فسيظهر شريط تمرير عمودي على اليمين.

4. الحد الاقصى للطول— يحدد الحد الأقصى لعدد الأحرف التي يمكن وضعها في حقل النص. إذا تم تجاوز الحد، فلن يكون من الممكن إجراء المزيد من الإدخالات.

يوجد أدناه مثال على جميع السمات المذكورة أعلاه، والتي يمكنك التحقق من تأثير كل منها بنفسك بمجرد وضع العدد المطلوب من الحروف والأسطر في منطقة النص (يمكنك ببساطة إدخال نفس الحرف عدة مرات):

أدخل النص:

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

7. يقرأ فقط(بدون معلمات) - إذا قمت بإرفاق هذه السمة بمنطقة النص، فلن يكون حقل النص قابلاً للتحرير بواسطة المستخدمين وسيكون للقراءة فقط. ولكن يمكنك التركيز عليه (حرك المؤشر إلى الحقل وانقر بزر الماوس الأيسر)، بالإضافة إلى تحديد النص ونسخه (جزئيًا أو كليًا):

بعض السمات الإضافية التي تنفذ وظائف إضافية عند ملء الحقول:

8. الإكمال التلقائي- يحدد ما إذا كان يجب على المتصفح تقديم تلميحات عندما يملأ المستخدم نموذجًا بناءً على البيانات التي تم إدخالها مسبقًا ويوفر القدرة على إدراج النص المناسب تلقائيًا.

عنده فقط معلمتين: على(ممكن) و عن(مغلق). فيما يلي مثال على الكود:

تعمل هذه السمة ذات القيمة "on" فقط عند تمكين الملء التلقائي لحقول النموذج في متصفح الويب لمستخدم معين.

9. طَوّق- يضبط قواعد المتصفح لفواصل الأسطر في منطقة النص باستخدام ثلاث قيم:

ناعم- يتم نقل مجموعة الأحرف التي لا تتناسب مع الحقل من حيث العرض تلقائيًا إلى سطر جديد. في هذه الحالة المعالج سيتم إرسال النص كسطر واحد. إذا قام المستخدم بنقل النص في أي مكان مرغوب باستخدام مفتاح "Enter"، فسيتم حفظ هذا النقل عند إرسال نموذج الويب.

أدخل النص:

صعب— يتم إنشاء الواصلات تلقائيًا إذا كان النص لا يتناسب مع الحقل من حيث العرض، وعند إرسالها إلى المعالج، سيتم حفظ أماكن هذه الواصلات. يُستخدم هذا الخيار فقط في بالتزامن مع السمة cols:

أدخل النص:

عن- تعطيل فواصل الأسطر. إذا قمت بطباعة جزء من النص دون النقل الميكانيكي باستخدام مفتاح "Enter"، فسيتم وضع النص بأكمله على سطر واحد، وسيظهر شريط تمرير أفقي:

أدخل النص:

10. التركيز التلقائي(لا يحتوي على معلمات) - يبدأ التركيز على حقل النص عند تحميل الصفحة بالنموذج.

11. عاجز- على عكس خاصية القراءة فقط (التي تحظر أيضًا تحرير محتويات الحقل، ولكنها تجعل من الممكن التركيز عليه)، تمنع الوصول تمامًا إلى منطقة النص، والتي عادة ما تكون ملونة باللون الرمادي:

في كثير من الأحيان، يواجه المبتدئين مشكلة تصميم القائمة المنسدلة. تماما كما هو الحال مع الأصلي يختارلا يمكنك أن تفعل أي شيء خاص. ثم يأتي إلى الإنقاذ مسج، وبعد ذلك يمكنك فعل أي شيء تقريبًا.

ماذا لو أخبرتك أن المعيار القياسي ممكن أيضًا؟ لغة البرمجةليس سيئًا تصميم قائمة منسدلة بطريقة نظيفة CSS?

القائمة المنسدلة في HTML

يمكن تغيير لون الخلفية والنص، ويتم ذلك بكل بساطة.

في فترةأضفنا فئتين، واحدة رئيسية، والتي سوف تحتوي على جميع الأنماط الرئيسية " قائمة منسدلة مخصصة"، والثاني كبير وهو ما سيحدد الحجم قائمة منسدلة. يمكننا تجهيز 3 أحجام مقدما، كبيرة ومتوسطة وصغيرة، في الأنماط حجم الخط. ولا تزعج نفسك في المستقبل. يمكنك تخطي هذا، كل هذا يتوقف على التصميم الخاص بك على الموقع.

الجسم ( الخلفية: #2a2a2b؛ اللون: #fff؛ محاذاة النص: المركز؛ عائلة الخط: Arial، Helvetica؛ ) .big (حجم الخط: 1.2em؛) /* القائمة المنسدلة المخصصة */ .custom-dropdown ( الموضع : نسبي؛ العرض: كتلة مضمنة؛ محاذاة رأسية: وسط؛ الهامش: 10 بكسل؛ /* العرض التوضيحي فقط */ ) .حدد القائمة المنسدلة المخصصة (المؤشر: المؤشر؛ لون الخلفية: #2980b9؛ اللون: #fff؛ الخط- الحجم: وراثة؛ الحشو: .5em؛ الحشو الأيمن: 2.5em؛ الحدود: 0؛ الهامش: 0؛ نصف قطر الحدود: 3 بكسل؛ المسافة البادئة للنص: 0.01 بكسل؛ تجاوز النص: ""؛ -مظهر webkit: زر ; /* إخفاء السهم الافتراضي في Chrome OSX */ ) .قائمة منسدلة مخصصة::قبل، .قائمة منسدلة مخصصة::بعد (المحتوى: ""; الموضع: مطلق؛ أحداث المؤشر: لا شيء; ) .قائمة منسدلة مخصصة:: بعد ( /* سهم القائمة المنسدلة المخصص */ المحتوى: "\25BC"؛ الارتفاع: 1em؛ حجم الخط: .625em؛ ارتفاع الخط: 1؛ اليمين: 1.2em؛ الأعلى: 50%؛ الهامش العلوي: -.5em ; ) .قائمة منسدلة مخصصة::قبل ( /* غطاء سهم القائمة المنسدلة المخصصة */ width: 2em; يمين: 0; أعلى: 0; أسفل: 0; نصف قطر الحدود: 0 3px 3px 0; ) .تحديد قائمة منسدلة مخصصة ( اللون: رغبا (0،0،0،.3)؛ ) .قائمة منسدلة مخصصة::بعد ( اللون: rgba(0,0,0,.1); ) .قائمة منسدلة مخصصة::قبل (لون الخلفية: rgba(0,0,0,.15); ) .القائمة المنسدلة المخصصة::بعد ( اللون: rgba(0,0,0,.4); )

إذا كنت لا تريد الإزعاج ودراسة الأنماط، فما عليك سوى إضافتها إلى موقعك وتغيير اللون ليتناسب مع تصميم موقعك. ثم أنت فقط في الاسلوب " .حدد القائمة المنسدلة المخصصة"أنت بحاجة إلى تغيير القيم لون الخلفيةو لون

يمكن إنشاء قائمة منسدلة في HTML باستخدام علامة يختار. بالإضافة إلى القائمة المنسدلة (أو "المنسدلة")، العلامة يختاريسمح لك بإنشاء عنصر قائمة مع تحديد متعدد. بناء جملة استخدام العلامة يختاريبدو HTML كما يلي:

هنا باستخدام العلامة خياريتم تحديد عناصر القائمة.

نتيجة التطبيق:

إلكترونيات Syroezhkin Chizhikov Kukushkina

حدد سمات العلامة

دعونا نلقي نظرة على سمات العلامة يختار:

اسم
مقاس- عدد الأسطر المعروضة في القائمة (العدد)؛
عديد- تمكين وظيفة الاختيار المتعدد لعناصر القائمة المنسدلة؛
عاجز- منع الوصول إلى العنصر؛
استمارة- يسمح لك بربط قائمة منسدلة بنموذج (قد يكون ذلك ضروريًا إذا كانت القائمة نفسها خارج النموذج الذي يجب ربطها به). يتم تمرير معرف النموذج كوسيطة.

ربما هذه هي كل السمات الرئيسية للعلامة يختاروالتي تستخدم في أغلب الأحيان. دعونا نرى الآن كيفية إنشاء قائمة منسدلة في HTML باستخدام السمات المحددة:

القائمة المنسدلة باستخدام HTML - Nubex

سمات علامة OPTION

بطاقة شعار خياركما ذكرنا من قبل، يسمح لك بتحديد العناصر الفرعية في القائمة المنسدلة يختاروالتي بدورها تلعب دور الحاوية. بطاقة شعار خيارله سماته الخاصة:

عاجز- يفرض حظرًا على اختيار عنصر معين في القائمة؛
ملصق- يسمح لك بتعيين تسمية لعنصر القائمة الحالي (بدلاً من النص المحدد في العلامة، يتم عرض قيمة التسمية، مما يسمح لك بعرض قيمة مختصرة)؛ يرجى ملاحظة: هذه السمة غير مدعومة في Firefox.
المحدد- سيتم تحديد عنصر القائمة الحالي بشكل افتراضي؛
قيمة- القيمة التي سيتم نقلها إلى الخادم؛

دعونا نلقي نظرة على حالة الاستخدام المتقدم للعلامة خيار:

ستبدو نتيجة المثال أعلاه كما يلي:

السيد إلكترونيات Syroezhkin Chizhikov Kukushkina

يتيح لك منشئ موقع Nubex إنشاء نماذج مخصصة باستخدام وحدة منشئ النماذج. تم وصف تشغيل القوائم المنسدلة في Nubex في المقالة:

يعد مربع التحرير والسرد، والذي يُطلق عليه أيضًا القائمة المنسدلة، أحد عناصر النموذج المرنة والمريحة. اعتمادا على الإعدادات، يمكنك تحديد قيمة واحدة أو أكثر من القائمة. ميزة القائمة هي صغر حجمها وتعدد استخداماتها، حيث يمكن أن تشغل القائمة سطرًا واحدًا أو عدة سطر، ويمكنك تحديد قيمة واحدة أو أكثر منها. يتم إنشاء مربع التحرير والسرد على النحو التالي.

بطاقة شعار ، الذي يحدد ارتفاع القائمة؛ ويتم تحديد عرض القائمة تلقائيًا بناءً على طول النص الموجود بداخلها

سمات العلامة ، والتي يمكنك من خلالها تغيير طريقة عرض القائمة.

عديد

إن وجود عدة عناصر يخبر المتصفح بعرض محتويات العنصر

اسم

يحدد اسم عنصر فريد تتم إضافة السمة المتعددة، ثم يمكنك تحديد أكثر من عنصر واحد.

قيمة

يحدد قيمة عنصر القائمة التي سيتم إرسالها إلى الخادم. يتم إرسال زوج "الاسم/القيمة" إلى الخادم، حيث يتم تحديد الاسم بواسطة سمة اسم العلامة

تجميع عناصر القائمة

إذا كانت القائمة واسعة جدًا، فمن المنطقي تجميع عناصرها في كتل للتأكد من أن القائمة مرئية وسهلة العمل معها. يتم استخدام العلامة لهذا الغرض . إنها حاوية توجد بداخلها العلامات هو أنه لم يتم إبرازه كعنصر قائمة عادي، بل تم التأكيد عليه باستخدام النمط الغامق، وتم نقل جميع العناصر المضمنة في هذه الحاوية إلى يمين موضعها الأصلي. لإضافة عنوان مجموعة، استخدم سمة التسمية، كما هو موضح في المثال 3.

المثال 3: تجميع عناصر القائمة

HTML5 IE Cr Op Sa Fx

قائمة

وتظهر نتيجة المثال في الشكل. 1.

أرز. 1. قائمة مجمعة

نقوم بإنشاء قوائم منسدلة أنيقة. الاختيار من القائمة المنسدلة في HTML توسيع قائمة متعددة المستويات عند تمرير html

قائمة منسدلة

تجميع عناصر القائمة

تعطيل القائمة والاختيار المتعدد

منطقة النص

تعطيل منطقة النص

القائمة المنسدلة في HTML

حدد سمات العلامة

سمات علامة OPTION

سمات العلامة دعونا نلقي نظرة على سمات العلامة ، والتي يمكنك من خلالها تغيير طريقة عرض القائمة.

عديد

اسم

قيمة

تجميع عناصر القائمة

سمات العلامة ، والتي يمكنك من خلالها تغيير طريقة عرض القائمة.