HTML Form Input Primary Attributes
خصائص عنصر Input الأساسية مع HTML Form
سوف تتعرف في هذا الدرس على أهم الخصائص التي تُضاف إلى عنصر input مع HTML form، وأكثر هذه الخصائص شيوعاً.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Form Input Attributes
خصائص عنصر Input مع HTML Form
</>
HTML Form Input value attribute
خاصية value مع عنصر input في HTML form
عندما نضيف خاصية value attribute إلى عنصر <input> يقوم المتصفح بعرض هذه القيمة أمام المستخدم، حيث يمكن للمستخدم عندها التعديل على هذه القيمة أو يمكنه تجاهلها فتكون مساوية للقيمة الافتراضية.
- تُكتب القيمة بداخل خاصية value بين علامات تنصيص فردية أو مزدوجة.
- تكون القيمة بداخل خاصية value إما نصوص أو أرقام.
Form input value attribute
القيمة الافتراضية لخاصية value attribute في form input.
<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"><br> </form>
</>
HTML form input placeholder attribute
خاصية placeholder مع عنصر input في HTML form
تُستخدم خاصية placeholder attribute مع form input في لغة HTML لإظهار معلومات نصية للمستخدم داخل input لتساعده على فهم المطلوب إدخاله داخل هذا الحقل.
- عندما يكتب المستخدم المطلوب منه داخل input سوف تختفي المعلومات الموجودة بداخل placeholder.
- تكتب القيمة بداخل خاصية placeholder بين علامات تنصيص فردية [' '] أو مزدوجة [" "].
- تكون القيمة بداخل خاصية placeholder إما نصوص أو أرقام.
- تعمل خاصية placeholder مع الحقول من النوع: text, search, url, tel, email, and password.
Form input placeholder attribute
تُستخدم خاصية placeholder لمساعدة المستخدم في فهم ما المطلوب إدخاله في هذا الحقل.
<form> <label for="fname">First Name:</label><br> <input type="text" id="fname" placeholder="Enter First Name"><br> <label for="lname">Last Name:</label><br> <input type="text" id="lname" placeholder="Enter Last Name"><br> </form>
</>
HTML form input height and width attributes
خاصيتي height و width مع عنصر input في HTML form
نستخدم كلاً من خاصية height وخاصية width للتحكم في أبعاد ( طول وعرض ) وحجم عنصر input بداخل HTML form وذلك من أجل التحكم بشكل تصميم صفحة الويب.
- هذه الخاصية تعمل مع عنصر input من النوع image فقط.
- تكتب القيم بداخل خاصية height وخاصية width بالنسبة المئوية 50% أو بوحدة بكسل 50px أو تترك بدون علامات 50 وتكون بوحدة بكسل بدون العلامات.
Form input height and width attributes
تُستخدم خاصيتي height و width مع عنصر image input.
<form action="/options"> <label for="username">Username:</label><br> <input type="text" id="username"><br> <label for="password">Password:</label><br> <input type="password" id="password"><br><br> <input type="image" src="https://www.closetag.com/images/submit.png" alt="submit" width="120" height="48"> </form>
سمات إدخال HTML
سمات
قيمة
حقل إدخال
نتيجة
نموذج
قراءة فقط
نافذة
معطل / غير نشط
حجم
بريد إليكتروني
بحث
نص
كلمة السر
التاريخ -الوقت المحلي
تاريخ
نطاق أو في حدود
رقم
نوع
وقت
أسبوع
شهر
متعدد
ملف
نمط
عادي
تعبير
ينوب
مطلوب
مربع إختيار
مربع إختيار دائري
خطوة
تركيز تلقائي
ارتفاع
عرض
تأكيد الإرسال
صورة
قائمة
قائمة البيانات
عنصر
خيارات
تكملة تلقائية
Minimum
حد أدنيTelephone
هاتف أو تليفونMaximum length
الحد الأقصي للطولHypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنتMaximum
حد أقصي
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
