HTML

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

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

التاريخ

11 يناير 2021

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

4030

المواضيع

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>
مصطلحات الدرس
HTML Input Attributes
HTML Input Attributes

سمات إدخال HTML

value
value

قيمة

Input
Input

حقل إدخال

Result
Result

نتيجة

Form
Form

نموذج

Readonly
Readonly

قراءة فقط

Tab
Tab

نافذة

Server
Server

خادم

link
Disabled
Disabled

معطل / غير نشط

Size
Size

حجم

Email
Email

بريد إليكتروني

Search
Search

بحث

Password
Password

كلمة السر

Datetime-local
Datetime-local

التاريخ -الوقت المحلي

Date
Date

تاريخ

Range
Range

نطاق أو في حدود

Number
Number

رقم

Type
Type

نوع

Time
Time

وقت

Week
Week

أسبوع

Month
Month

شهر

Multiple
Multiple

متعدد

File
File

ملف

Regular
Regular

عادي

Expression
Expression

تعبير

Required
Required

مطلوب

Checkbox
Checkbox

مربع إختيار

Radio
Radio

مربع إختيار دائري

Step
Step

خطوة

Autofocus
Autofocus

تركيز تلقائي

Height
Height

ارتفاع

Width
Width

عرض

Submit
Submit

تأكيد الإرسال

Image
Image

صورة

list
list

قائمة

Datalist
Datalist

قائمة البيانات

Element
Element

عنصر

Options
Options

خيارات

Autocomplete
Autocomplete

تكملة تلقائية

Min
Min

Minimum

حد أدني
Tel
Tel

Telephone

هاتف أو تليفون
اختصارات الدرس
Maxlength
Maxlength

Maximum length

الحد الأقصي للطول
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
Max
Max

Maximum

حد أقصي
URL
URL

Uniform Resource Locator

عنوان الموقع أو محدد الموقع الموحد
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.