في هذا الدرس 10تصفّح المواضيع
HTML form elements
العناصر المستخدمة مع HTML form
HTML form elements العناصر المستخدمة مع HTML form
تُستخدم العناصر مع HTML form لعدّة أغراض، فمنها خاص بتجميع البيانات النصية، ومنها خاص بتجميع الملفات ومنها خاص بتجميع اختيارات محدّّدة.
أهم العناصر المستخدمة مع HTML Form
- <input> ينشئ أنواعًا متعددة من الحقول، مثل النصوص والاختيارات والملفات، حسب type.
- <label> يُستخدم في عرض عناوين قصيرة أعلى أو بجوار أي عنصر داخل HTML form ليساعد المستخدمين في فهم المعلومات التي سوف تُكتب داخل input الحقل.
- <select> يُستخدم في عرض قائمة اختيارات للمستخدمين، لجعلهم يختارون منها عنصر أو أكثر.
- <textarea> يُستخدم في تجميع نصوص كبيرة من المستخدمين.
- <button> يُستخدم في عمل أزرار (أيقونات) يؤدي النقر عليها إلى حدوث action تأثير أو حدث معين في صفحة الويب.
- <fieldset> يُستخدم لعمل مجموعة حقول input متعلقة ببعضها البعض، مثل: بيانات الاتصال داخل السيرة الذاتية.
- <legend> يُستخدم لعمل عنوان أو إضافة معلومات متعلقة بمجموعة الحقول داخل عنصر <fieldset>.
- <datalist> يُستخدم لعمل قائمة تظهر بداخل عنصر input عند النقر عليه.
- <output> يُستخدم لعمل منطقة نتائج حسابية.
- <option> يُستخدم لعمل عنصر داخل القوائم المُنسدلة.
- <optgroup> يُستخدم لعمل عناصر متعلقة ببعضها البعض داخل القوائم المُنسدلة.
HTML form input
عنصر input داخل HTML form
HTML form input عنصر input داخل HTML form
- عنصر <input> ينشئ حقل إدخال؛ يرسل النموذج الحقول المشاركة ذات name عند الإرسال، ولا يرسل input البيانات وحده.
- الخاصية type هي التي تحدد نوع الحقل input type من خلال قيمة هذه الخاصية "type="text.
Syntax input element
طريقة كتابة عُنصر <input>.
<input type="text" name="username">HTML form text input
استخدام حقل من النوع text لإدخال النصوص القصيرة.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
HTML form label input
عنصر label لتسمية الحقول في HTML form
HTML form label input عنصر label لتسمية الحقول في HTML form
يستخدم عنصر label مع عنصر <input> لعمل عناوين نصية أعلى input الحقل.
- يقوم عنصر label بمساعدة المستخدمين فعند قيامهم بالضغط على النصوص الصغيرة (على label)، يقوم المتصفح بتوجيههم إلى الحقول الأخرى مباشرة.
- يتم ربط label مع حقل آخر عن طريق خاصية for وخاصية id.
- تُضاف خاصية for إلى عنصر label.
- تُضاف id فريدة للحقل المرتبط، من نوع يقبل label؛ الحقل hidden لا يقبل هذا الربط.
- تُضاف نفس القيمة لخاصية for وخاصية id.
HTML form label input
عمل نصوص صغيرة فوق الحقول تشرح للمستخدمين ما يجب إدخاله ضمن الحقول، باستخدام عنصر label.
<form>
<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>
</form>
HTML form select element
عنصر select مع HTML form
HTML form select element عنصر select مع HTML form
يُستخدم عنصر <select> في لغة HTML بداخل عنصر <form> لعمل قوائم منسدلة بها قائمة اختيارات، لكي يختار منها المستخدم خيار أو أكثر مثل قائمة الدول.
عنصر <select> هو عبارة عن حاوية تحتوي مجموعة عناصر، حيث تكون هذه العناصر بداخل عنصر <option>.
- يظهر أمام المستخدم عنصر واحد فقط وبجواره سهم، فعندما يقوم المستخدم بالضغط على السهم تفتح القائمة المنسدلة.
إرسال الاختيار يحتاج name على select، وتحدد value على option القيمة المرسلة؛ إذا غابت value تُستخدم نصوص الخيار. يدعم multiple اختيار عدة خيارات وقد يعرضها كقائمة بدل قائمة منسدلة.
HTML form select element
كل عنصر داخل select يكون بداخل option element.
<form>
<label for="course">Course:</label>
<select id="course" name="course">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>PHP</option>
</select>
</form>
HTML form optgroup element
عنصر optgroup مع عنصر select في HTML form
HTML form optgroup element عنصر optgroup مع عنصر select في HTML form
يستخدم عنصر <optgroup> لعمل تصنيفات بداخل عنصر <select> ليجمع كل مجموعة عناصر معاً.
HTML form optgroup element
عمل مجموعة عناصر متعلقة ببعض ضمن تصنيف واحد داخل عنصر <select>.
<form>
<label for="courses">Choose a Course:</label>
<select name="course" id="courses">
<optgroup label="Front-End">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JS">JS</option>
</optgroup>
<optgroup label="Back-End">
<option value="PHP">PHP</option>
<option value="MYSQL">MYSQL</option>
</optgroup>
</select>
<input type="submit" value="Submit">
</form>
HTML form textarea element
عنصر textarea مع HTML form
HTML form textarea element عنصر textarea مع HTML form
يُستخدم عنصر <textarea> بداخل HTML form لعمل منطقة نصية لتستقبل نصوصًا متعددة الأسطر؛ يمكن تقييد طولها باستخدام maxlength.
- يُستخدم عنصر <textarea> في جمع النصوص المكتوبة من قبل المستخدمين والتي تزيد عن سطر.
- خاصية rows attribute تحدد عدد الأسطر أي ارتفاع textarea الذي يظهر على المتصفح للمستخدمين.
- خاصية cols attribute تحدد طول الأسطر أي عرض textarea الذي يظهر على المتصفح للمستخدمين.
HTML form textarea element
إنشاء منطقة نصية داخل HTML form تتيح للمستخدمين إدخال نصوص متعددة الأسطر، مع إمكان تحديد طول أقصى، باستخدام عنصر textarea.
<form>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="10" cols="100">This is a default text</textarea>
</form>
HTML form button element
عنصر button مع HTML form
HTML form button element عنصر button مع HTML form
يُستخدم عنصر <button> لعمل زر عند الضغط عليه يقوم بحدث معين داخل صفحة الويب، ويعتمد سلوكه على قيمة type؛ يمكن ربط type="button" بمعالج JavaScript.
- يمكن لعنصر button إرسال النموذج إذا كان type="submit"؛ وهذا السلوك الافتراضي عند ارتباطه بنموذج وغياب type.
- يمكن تغيير قيمة type attribute إلى submit ليتحول عنصر button إلى submit لتنفيذ action.
HTML form button Element
اختير type="button" صراحةً في المثال؛ لذلك لا يرسل النموذج ولا ينفذ إجراءً بدون معالج. type="reset" يعيد القيم الأصلية وtype="submit" يبدأ الإرسال.
HTML form submit button
تحويل عنصر button إلى submit من خلال تغيير قيمة type attribute.
HTML form datalist element
عنصر datalist مع HTML form
HTML form datalist element عنصر datalist مع HTML form
يُستخدم عنصر <datalist> لعمل قائمة منسدلة بداخل عنصر input، لتقديم اقتراحات للحقل المرتبط؛ يستطيع المستخدم إدخال قيمة أخرى صالحة، ولا تصبح القائمة اختيارًا متعددًا تلقائيًا.
- يتم إضافة خاصية list لعنصر <input> وكتابة قيمة خاصة بها ثم يتم تكرار نفس القيمة داخل خاصية id لعنصر <datalist> وذلك لكي تظهر القائمة داخل عنصر input.
- تختلف طريقة عرض الاقتراحات حسب المتصفح؛ قد تظهر عند التركيز أو الكتابة.
الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.
جرّب بنفسكHTML form datalist element
استخدام عنصر <datalist> لعمل قائمة منسدلة بداخل عنصر input وتختلف طريقة ظهور الاقتراحات باختلاف المتصفح.
<form>
<label for="browser-choice">Browser:</label>
<input id="browser-choice" name="browser" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
HTML form fieldset and legend elements
عنصر fieldset وعنصر legend مع HTML form
HTML form fieldset and legend elements عنصر fieldset وعنصر legend مع HTML form
يُستخدم عنصر <fieldset> لعمل مجموعة بيانات مرتبطة بعضها لبعض داخل HTML form.
يُستخدم عنصر <legend> لإنشاء عنوان أو معلومات إضافية حول مجموعة بيانات عنصر <fieldset>.
الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.
جرّب بنفسكHTML form fieldset and legend elements
ُيمكن عمل أكثر من مجموعة بداخل HTML form، وذلك لإنشاء بيانات منفصلة، مثل: بيانات العمل والبيانات الشخصية والشهادات داخل السيرة الذاتية، حيث تكون كل مجموعة منفصلة عن الأخرى.
<form>
<fieldset>
<legend>Personal Details:</legend>
<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="Aly"><br><br>
<input type="submit" value="Login">
</fieldset>
</form>
HTML form output element
عنصر output مع HTML form
HTML form output element عنصر output مع HTML form
output يعرض نتيجة عملية أو حساب، ولا يحسبها تلقائيًا. لا تُرسل قيمته مع بيانات النموذج. المعاينة التالية ديناميكية بـJavaScript، بينما مثال الكود اللاحق يعرض القيمة الثابتة5932 لشرح العنصر وحده.
JavaScript
يتطلب هذا النموذج أوامر بلغة جافا سكريبت لكي يظهر بهذا الشكل، ولكن سنتعرف الآن فقط على العنصر الذي يظهر output على المتصفح بلغة HTML.
HTML form output element
إجراء العمليات الحسابية داخل HTML form.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات19
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Form نموذج
- للمراجعة
- 02 Elements عناصر
- للمراجعة
- 03 Textarea منطقة خاصة بالنص
- للمراجعة
- 04 Button زر
- للمراجعة
- 05 Dropdown list قائمة منسدلة
- للمراجعة
- 06 Option خيار
- للمراجعة
- 07 Selected محدد
- للمراجعة
- 08 Attribute سمة
- للمراجعة
- 09 Size حجم
- للمراجعة
- 10 Allow السماح
- للمراجعة
- 11 Multiple متعدد
- للمراجعة
- 12 Select تحديد
- للمراجعة
- 13 Rows صفوف
- للمراجعة
- 14 Datalist قائمة البيانات
- للمراجعة
- 15 Input حقل إدخال
- للمراجعة
- 16 list قائمة
- للمراجعة
- 17 link رابط
- للمراجعة
- 18 Result نتيجة
- للمراجعة
- 19 Output إخراج
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Id Id
- Idenitity
- معرف هوية فريد
- للمراجعة
- 02 Optgroup Optgroup
- Option Group
- مجموعة إختيار
- للمراجعة
- 03 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 04 Cols Cols
- Columns
- أعمدة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.