في هذا الدرس 7تصفّح المواضيع
HTML form input readonly attribute
خاصية readonly مع عنصر input في HTML form
HTML form input readonly attribute خاصية readonly مع عنصر input في HTML form
تُستخدم خاصية readonly لتجعل input الحقل مقروء فقط ولا يتمكّن المستخدم من التعديل عليه.
- لا يمكن للمستخدم تعديل قيمة الحقل الذي يحمل readonly.
- يمكن أن نستخدم زر tab للتنقل بين other inputs بقية الحقول.
- يمكن تحديد قيمة الحقل الذي يحمل readonly.
- يمكن نسخ قيمة الحقل الذي يحمل readonly.
Form input readonly attribute
readonly سمة منطقية؛ وجودها يمنع تعديل الحقل بواسطة المستخدم، وكتابتها readonly="false" لا يلغيها. تبقى قيمة الحقل قابلة للإرسال عند وجود name، ويمكن تغييرها برمجيًا.
<form>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" value="Ahmed" ><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" value="Hamdy" readonly><br>
</form>
HTML form input disabled attribute
خاصية disabled مع عنصر input في HTML form
HTML form input disabled attribute خاصية disabled مع عنصر input في HTML form
تُستخدم خاصية disabled لتجعل input الحقل مُعطل أو غير فعال.
- unusable لا يمكن للمستخدم تعديل الحقل المعطل.
- un-clickable لا يستقبل الحقل المعطل التركيز أو التفاعل المعتاد.
- untab يتجاوز Tab الحقول المعطلة ويستمر إلى الحقول الأخرى القابلة للتركيز.
- unhighlight لا تعتمد على تحديد نص الحقل المعطل؛ يختلف ذلك حسب المتصفح.
- copy إذا أردت قيمة يستطيع المستخدم التركيز عليها ونسخها مع منع تحريرها، فاستخدم readonly على نوع حقل يدعمه.
Form input disabled attribute
disabled سمة منطقية؛ وجودها يعطل الحقل، وحتى disabled="false" يبقيه معطلًا. لا تُرسل قيمة الحقل المعطل مع النموذج، خلافًا لحقل readonly الذي يحمل name.
<form>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" value="Ahmed" ><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" value="Hamdy" disabled><br>
</form>
HTML form input size attribute
خاصية size مع عنصر input في HTML 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 لتحديد العرض التقريبي للحقل بعدد المحارف المرئية؛ تتقدم عليه قيود العرض في CSS ولا يحدد طول النص المسموح.
<form>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" size="50"><br>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" size="15"><br>
</form>
HTML form input maxlength attribute
خاصية maxlength مع عنصر input في HTML form
HTML form input maxlength attribute خاصية maxlength مع عنصر input في HTML form
تُستخدم خاصية maxlength مع HTML form input لتحديد أقصى عدد للحروف داخل عنصر input.
- لا يسمح بكتابة عدد حروف داخل عنصر input أكثر من عدد الحروف المحدّد داخل قيمة maxlength.
ينطبق maxlength على الأنواع النصية المدعومة، وليس number. يُحسب الطول بوحدات UTF-16؛ بعض الرموز مثل emoji تشغل أكثر من وحدة. التحقق في المتصفح لا يغني عن تحقق الخادم.
HTML form input maxlength attribute
استخدم خاصية maxlength مع HTML form input لتحديد أقصى عدد للحروف داخل عنصر input.
<form>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" maxlength="5"><br>
</form>
HTML form input min and max attribute
خاصية min وخاصية max مع عنصر input في HTML 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.
قد يسمح المتصفح بكتابة قيمة خارج المجال، لكنه يعدها غير صالحة؛ لا تعني min وmax أن كل إدخال خارج الحدود سيُمنع أثناء الكتابة.
HTML form input min and max attribute
مثال يوضح طريقة تحديد مجال القيم المسموح إدخالها، عن طريق تحديد القيمة 1 كأصغر قيمة مسموح بها وتحديد القيمة 5 كأكبر قيمة مسموح بها.
<form>
<label for="quantity">Product QTY:</label><br>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
HTML form input required attribute
خاصية required مع عنصر input في HTML form
HTML form input required attribute خاصية required مع عنصر input في HTML form
تُستخدم خاصية required attribute لتحديد input الحقول الإجبارية التي يُطلب من المستخدم تعبئتها قبل السماح بإرسال النموذج عند تشغيل التحقق المعتاد.
- تعمل خاصية required attribute مع الحقول من النوع: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.
جرّب بنفسكHTML form input required attribute
استخدام خاصية required لإظهار رسالة تخبر المستخدم أن ملء الحقل إجباري، عند محاولة الإرسال؛ يمكن النقر على الزر لكن التحقق يمنع الإرسال إذا بقي الحقل المطلوب فارغًا.
<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
HTML form input autocomplete attribute خاصية autocomplete مع عنصر input في HTML form
تستخدم خاصية autocomplete attribute لتقديم إرشاد للمتصفح بشأن التعبئة التلقائية لهذا الحقل، وليس لحفظ بيانات التطبيق أو حذفها.
- خاصية autocomplete attribute تسمح باقتراح تعبئة تلقائية باستخدام on أو تطلب تعطيلها باستخدام off؛ قد يتجاهل المتصفح أو مدير كلمات المرور الطلب في بعض الحالات.
- خاصية autocomplete attribute تعمل مع عنصر <form> وعنصر <input>.
HTML form input autocomplete attribute
خاصية autocomplete لتقديم تلميح بشأن التعبئة التلقائية؛ لا تضمن ظهور اقتراحات ولا تمسح بيانات المتصفح.
<form>
<label for="username" >Username:</label><br>
<input type="text" id="username" name="username" autocomplete="off"><br>
<label for="username-on" >Username:</label><br>
<input type="text" id="username-on" name="username_on" autocomplete="on"><br>
</form>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات6
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Formatting تنسيق
- للمراجعة
- 02 Small صغير
- للمراجعة
- 03 Mark علامة
- للمراجعة
- 04 Strong قوي
- للمراجعة
- 05 Italic مائل
- للمراجعة
- 06 Bold عريض
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 02 Del Del
- Delete
- حذف
- للمراجعة
- 03 Ins Ins
- Insert
- إدراج
- للمراجعة
- 04 Sub Sub
- Subscript
- نص سفلي
- للمراجعة
- 05 Sup Sup
- Superscript
- نص علوي
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.