عناصر وسمات نماذج "اتش.تي.ام.ال" HTML Form Elements and Attributes
- عنصر النموذج (
form element ) : يُستخدم لإنشاء نموذج "اتش.تي.ام.ال" لإدخال بيانات المستخدم.
- سمة الإجراء (
action attribute ) : تُستخدم لتحديد عنوان URL الذي يجب إرسال بيانات النموذج إليه.
- سمة الطريقة (
method attribute ) : تُستخدم لتحديد طريقة HTTP المُستخدمة عند إرسال بيانات النموذج. أكثر الطرق شيوعاً هي GET و POST .
<form method="توضع القيمة هنا" action="يوضع الرابط هنا">
<!-- عناصر الإدخال توضع هنا -->
</form>
- عنصر الإدخال (
input element ) : يُستخدم لإنشاء حقل لإدخال بيانات المستخدم.
- سمة النوع (
type attribute ) : تُستخدم لتحديد نوع حقل الإدخال، مثل: text "نص"، و email "بريد إلكتروني"، و number "رقم"، و radio "زر اختيار أحادي"، و checkbox "مربع اختيار"، وغيرها.
- سمة النص التوضيحي (
placeholder attribute ) : تُستخدم لعرض تلميح للمستخدم لإرشاده إلى ما يجب إدخاله في حقل الإدخال.
- سمة القيمة (
value attribute ) : تُستخدم لتحديد قيمة عنصر الإدخال. إذا كان عنصر الإدخال من النوع "زر" button ، فيمكن استخدام هذه السمة value لتعيين النص الذي يظهر على الزر.
- سمة الاسم (
name attribute ) : تُستخدم لتحديد اسم لحقل الإدخال، حيث يعمل هذا الاسم كمفتاح عند إرسال بيانات النموذج. وفي حالة أزرار الاختيار، فإن منحها الاسم نفسه يجمعها معاً، بحيث لا يمكن اختيار سوى خيار واحد فقط من المجموعة في آنٍ واحد.
- سمة الحجم (
size attribute ) : تُستخدم لتحديد عدد الأحرف التي ستظهر أثناء كتابة المستخدم في حقل الإدخال.
- سمة الحد الأدنى (
min attribute ) : يمكن استخدامها مع أنواع الإدخال مثل "الأرقام" number لتحديد الحد الأدنى للقيمة المسموح بها في حقل الإدخال.
- سمة الحد الأقصى (
max attribute ) : يمكن استخدامها مع أنواع الإدخال مثل "الأرقام" number لتحديد القيمة القصوى المسموح بها في حقل الإدخال.
- سمة الحد الأدنى للطول (
minlength attribute ) : تُستخدم لتحديد الحد الأدنى لعدد الأحرف المطلوبة في حقل الإدخال.
- سمة الحد الأقصى للطول (
maxlength attribute ) : تُستخدم لتحديد الحد الأقصى لعدد الأحرف المسموح به في حقل الإدخال.
- السمة مطلوب (
required attribute ) : تُستخدم لتحديد وجوب ملء حقل الإدخال قبل إرسال النموذج.
- السمة معطل (
disabled attribute ) : تُستخدم لتحديد ما إذا كان يجب تعطيل حقل إدخال.
- السمة للقراءة فقط (
readonly attribute ) : تُستخدم لتحديد أن حقل الإدخال للقراءة فقط.
<!-- Text input إدخال النص -->
<input
type="text"
id="name"
name="name"
placeholder="على سبيل المثال: كوينسي لارسون"
size="20"
minlength="5"
maxlength="30"
required
/>
<!-- Number input إدخال رقم -->
<input
type="number"
id="quantity"
name="quantity"
min="2"
max="10"
disabled
/>
<!-- Button زر -->
<input type="button" value="Show Alert" />
- عنصر التسمية (
label element ) : يُستخدم لإنشاء تسمية لحقل إدخال.
- السمة إلى (
for attribute ) : تُستخدم لتحديد حقل الإدخال الذي تعود إليه التسمية label .
- الربط الضمني بين الحقل والتسمية Implicit form association : يمكن ربط حقول الإدخال بالتسميات labels عن طريق وضع حقل الإدخال داخل عنصر التسمية
label .
<form action="">
<label>
:الاسم الكامل
<input type="text" />
</label>
</form>
- الربط الصريح للعناصر Explicit form association : يمكن ربط حقول الإدخال بالتسميات labels باستخدام السمة إلى
for في عنصر التسمية label .
<form action="">
<label for="email"> :عنوان البريد الإلكتروني </label>
<input type="email" id="email" />
</form>
- عنصر الزر (
button element ) : يُستخدم لإنشاء زر قابل للنقر. يمكن أن يحتوي الزر أيضاً على سمة النوع type ، التي تُستخدم للتحكم في سلوك الزر عند تفعيله، مثل: إرسال submit ، وإعادة تعيين reset، وزر عادي button .
<button type="button">إظهار النموذج</button>
<button type="submit">إرسال النموذج</button>
<button type="reset">إعادة تعيين النموذج</button>
- عنصر مجموعة الحقول (
fieldset element ) : يُستخدم لتجميع المدخلات ذات الصلة معًا.
- عنصر الشرح (
legend element ) : يُستخدم لإضافة شرح لوصف مجموعة المدخلات.
<!-- Radio group مجموعة أزرار اختيار -->
<fieldset>
<legend>هل كانت هذه زيارتك الأولى لفندقنا؟</legend>
<label for="yes-option">نعم</label>
<input id="yes-option" type="radio" name="hotel-stay" value="yes" />
<label for="no-option">لا</label>
<input id="no-option" type="radio" name="hotel-stay" value="no" />
</fieldset>
<!-- Checkbox group مجموعة مربعات اختيار -->
<fieldset>
<legend>
لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)
</legend>
<label for="location">الموقع</label>
<input type="checkbox" id="location" name="location" value="location" />
<label for="price">السعر</label>
<input type="checkbox" id="price" name="price" value="price" />
</fieldset>
- حالة التركيز Focused state : هي حالة حقل الإدخال عندما يختاره المستخدم.