في هذا الدرس 3تصفّح المواضيع
HTML Form Input value attribute
خاصية value مع عنصر input في HTML form
HTML Form Input value attribute خاصية value مع عنصر input في HTML form
عندما نضيف خاصية value attribute إلى عنصر <input> يقوم المتصفح بعرض هذه القيمة أمام المستخدم، حيث يمكن للمستخدم عندها التعديل على هذه القيمة أو يمكنه تجاهلها فتكون مساوية للقيمة الافتراضية.
- تُكتب القيمة بداخل خاصية value بين علامات تنصيص فردية أو مزدوجة.
- تكون القيمة بداخل خاصية value إما نصوص أو أرقام.
يتوقف معنى value على نوع input: في الحقل النصي يحدد القيمة الأصلية، وفي radio وcheckbox يحدد القيمة المرسلة للخيار، وفي زر submit يحدد النص الظاهر. لا تضبط قيمة حقل file لاختيار ملف للمستخدم.
Form input value attribute
القيمة الافتراضية لخاصية value attribute في form input.
<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"><br>
</form>
HTML form input placeholder attribute
خاصية placeholder مع عنصر input في HTML 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.
placeholder تلميح قصير يظهر عند خلو الحقل؛ لا يحل محل label ولا يُرسل كقيمة للحقل. يدعم number أيضًا التلميح في المتصفحات التي تعرضه.
Form input placeholder attribute
تُستخدم خاصية placeholder لمساعدة المستخدم في فهم ما المطلوب إدخاله في هذا الحقل.
<form>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" placeholder="Enter First Name"><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" placeholder="Enter Last Name"><br>
</form>
HTML form input height and width attributes
خاصيتي height و width مع عنصر input في HTML form
HTML form input height and width attributes خاصيتي height و width مع عنصر input في HTML form
نستخدم كلاً من خاصية height وخاصية width للتحكم في أبعاد ( طول وعرض ) وحجم عنصر input بداخل HTML form وذلك من أجل التحكم بشكل تصميم صفحة الويب.
- هذه الخاصية تعمل مع عنصر input من النوع image فقط.
- تُكتب سمات HTML height وwidth لأزرار الصور كأعداد صحيحة غير سالبة تمثل بكسلات CSS، مثل width="120" وheight="48". استخدم CSS عندما تريد وحدات مثل% أوpx؛ لا تضع هذه الوحدات داخل قيم سمتي HTML.
الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.
جرّب بنفسكForm input height and width attributes
تُستخدم خاصيتي height و width مع عنصر image input.
<form action="/options" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="image" src="https://www.closetag.com/images/submit.png" alt="submit" width="120" height="48">
</form>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات45
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Input Attributes سمات إدخال HTML
- للمراجعة
- 02 Attributes سمات
- للمراجعة
- 03 value قيمة
- للمراجعة
- 04 Input حقل إدخال
- للمراجعة
- 05 Result نتيجة
- للمراجعة
- 06 Form نموذج
- للمراجعة
- 07 Readonly قراءة فقط
- للمراجعة
- 08 Tab نافذة
- للمراجعة
- 09 Server خادم
- <p><a href="https://www.closetag.com/tutorial/internet/servers">المزيد عن Server</a></p>
- للمراجعة
- 10 Disabled معطل / غير نشط
- للمراجعة
- 11 Size حجم
- للمراجعة
- 12 Email بريد إليكتروني
- للمراجعة
- 13 Search بحث
- للمراجعة
- 14 Text نص
- للمراجعة
- 15 Password كلمة السر
- للمراجعة
- 16 Datetime-local التاريخ -الوقت المحلي
- للمراجعة
- 17 Date تاريخ
- للمراجعة
- 18 Range نطاق أو في حدود
- للمراجعة
- 19 Number رقم
- للمراجعة
- 20 Type نوع
- للمراجعة
- 21 Time وقت
- للمراجعة
- 22 Week أسبوع
- للمراجعة
- 23 Month شهر
- للمراجعة
- 24 Multiple متعدد
- للمراجعة
- 25 File ملف
- للمراجعة
- 26 Pattern نمط
- للمراجعة
- 27 Regular عادي
- للمراجعة
- 28 Expression تعبير
- للمراجعة
- 29 Placeholder ينوب
- للمراجعة
- 30 Required مطلوب
- للمراجعة
- 31 Checkbox مربع إختيار
- للمراجعة
- 32 Radio مربع إختيار دائري
- للمراجعة
- 33 Step خطوة
- للمراجعة
- 34 Autofocus تركيز تلقائي
- للمراجعة
- 35 Height ارتفاع
- للمراجعة
- 36 Width عرض
- للمراجعة
- 37 Submit تأكيد الإرسال
- للمراجعة
- 38 Image صورة
- للمراجعة
- 39 list قائمة
- للمراجعة
- 40 Datalist قائمة البيانات
- للمراجعة
- 41 Element عنصر
- للمراجعة
- 42 Options خيارات
- للمراجعة
- 43 Autocomplete تكملة تلقائية
- للمراجعة
- 44 Min Minimum
- حد أدني
- للمراجعة
- 45 Tel Telephone
- هاتف أو تليفون
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Maxlength Maxlength
- Maximum length
- الحد الأقصي للطول
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 03 Max Max
- Maximum
- حد أقصي
- للمراجعة
- 04 URL URL
- Uniform Resource Locator
- عنوان الموقع أو محدد الموقع الموحد<p><a href="https://www.closetag.com/tutorial/internet/browsers">المزيد عن URL</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.