في هذا الدرس 8تصفّح المواضيع
HTML form inputs
الحقول داخل عنصر form في لغة HTML
HTML form inputs الحقول داخل عنصر form في لغة HTML
حقول النماذج في HTML هي عناصر إدخال يستخدمها المستخدم لملء البيانات ليتم إرسالها إلى الخادم [server] لمعالجتها أو حفظها.
تتنوع هذه الحقول في أنواعها، حيث إن هناك حقول نصية، وحقول للاختيار، وحقول للملفات، وحقول لاختيار الألوان، وكل نوع يقبل نوعًا محددًا من البيانات.
أنواع إدخالات النماذج في HTML:
- text: يُستخدم لإدخال نصوص، مثل: اسم المستخدم، الاسم.
- password: لإدخال كلمات المرور مع إخفاء محارفها بصريًا عادةً؛ الإخفاء ليس تشفيرًا للقيمة.
- email: لإدخال عنوان بريد إلكتروني.
- radio: لاختيار خيار واحد من مجموعة خيارات متعددة، مثل: النوع، ذكر أو أنثى.
- checkbox: لاختيار مجموعة خيارات، مثل: مجموعة دورات.
- submit: يُنشئ زرًا لإرسال البيانات إلى الخادم بعد إكمال الإدخال.
- reset: يُنشئ زرًا لإعادة الحقول إلى قيمها الافتراضية، وليس بالضرورة جعلها فارغة.
- button: يُستخدم لتنفيذ أوامر JavaScript عند الضغط عليه.
- image: يُستخدم هذا النوع لعرض صورة تقوم بإرسال البيانات عند النقر عليها، بدلاً من استخدام زر تقليدي.
- color: لاختيار لون باستخدام أداة انتقاء اللون.
- range: لإنشاء مؤشر للتحريك بين قيمتين محددتين مسبقًا.
- date: لإدخال تاريخ.
- datetime-local: لإدخال تاريخ ووقت محلي.
- month: للتحكم في إدخال الشهر والسنة.
- week: لإدخال التاريخ مع الأسبوع والسنة.
- number: لإدخال قيمة رقمية.
- url: لإدخال رابط صفحة ويب.
- search: لإدخال نص بحث.
- tel: لإدخال رقم هاتف.
- file: لاختيار ملف من الجهاز؛ لا يرفعه الاختيار وحده إلى الخادم.
- hidden: لحقل إدخال مخفي.
HTML form input
يظهر حقل الإدخال في HTML بهذا الشكل في المتصفح عندما يكون نوعه نصيًا [text].
HTML form input syntax
طريقة كتابة الحقول في HTML form
HTML form input syntax طريقة كتابة الحقول في HTML form
- العنصر <input> يوفر أداة إدخال. يرسل النموذج الحقول المشاركة عند الإرسال، أو يقرأ JavaScript قيمها؛ لا يرسل الحقل البيانات إلى الخادم من تلقاء نفسه.
- الخاصية type هي التي تحدد نوع الحقل، ويتم ذلك عن طريق تعيين قيمة لها مثل: "type="text.
يربط label بالحقل عبر for وid، بينما يحدد name اسم القيمة عند إرسال النموذج. placeholder ليس بديلًا عن تسمية واضحة.
Input Element Syntax
كيفية كتابة عنصر <input> مع تحديد النوع.
<input type= "value">HTML Form Text Input
حقل من النوع [text] لإدخال نص في سطر واحد؛ يحدد maxlength حد الطول عند الحاجة.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
HTML Form Text Input
حقل إدخال النصوص أحادية السطر في HTML form
HTML Form Text Input حقل إدخال النصوص أحادية السطر في HTML form
لإنشاء حقل إدخال للنصوص أحادية السطر، يتم تحديد الخاصة [type] وتعيين قيمتها إلى [text] داخل عنصر <input>.
HTML Form Text Input
بهذا الشكل يكون حقل إدخال النصوص text input.
HTML Form Text Input
حقل من النوع [text] لإدخال نص في سطر واحد؛ يحدد maxlength حد الطول عند الحاجة.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
HTML Form password Input
حقل إدخال كلمات المرور في HTML form
HTML Form password Input حقل إدخال كلمات المرور في HTML form
لإنشاء حقل إدخال لكلمات المرور، يتم تحديد الخاصية [type] وتعيين قيمتها إلى [password] داخل عنصر <input>.
HTML form password input
حقل من النوع password لإدخال كلمات المرور السرية.
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</form>
HTML form email input
حقل إدخال البريد الإلكتروني email في HTML form
HTML form email input حقل إدخال البريد الإلكتروني email في HTML form
- input email يُستخدم في جميع الحقول التي تطلب عناوين البريد الإلكتروني من المستخدمين.
- القيمة المستخدمة داخل عنصر <input> هي email لعمل حقل إدخال عناوين بريد إلكتروني <"input type="email>.
- قد تعرض الأجهزة المحمولة لوحة مفاتيح مناسبة للبريد؛ تفاصيلها تعتمد على النظام والمتصفح.
يتحقق النوع email من الصيغة الأساسية، ولا يثبت وجود صندوق البريد أو ملكيته. القيمة الفارغة مسموحة ما لم تضف required؛ تحقق من البيانات على الخادم أيضًا.
HTML form email input
حقل من النوع email لإدخال عناوين البريد الإلكتروني.
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>
HTML form search input
حقل إدخال الكلمات البحثية في HTML form
HTML form search input حقل إدخال الكلمات البحثية في HTML form
تكون القيمة المستخدمة بداخل عنصر <input> هي search من أجل عمل حقل لإدخال الكلمات المفتاحية للبحث <input type="search">.
يوفر search حقل إدخال، لكنه لا ينفذ البحث في موقع أو قاعدة بيانات وحده؛ يلزم ربطه بعملية بحث.
HTML form search input
حقل من النوع search لإدخال كلمات مفتاحية للبحث داخل موقع الويب.
<form>
<label for="search">Search:</label>
<input type="search" id="search" name="q">
</form>
HTML form url input
حقل إدخال روابط صفحات الويب في HTML form
HTML form url input حقل إدخال روابط صفحات الويب في HTML form
يستخدم حقل url input لتجميع عناوين الويب من المستخدمين داخل عنصر <form>.
- القيمة التي تُحدد حقل url input هي url لتصبح بهذا الشكل <"input type="url>.
يتحقق url من صيغة عنوان مطلق عند إدخال قيمة، لا من وجود الصفحة أو إمكانية الوصول إليها. تبقى القيمة الفارغة صالحة دون required.
HTML form url input
يُستخدم نوع الحقل url input عندما يُطلب من المستخدمين إدخال عنوان ويب.
<form>
<label for="url">Add your homepage:</label>
<input type="url" id="url" name="homepage" >
</form>
HTML form hidden input
حقل الإدخال المخفي hidden في HTML form
HTML form hidden input حقل الإدخال المخفي hidden في HTML form
يحمل hidden قيمة يحددها التطبيق داخل النموذج دون عرض أداة إدخال للمستخدم؛ لا يجمع معلومات عنه تلقائيًا.
- القيمة التي تحدد حقل hidden input هي hidden لتصبح بهذا الشكل <"input type="hidden>.
- عند وجود name تُضمّن قيمته في بيانات النموذج رغم عدم عرضه. يمكن للمستخدم قراءة هذه القيمة وتغييرها بأدوات المتصفح؛ فلا تعتمد عليها لإثبات هوية أو صلاحية.
HTML form hidden input
حقول الإدخال المخفية التي لا تظهر على المتصفح في لغة HTML.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات30
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Form Inputs نموذج حقول إدخال HTML
- للمراجعة
- 02 Inputs حقول إدخال
- للمراجعة
- 03 Username إسم المستخدم
- للمراجعة
- 04 Password كلمة السر
- للمراجعة
- 05 Checkbox مربع إختيار
- للمراجعة
- 06 Submit تأكيد الإرسال
- للمراجعة
- 07 Reset إعادة تعيين
- للمراجعة
- 08 Element عنصر
- للمراجعة
- 09 Server خادم
- <p><a href="https://www.closetag.com/tutorial/internet/servers">المزيد عن Server</a></p>
- للمراجعة
- 10 Input حقل إدخال
- للمراجعة
- 11 Attribute سمة
- للمراجعة
- 12 Type نوع
- للمراجعة
- 13 Result نتيجة
- للمراجعة
- 14 Text نص
- للمراجعة
- 15 Button زر
- للمراجعة
- 16 Radio مربع إختيار دائري
- للمراجعة
- 17 label عنوان حقل الإدخال
- للمراجعة
- 18 Email بريد إليكتروني
- للمراجعة
- 19 Color لون
- للمراجعة
- 20 File ملف
- للمراجعة
- 21 Hidden مخفي
- للمراجعة
- 22 Image صورة
- للمراجعة
- 23 Number رقم
- للمراجعة
- 24 Range نطاق أو في حدود
- للمراجعة
- 25 Search بحث
- للمراجعة
- 26 Date تاريخ
- للمراجعة
- 27 Datetime-local التاريخ -الوقت المحلي
- للمراجعة
- 28 Month شهر
- للمراجعة
- 29 Time وقت
- للمراجعة
- 30 Week أسبوع
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
- للمراجعة
- 02 Tel Tel
- Telephone
- هاتف أو تليفون
- للمراجعة
- 03 URL URL
- Uniform Resource Locator
- عنوان الموقع أو محدد الموقع الموحد<p><a href="https://www.closetag.com/tutorial/internet/browsers">المزيد عن URL</a></p>
- للمراجعة
- 04 PHP PHP
- PHP, Hypertext Preprocesso
- لغة برمجة مفتوحة المصدر مستخدمة على نطاق واسع<p><a href="https://www.closetag.com/tutorial/php/php-introduction">المزيد عن PHP</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي4 أسئلة تنتظرك ＋
ماهو اسم ال attribute الذي يستخدم في تحديد نوع عنصر input ؟
____