HTML Form Input Secondary Attributes
خصائص عنصر Input الثانوية مع HTML Form
سوف تتعرف في هذا الدرس على بعض الخصائص التي تُضاف إلى عنصر input مع HTML form، ووظيفة كل خاصية وسبب استخدامها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Form Secondary Input Attributes
خصائص عنصر Input الثانوية مع HTML Form
</>
HTML form input readonly attribute
خاصية readonly مع عنصر input في HTML form
تُستخدم خاصية readonly لتجعل input الحقل مقروء فقط ولا يتمكّن المستخدم من التعديل عليه.
- لا يمكن التعديل على القيمة الموجودة داخل خاصية readonly مع عنصر input.
- يمكن أن نستخدم زر tab للتنقل بين other inputs بقية الحقول.
- يمكن عمل highlight على القيمة الموجودة داخل خاصية readonly.
- يمكن أن تُنسخ القيمة الموجودة داخل خاصية readonly.
Form input readonly attribute
القيمة داخل خاصية readonly ثابتة وافتراضية ولا تتغير، لذلك يتم اختصارها وكتابتها بدون قيمة.
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Mohamed" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Aly" readonly> </form>
</>
HTML form input disabled attribute
خاصية disabled مع عنصر input في HTML form
تُستخدم خاصية disabled لتجعل input الحقل مُعطل أو غير فعال.
- unusable لا يمكن التعديل على القيمة الموجودة داخل خاصية disabled مع عنصر input.
- un-clickable لا يمكن الضغط على القيمة الموجودة داخل خاصية disabled مع عنصر input.
- untab لا يمكن استخدم زر tab للتنقل بين other inputs بقية الحقول إذا كانت من نوع disabled.
- unhighlight يمكن عمل highlight على القيمة الموجودة داخل خاصية disabled.
- copy يمكن أن تُنسخ القيمة الموجودة داخل خاصية disabled.
Form input disabled attribute
القيمة داخل خاصية disabled ثابتة وافتراضية ولا تتغير، لذلك يتم اختصارها وكتابتها بدون قيمة.
<form> <label for="fname">First Name:</label><br> <input type="text" id="fname" value="Ahmed" ><br> <label for="lname">Last Name:</label><br> <input type="text" id="lname" value="Hamdy" disabled><br> </form>
</>
HTML form input size attribute
خاصية size مع عنصر input في HTML form
تستخدم خاصية size مع عنصر input بداخل HTML form لتحديد عرض input الحقل الذي يظهر على المتصفح وجعله بنفس قدر عرض الحروف.
- القيمة الافتراضية لخاصية size هي 20 حرف.
- خاصية size تعمل مع الحقول من النوع: text, search, tel, url, email, and password.
HTML form input size attribute
استخدم خاصية size مع عنصر input بداخل HTML form لجعل عرض input الحقل مساوياً لمقدار الحروف داخله.
<form> <label for="email">Email:</label><br> <input type="email" id="email" size="50"><br> <label for="username">Username:</label><br> <input type="text" id="username" size="15"><br> </form>
</>
HTML form input maxlength attribute
خاصية maxlength مع عنصر input في HTML form
تُستخدم خاصية maxlength مع HTML form input لتحديد أقصى عدد للحروف داخل عنصر input.
- لا يسمح بكتابة عدد حروف داخل عنصر input أكثر من عدد الحروف المحدّد داخل قيمة maxlength.
HTML form input maxlength attribute
استخدم خاصية maxlength مع HTML form input لتحديد أقصى عدد للحروف داخل عنصر input.
<form> <label for="email">Email:</label><br> <input type="email" id="email"><br> <label for="username">Username:</label><br> <input type="text" id="username" maxlength="5"><br> </form>
</>
HTML form input min and max attribute
خاصية min وخاصية max مع عنصر input في HTML form
تُستخدم خاصية min وخاصية max مع عنصر form input لتحديد أصغر وأكبر قيمة يمكن إدخالها داخل الحقل input.
- تعمل خاصية min وخاصية max مع inputs الحقول من النوع: number, range, date, datetime-local, month, time and week.
- تُستخدم خاصية min وخاصية max لتحديد مجال القيم المسموح بها (من إلى) from to.
HTML form input min and max attribute
مثال يوضح طريقة تحديد مجال القيم المسموح إدخالها، عن طريق تحديد القيمة 1 كأصغر قيمة مسموح بها وتحديد القيمة 5 كأكبر قيمة مسموح بها.
<form> <label for="quantity">Product QTY:</label><br> <input type="number" id="quantity" min="1" max="5"> </form>
</>
HTML form input required attribute
خاصية required مع عنصر input في HTML form
تُستخدم خاصية required attribute لتحديد input الحقول الإجبارية التي يُطلب من المستخدم تعبئتها قبل الضغط على زر submit.
- تعمل خاصية required attribute مع الحقول من النوع: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
HTML form input required attribute
استخدام خاصية required لإظهار رسالة تخبر المستخدم أن ملء الحقل إجباري، حتى يستطيع النقر على زر submit وإرسال النموذج إلى الخادم.
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username" required><br><br> <input type="submit" value="Submit"> </form>
</>
HTML form input autocomplete attribute
خاصية autocomplete مع عنصر input في HTML form
تستخدم خاصية autocomplete attribute لحفظ أو إلغاء حفظ البيانات التي كتبها المستخدم داخل هذا input الحقل عندما يقوم بالنقر فوق زر submit.
- خاصية autocomplete attribute تمكّن المتصفح من حفظ أو إلغاء حفظ القيم السابقة للمستخدم في هذا form input الحقل.
- خاصية autocomplete attribute تعمل مع عنصر <form> وعنصر <input>.
HTML form input autocomplete attribute
خاصية autocomplete للتحكم في حفظ أو إلغاء حفظ البيانات المُدخلة سابقاً من قبل المستخدم في inputs الحقول.
<form> <label for="username" >Username:</label><br> <input type="text" id="username" autocomplete="off"><br> <label for="username" >Username:</label><br> <input type="text" id="username" autocomplete="on"><br> </form>
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنتDelete
حذفInsert
إدراجSubscript
نص سفليSuperscript
نص علوي
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
