HTML

HTML Form Input Primary Attributes
خصائص عنصر Input الأساسية مع HTML Form

سوف تتعرف في هذا الدرس على أهم الخصائص التي تُضاف إلى عنصر input مع HTML form، وأكثر هذه الخصائص شيوعاً.

التاريخ

11 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

4759

المواضيع

12
الشروحات chevron_left HTML Form Input Primary Attributes chevron_left HTML

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>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات