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

Programmer Tech

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

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

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

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


تمارين للوسم input

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


التمرين الأول

اكتب صفحة لتسجيل دخول متضمنة اسم مستخدم و كلمة مرور مع زر لتسجيل الدخول فقط عن طريق html.
<!Doctype html>
<html>
<head>
<title>Programmer Tech</title>
</head> 
<body>
<p>اسم مستخدم</p>
<input type="text" name="text"/> 
<p>كلمة مرور</p>
<input type="password" name="password"/>
 <button type="submit">تسجيل دخول</button>
</body>
</html> 


التمرين الثاني 

اكتب صفحة دخول تحتوي على بريد الكتروني و كلمة مرور و رقم هاتف و الجنس مع زر انشاء حساب.
<!Doctype html>
<html>
<head>
<title>Programmer Tech</title>
</head> 
<body>
<p>بريد الكتروني</p>
<input type="email" name="email"/> 
<p>كلمة مرور</p>
<input type="password" name="password"/> 
<p>رقم الهاتف</p>
<input type="tel" name="tel"/>
<p>الجنس</p>
<select>
<option>ذكر</option> 
<option>انثى</option>
</select> <br>
 <button type="submit">تسجيل دخول</button>
</body>
</html> 


التمرين الثالث

اكتب صفحة ويب مشابهة لبيانات انشاء حساب الفيسبوك تماماً فقط بـ html بالذي تعملناه في الدرس و تكون جهة الصفحة عربي من اليمين لليسار.
<!Doctype html>
<html dir="rtl>
<head>
<title>Programmer Tech</title>
</head> 
<body>
<form>
<input type="text" name="text" placeholder="اسم الأول"/>
<input type="text" name="text" placeholder="اسم العائلة"/><br>
 <input type="email" name="email" placeholder="البريد الالكتروني"/><br>
<input type="password" name="password" placeholder="كلمة المرور"/><br>
<input type="date" name="date" /> <br>
<p>الجنس</p> 
<label>ذكر</label>
<input type="radio" name="الجنس" value="ذكر" required/>
<label>انثى</label>
<input type="radio" name="الجنس" value="انثى" required/><br>
<button type="submit">انشاء حساب</button>
<form>
</body>
</html>


التمرين الرابع

اكتب صفحة ويب تمكن المستخدم من رفع ملفات إلى السيرفر وتكون الملفات المطلوبة هي جميع انواع الصور و الفيديو.
<!Doctype html>
<html>
<head>
<title>Programmer Tech</title>
</head> 
<body> 
<form>
<input type="file" accept="image/*,video/*"/>  
</form>
</body>
</html> 


للدخول لقناتنا اضغط على الصورة الآتية

https://t.me/Programmer_Tech

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

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

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

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

الاسم

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

رسالة *

اقسام