recent
أخبار ساخنة

تمارين متعددة عن الوسم 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

google-playkhamsatmostaqltradent