HTML Form Text Inputs
الحقول النصية بداخل عنصر HTML Form
سوف تتعلم في هذا الدرس جميع أنواع inputs الحقول داخل عنصر HTML form، ووظيفة كل input، بالإضافة إلى الحقول الأكثر استخدامًا.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Form Text 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].
ملاحظة
إذا لم يتم تحديد نوع حقل الإدخال باستخدام الخاصية [type] داخل عنصر <input>، فإن المتصفح سيستخدم القيمة الافتراضية لهذا العنصر، وهي [text].
</>
HTML form input syntax
طريقة كتابة الحقول في HTML form
- العنصر <input> هو المسؤول عن تجميع البيانات من المستخدمين ثم إرسالها إلى الخادم [server].
- الخاصية type هي التي تحدد نوع الحقل، ويتم ذلك عن طريق تعيين قيمة لها مثل: "type="text.
Input Element Syntax
كيفية كتابة عنصر <input> مع تحديد النوع.
<input type= "value">
HTML Form Text Input
حقل من النوع [text] لإدخال نصوص قصيرة.
<form> <input type="text"> </form>
</>
HTML Form Text Input
حقل إدخال النصوص القصيرة في HTML form
لإنشاء حقل إدخال للنصوص القصيرة، يتم تحديد الخاصة [type] وتعيين قيمتها إلى [text] داخل عنصر <input>.
HTML Form Text Input
حقل من النوع [text] لإدخال نصوص قصيرة.
<form> <input type="text"> </form>
</>
HTML Form password Input
حقل إدخال كلمات المرور في HTML form
لإنشاء حقل إدخال لكلمات المرور، يتم تحديد الخاصية [type] وتعيين قيمتها إلى [password] داخل عنصر <input>.
HTML form password input
حقل من النوع password لإدخال كلمات المرور السرية.
<form> <input type="password"> </form>
ملاحظة
</>
HTML form email input
حقل إدخال البريد الإلكتروني email في HTML form
- input email يُستخدم في جميع الحقول التي تطلب عناوين البريد الإلكتروني من المستخدمين.
- القيمة المستخدمة داخل عنصر <input> هي email لعمل حقل إدخال عناوين بريد إلكتروني <"input type="email>.
- تعرض الأجهزة المحمولة المزودة بلوحات مفاتيح ديناميكية، بما في ذلك iOS و Android، لوحة مفاتيح بريد إلكتروني تحتوي على علامة "@" و "." .
HTML form email input
حقل من النوع email لإدخال عناوين البريد الإلكتروني.
<form> <input type="email"> </form>
</>
HTML form search input
حقل إدخال الكلمات البحثية في HTML form
تكون القيمة المستخدمة بداخل عنصر <input> هي search من أجل عمل حقل لإدخال الكلمات المفتاحية للبحث <"input type="seacrh>.
HTML form search input
حقل من النوع search لإدخال كلمات مفتاحية للبحث داخل موقع الويب.
<form> <input type="search"> </form>
</>
HTML form url input
حقل إدخال روابط صفحات الويب في HTML form
يستخدم حقل url input لتجميع عناوين الويب من المستخدمين داخل عنصر <form>.
- القيمة التي تُحدد حقل url input هي url لتصبح بهذا الشكل <"input type="url>.
HTML form url input
يُستخدم نوع الحقل url input عندما يُطلب من المستخدمين إدخال عنوان ويب.
<form> <label for="url">Add your homepage:</label> <input type="url" id="url" > </form>
</>
HTML form hidden input
حقل الإدخال المخفي hidden في HTML form
يستخدم حقل hidden input لتجميع بيانات برمجية من المستخدمين بشكل تلقائي دون أن يظهر على المتصفح داخل عنصر <form>.
- القيمة التي تحدد حقل hidden input هي hidden لتصبح بهذا الشكل <"input type="hidden>.
- لا يظهر hidden input على المتصفح، لأنه يُستخدم من قبل مطوري مواقع الويب لتجميع البيانات الخاصة بالمستخدم من قبل المتصفح.
HTML form hidden input
حقول الإدخال المخفية التي لا تظهر على المتصفح في لغة HTML.
<form> <input type="username"><br><br> <input type="hidden" id="id" name="id" value="3487"> </form>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
