استفسار عن استخدام أكواد البايثون في التحرك بين الخلايا والملئ التلقائي

Mohammed Hassan20 · 8 مارس

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

تم التعديل في 8 مارس بواسطة Mohammed Hassan20
توضيح وجود صورة مرفقة

Mahmoud Hassan19 · 8 مارس

مرحبا محمد
اذا كنت تريد فعل مثل هذه الفورم فيجب عليك تعمل html ,css وكما مع javascript , وبعض المكتبات الاخري التي تقدم لك سهوله في design مثل bootstrap و Tailwind CSS وبهكذا تبدا في عالم ال front end وهو اللذي يوفر لك الشكل اللذي سظهر للمستخدم مثال علي ذاللك وفيما انت طلبت

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    form {
      width: 100%;
      max-width: 400px;
      padding: 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input, select {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }
  </style>
  <title>Registration Form</title>
</head>
<body>

  <div class="container">
    <h2 class="text-center mb-4">Registration Form</h2>

    <form>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" name="email" required>
      </div>

      <div class="form-group">
        <label for="phone">Phone Number:</label>
        <input type="tel" class="form-control" id="phone" name="phone" required>
      </div>

      <div class="form-group">
        <label>Date of Birth:</label>
        <div style="display: flex; gap: 8px;">
          <select class="form-control" name="day" id="day" required>
            <option value="" disabled selected>Day</option>
          </select>

          <select class="form-control" name="month" id="month" required>
            <option value="" disabled selected>Month</option>
          </select>

          <select class="form-control" name="year" id="year" required>
            <option value="" disabled selected>Year</option>
          </select>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">Register</button>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>
    
    document.addEventListener("DOMContentLoaded", function () {
    
      function generateOptions(start, end, element) {
        for (let i = start; i <= end; i++) {
          let option = document.createElement("option");
          option.value = i;
          option.text = i;
          element.appendChild(option);
        }
      }

     
      let dayDropdown = document.getElementById("day");
      let monthDropdown = document.getElementById("month");
      let yearDropdown = document.getElementById("year");

      generateOptions(1, 31, dayDropdown);
      generateOptions(1, 12, monthDropdown);

      let currentYear = new Date().getFullYear();
      generateOptions(currentYear, currentYear - 100, yearDropdown);
    });
  </script>
</body>
</html>

هنا في ذاللك المثال نستخدم html , css ,javascript,bootstrap
نستخدم bootstrap لانه بها styles جاهزه نستتطيع استخدامها بكل سهول ويسر في تنظيم الشكل كما تم استخدام ال javascript لكي نملا ال fields الخاصة بتاريخ الميلاد

ومن الممكن استخدام مكتبات في python مثل django اذ كانت هناك خبره لك في python
هذه المكتبة توفر لك كتابة الكود backend و frontend لانك من الممكن استخدام MVT وهذا structure في django تستطيع استخدامة تطوير البرامج كما يتطلب منك ايضا تعلم html ,css,javascript

ياسر مسكين · 8 مارس

فهمت أنك تريد الانتقال بين حقول متعددة ديناميكيا، ثم الانتظار عند حقل الشهر لحين الدّوس على زر Tab للانتقال إلى حقل العام، الجنس وهكذا! أرجو الإشارة في حالة لم يكن هذا ما كنت تقصده.

لتطبيق ذلك، يمكننا البدء باستخدام JavaScript مثلا عبر استخدام الأحداث للتفاعل مع العناصر في واجهة المستخدم والتحكم في التنقل بين الحقول، بهذا الشكل:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<form id="registrationForm">
  <!-- حقول التسجيل -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone" required><br><br>

  <label for="day">Day:</label>
  <input type="text" id="day" name="day" required><br><br>

  <label for="month">Month:</label>
  <input type="text" id="month" name="month" required><br><br>

  <label for="year">Year:</label>
  <input type="text" id="year" name="year" required><br><br>

  <button type="submit">Submit</button>
</form>

<script>
// عندما يتم فقدان التركيز عن حقل البريد، التركيز على حقل الهاتف
document.getElementById('email').addEventListener('blur', function() {
  document.getElementById('phone').focus();
});

// عندما يتم فقدان التركيز عن حقل الهاتف، التركيز على حقل اليوم
document.getElementById('phone').addEventListener('blur', function() {
  document.getElementById('day').focus();
});

// عندما يتم فقدان التركيز عن حقل اليوم، التركيز على حقل الشهر
document.getElementById('day').addEventListener('blur', function() {
  document.getElementById('month').focus();
});

// عندما يتم فقدان التركيز عن حقل الشهر، التركيز على حقل السنة
document.getElementById('month').addEventListener('blur', function() {
  // انتظار الضغط على "Tab" للانتقال إلى السنة
  document.getElementById('year').addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
      event.preventDefault(); // تجنب التحرك التلقائي إلى الحقل التالي
      document.getElementById('year').focus(); // التركيز على حقل السنة
    }
  });
});
</script>
</body>
</html>

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

باستخدام الجافا سكريبت بحيث حينما:

يتم فقدان التركيز عن حقل البريد الإلكتروني، ينتقل التركيز تلقائيا إلى حقل رقم الهاتف.
وعندما يتم فقدانه عن حقل رقم الهاتف، ينتقل تلقائيا إلى حقل اليوم ثم إلى الشهر.
وعندما يتم فقدانه عن حقل الشهر ينتظر الضغط على الزر.

Najah Alsaker · 8 مارس

في البداية لعمل نموذج مثل هذا انت بحاجة الى لغات برمجو تقوم بالتصميم لذلك تحتاج html , css , js وان لم يكن لديك خبرة كافية في هذا المجال يمكنك الاعتماد على تنسيقات جاهزة من خلال استخدام bootstrap ولعمل ذلك اتبع هذه الخطوات

اكتب في المتصفح لديك bootstrap register form
دعنا ندخل الى اول نتيجة

image.png.c0e19abf865f99d8afebc3758943cd13.png

ستلاحظ ان هناك العديد من التسيقات الجاهزة لهذه الفورمات اختر الذي يناسبك ثم اضغط على زر show code الموجود اسفل التصميم
قم بنسخ الكود الذي ظهر لك واذهب الى ملف ال html الخاص بمشروعك وقم بلصقه بدخله بالمكان الذي يناسبك
الان دعنا نضمن bootstrap في صفحتنا للحصول على التنسيقات الصحيحة عبر اضافة الكود التالي الى قسم ال head في صفحة ال html

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

والان اصبح النموذج الذي قمت باختياره واضحا تمام ويحمل التنسيقات التي قمت باختيارها

والان دعنا نعمل على قسم ال backend للتحقق من مدخلات المستخدم عبر لغة javaScript :

في البداية قم باعطاء كل حقل input لديك id مميز لنقوم باستدعاءه والعمل عليه وهذا مثال عن ذلك :

<label for="first-name" id="Fname">first name</label>

لاحظ اننا قمنا باضافة ال id داخل وسم ال label واعطيناه القيمة Fname

الان قم بانشاء ملف جافا سكريبت منفصل باسم script.js
قم بربطه مع ملف ال html عبر اضافة الكود التالي في اخر الملف فوق نهاية وسوم ال body و html كما هو موضح

   <script src="script.js"></script>
</body>
</html>

والان دعني اعطيك طريقة التحقق من كل عنصر على حدى

للتحقق من عنصر الايميل في البداية اعطه ال اي دي email كما علمتك بالخطوة السابقة واكتب هذا الكود في ملف ال js

 function validateEmail() {
            var emailInput = document.getElementById('email');
            var email = emailInput.value;
            var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!pattern.test(email)) {
                alert('Please enter a valid email address.');
                return false;
            }
            return true;
        }

دعني اشرح لك كل سطر على حدى لتفهم الامور اكثر

بهذا السطر قمنا بانشاء دالة جديدة لوضع بداخلها اوامر التحقق

function validateEmail()

قمنا بتعريف متغير يدعى emailInput ووضعنا بداخلها حقل الايميل

قمنا بجلب حقل الايميل عن طريق ال اي ديemail الذي اعطيناه اياه سابقا

var emailInput = document.getElementById('email');

الان نريد الحصول على القيمة المدخلة بداخله (والتي هي الايميل الذي قام المستخدم بادخاله ) وخزناها داخل متغير يدعى email

var email = emailInput.value;

هنا يتم تعريف نمط (pattern) للتحقق من البريد الإلكتروني اذا كان يحتوي على على @ وعلى . ولا يحتوي اي مسافات

var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

وهنا قمنا بوضع شرط انه اذا كان الايميل لا يستوفي الشروط يظهر لنا رسالة بان الايميل غير صحيح وقم بادخال ايميل صحيح ويعيد القيمة false هي لا يتم اخد الايميل

اما اذا كان الايميل صحيح ويستوفي جميع الشروط فيقوم بقبوله ويعيد القيمة true كي يقوم باخذ الايميل

 if (!pattern.test(email)) {
                alert('Please enter a valid email address.');
                return false;
            }
            return true;

اما الان دعني اعطيك طرق التحقق الاخرى من البيانات وبنفس طريقة عمل الايميل تقريبا

التحقق من رقم الهاتف

function validatePhoneNumber() {
    var phoneInput = document.getElementById('phone');
    var phoneNumber = phoneInput.value;
    // تحقق من أن الرقم يحتوي على أرقام فقط ويكون بين ٧-١٥ رقم
    var pattern = /^\d{7,15}$/;
    if (!pattern.test(phoneNumber)) {
        alert('Please enter a valid phone number.');
        return false;
    }
    return true;
}

التحقق من انه تم ادخال جميع لحقول

function validateForm() {
  //هنا تقوم باضافة الحقول التي تريد التحقق من انه تم ادخال بيانات بها فقط 
    var email = document.getElementById('email').value;
    var phone = document.getElementById('phone').value;
    var day = document.getElementById('day').value;
    var month = document.getElementById('month').value;
    var year = document.getElementById('year').value;
    
    if (email == '' || phone == '' || day == '' || month == '' || year == '') {
        alert('Please fill in all fields.');
        return false;
    }
    
    return true;
}

اظن ان طريقة سير العمل اصبحت واضحة الان تبقى فقط وضع لمستك الفنية بها

وبالتوفيق لك

استفسار عن استخدام أكواد البايثون في التحرك بين الخلايا والملئ التلقائي

السؤال

Mohammed Hassan20

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Mahmoud Hassan19

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Najah Alsaker

والان دعنا نعمل على قسم ال backend للتحقق من مدخلات المستخدم عبر لغة javaScript :

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية