HTML Form Input Advanced Attributes
الخصائص المتقدمة لعنصر Input مع HTML Form
سوف تتعرف في هذا الدرس على جميع الخصائص المتقدمة التي تُضاف إلى عنصر input مع HTML form، بالإضافة إلى طريقة كتابتها وقيمها وسبب استخدامها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Form Advanced Input Attributes
خصائص عنصر Input المتقدمة مع HTML Form
</>
HTML form input multiple attribute
خاصية multiple مع عنصر input في HTML form
تُستخدم خاصية multiple attribute مع form input للسماح للمستخدم باختيار أكثر من ملف داخل file input أو إدخال أكثر من بريد إلكتروني.
- تعمل خاصية multiple attribute مع الحقول من النوع: email and file.
HTML form input multiple attribute
استخدام خاصية multiple لكي يتمكّن المستخدم من إضافة أكثر من ملف داخل حقل input file.
<form> <label for="file">Select Files:</label><br> <input type="file" id="file" multiple> </form>
</>
HTML form input pattern attribute
خاصية pattern مع عنصر input في HTML form
تُستخدم خاصية pattern attribute لتحديد الحروف والعلامات والأرقام المسموح بها داخل عنصر form inputs قبل الضغط على زر submit.
- تعمل خاصية pattern attribute مع الحقول من النوع: text, date, search, url, tel, email, and password.
- يمكنك استخدام خاصية title مع عنصر input وخاصية pattern attribute لإظهار رسالة تُخبر المستخدم بوجود خطأ في إدخال البيانات داخل الحقل وتخبره بنوع المعلومات التي يجب إدخالها في هذا الحقل.
لكن لا تظهر رسالة الخطأ إلا بعد الضغط على زر submit.
HTML form input pattern attribute
تحديد نوع البيانات داخل الحقول باستخدام خاصية pattern في HTML form.
<form>
<label for="country_code">Country code:</label><br>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit" value="Submit">
</form>
</>
HTML form input step attribute
خاصية step مع عنصر input في HTML form
تُستخدم step attribute في تحديد مقدار قفزة الزيادة والنقصان برقم محدد ومضاعفاته، فمثلاً لو قمنا بكتابة الرقم 3 كقيمة للخاصية step="3">.
عند النقر على زر السهم نحو الأعلى سوف يظهر الرقم 3 ثم 6 ثم 9 وهكذا..
والعكس عند الضغط على زر السهم نحو الأسفل سوف تظهر الأرقام 3 ثم 0 ثم -3 ثم -6 وهكذا...
- تعمل خاصية step attribute مع الحقول من النوع: number, range, date, datetime-local, month, time and week.
- تعمل خاصية step attribute مع min و max عند تقليل القيمة وتكبيرها.
HTML form input step attribute
استخدام خاصية step في تحديد مقدار قفزة الأرقام عند النقر على سهم الأعلى أو الأسفل.
<form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> </form>
</>
HTML form input autofocus attribute
خاصية autofocus مع عنصر input في HTML form
تُستخدم خاصية autofocus attribute لكي يتم الوقوف على input حقل محدّد عند تحميل الصفحة، أي يكون مؤشر تعبئة الحقول عند هذا الحقل المحدّد للبدء في تعبئته.
HTML form input autofocus attribute
تحديد مكان توقف مؤشر تعبئة الحقول باستخدام خاصية autofocus.
<form> <label for="username" >Username:</label><br> <input type="text" id="username" autofocus><br> <label for="password" >Password:</label><br> <input type="password" id="password"><br> </form>
</>
HTML form input list attribute
خاصية list مع عنصر input في HTML form
تُستخدم خاصية list attribute مع عنصر input من النوع input list للعرض وإظهار قائمة العناصر داخل عنصر <datalist>.
HTML form input list attribute
عرض العناصر الموجودة داخل input list.
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
