الوسم input و استخداماته مع تمارين متعددة في لغة html الدرس|18| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الثلاثاء، 26 مايو 2020

الوسم input و استخداماته مع تمارين متعددة في لغة html الدرس|18|


الوسم input في لغة html

هو وسم يستخدم لإنشاء عناصر تقبل الإدخال في الصفحة من المستخدم و أرسالها إلى السيرفر مثل مستطيل كتابة البريد الالكتروني و الباسورد عندما يكتبها المستخدم وترسل للسرفر عند الضغط على زر الإدخال و لهذا الوسم قيم متعددة سنذكرها جميعها في هذا الدرس.

الشكل العام له

<input/>

القيم الذي يأخذها الوسم input

text
button
color
datetime
date-time-color
hidden
image
reset
search
submit
tel,
url
week
password
number
date
radio
file
checkbox
month
range
time
email

شرح القيم السابقة

القيمة text
<input type="text" name="name">


القيمة password
<input type="password" name="password">

القيمة button
<input type="button" value="انقر للدخول"/>
الزر قابل للضغط على لكن ليس له اي شيئ افتراضي

القيمة checkbox
<input type="checkbox" name="checkbox"/>
يعطينا مربع ضغير نستطيع تأشيره بإشارة صح بحال توفر عدة خيارات

القيمة color
<input type="color" name="color"/>

صندوق يظهر لنا مجموعه الوان لاختيار احدها عند النقر على الصندوق
القيمة date
<input type="date" name="date"/>

يعطينا رزنامة نختار منها تاريخ الميلاد و الشهر و السنة و عادتاً ما تستخد للتسجيل في مواقع مثل الفيس لحفظ المواليد و ارسالها للسرفر.
القيمة datetime-local
<input type="datetime-local" name="datetime-local"/>

حقل يمكننا كتابة التاريخ به يدوي دون ظهور خيارات اختيار.

القيمة email
<input type="email" name="email"/>

يعطينا حقل يجب ملؤه ببريد الكتروني و لا يقبل ملؤه فقط بكتابة بل يكون صيغة بريد الكتروني كاملة مثل xxxxxxx@gmail.com حتى يسمح باستخدامه.

القيمة file
<input type="file" id="file"/>

هذا يسمح للمستخدم بأختيار ملف يطلبه منه صاحب الموقع و يختاره من جهازه كما موضح بالصورة بالاعلى.

القيمة hidden
<input type="hidden" name="hidden" id="hidden" value="raider"/>

يشير هذا العنصر إلى قيمة مخفية لكن سوف ترسل إلى المخدم و في المثال وضعنا القيمة raider.

القيمة image
<input type="image" name="image" src="img.png" alt="spider"/>

ينشئ لنا زر على شكل صورة قابل للضغط نستخدم به src لتحديد مكان الصورة و alt لوصفها بحال انترنت ضعيف و اسمينا وصفها هنا spider.

القيمة month
<input type="month" name="month"/>

يستخدك لإدخال السنة و الشهر 

القيمة number
<input type="number" name="number"/> 

ينشئ لنا حقل لإدخال ارقام فقط و يكون له اسهم لزيادة الارقام تسلسل او تنازل بالقيمة سالب.

القيمة radio
<input type="radio" name="radio"/>

زر يسمح لنا بإختيار خيار واحد من مجموعة خيارات موضوعة.

القيمة range
<input type="range" name="range"/> 

هذا يكون لتحديد قيمة معينة و يستعمل بالسحب للقيمة المراد اختيارها.


القيمة reset
<input type="reset" name="reset"/>

لا يحتاج لشرح من اسمه واضح انه عند الضغط عليه يفرغ الخانات الممتلئة و يعيدها لقيمتها الافتراضية.

القيمة search
<input type="search" name="search"/>

عبارة عن حقل فارغ للبحث عن شيئ معين في الصفحة و الاسطر الجديدة تحذف بشكل تلقائي.

القيمة submit
<type="submit" name="submit"/>

هذا هو الزر الذي عن طريقة يرسل كل شيئ شرحنا بالاعلى الى السيرفر مجرد الضغط عليه.

القيمة tel
<input type="tel" name="tel"/>
هذا الحقل لإدخال به رقم هاتف فقط.

القيمة time
<input type="time" name="time"/>

هذا يسمح لنا بكتابة الوقت يدوياً و يظهر لنا شخطات لتعبئتها بالوقت المطلوب.

القيمة week
<input type="week" name="week"/>

هذا الحقل يمكننا من كتابة السنة و رقم الاسبوع من السنة.

القيمة url
<input type="url" name="url"/>

هذا يمكننا من ادخال رابط صالح اي يدخل للحقل مبتدأً بالبروتوكول http/https و يكون رابط صالح.

القيمة datetime
<input type="datetime" name="datetime"/>

يسمح لنا بالأدخال التاريخ و الوقت بالدقائق و الثواني و يعتمد على المنطقة الزمنية.

الخصائص الذي تستخدم معه

placeholder تلميح النص
required اجبار المستخدم على التحديد
minlength حد ادنى
maxlength حد اقصى
value قيمة افتراضية
autofocus اضافة تركيز لأحد الخيارات
disable تعطيل خيار
multipl وضع جميع الخيارات تلقائياً لأحد الخيارات
checked
accept سماح
image/* جميع صيغ الصور
video/* جميع صيغ الفيديو
audio/* جميع صيغ ملفات الصوتية
.doc ملفات الوورد
.pdf ملفات البي دي اف

اضغط على كلمة التالي للدخول لقسم التمارين الخاصة بهذا الدرس



قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

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

رسالة *

اقسام