freeCodeCamp/guide/arabic/bootstrap/form-inputs/index.md

title	localeTitle
Form Inputs	مدخلات النموذج

مدخلات النموذج

يدعم Bootstrap عناصر تحكم النموذج التالية:

1. إدخال
2. تيكستاريا
3. مربع
4. راديو
5. تحديد

مثال على قصاصات الشفرات

1. الإدخال

يدعم Bootstrap جميع أنواع مدخلات HTML5: نص ، وكلمة مرور ، و datetime ، و datetime-local ، و date ، و month ، و time ، و week ، و number ، و email ، و url ، و search ، و tel ، و color.

ملاحظة: لن يتم تصميم المدخلات بالكامل إذا لم يتم الإعلان عن نوعها بشكل صحيح!

يحتوي المثال التالي على عنصرين إدخال ؛ واحد من نوع النص وواحد من نوع كلمة المرور:

`

Name:

Password:

`

2. Textarea

يحتوي المثال التالي على نص:

`

Comment:

`

3. مربعات الاختيار

يتم استخدام مربعات الاختيار إذا كنت تريد أن يحدد المستخدم أي عدد من الخيارات من قائمة خيارات الإعداد المسبق.

يحتوي المثال التالي على ثلاثة مربعات اختيار. الخيار الأخير معطل:

`

Option 1

Option 2

Option 3

`

استخدم فئة .checkbox-inline إذا كنت تريد ظهور مربعات الاختيار على نفس السطر:

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

4. أزرار الراديو

يتم استخدام أزرار الراديو إذا كنت ترغب في تحديد المستخدم إلى تحديد واحد فقط من قائمة خيارات الإعداد المسبق.

يحتوي المثال التالي على ثلاثة أزرار للراديو. الخيار الأخير معطل:

`

Option 1

Option 2

Option 3

`

استخدم فئة .radio-inline إذا كنت تريد أن تظهر مربعات الاختيار على نفس السطر:

<label class="radio-inline"><input type="radio" name="optradio">Option 1</label> <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> <label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

5. حدد (قائمة)

يتم استخدام القوائم المحددة إذا كنت تريد السماح للمستخدم بالاختيار من بين خيارات متعددة.

يحتوي المثال التالي على قائمة منسدلة (حدد القائمة):

`

Select list: 1 2 3 4

`

كيفية جعل Bootstrap Inputs Accessible

يجب أن تحتوي حقول الإدخال على تصنيفات أو أي شكل آخر من المعرفات مثل علامات WAI-ARIA للوفاء بالويب إرشادات الوصول إلى المحتوى أو WCAG باختصار. مرتب بالنسبة لقارئي الشاشة لنقل المستخدم إلى ما هي التصنيفات المرتبطة بالمدخلات التي تسجلها بدقة يجب أن تشير إلى المدخلات المقابلة.

ويمكن أن يتم ذلك عن طريق utlizing و for معلمة في HTML:

<label for="email-input">Enter Email</label> <input type="email" class="form-control" id="email-input" placeholder="Enter Email">

التسمية for سمة يحيل دائما حقل الإدخال عن طريق المعرف الخاص به. هذا يخبر قارئ الشاشة أن هذا التصنيف هو بالتأكيد حقل الإدخال هذا الذي سيقلل من الارتباك لأي مستخدم يستخدم قارئ الشاشة لزيارة موقع على شبكة الإنترنت.

معلومات اكثر:

الأمثلة رمز من W3Schools - إدخالات نموذج Bootstrap .