أقسام الوصول السريع (مربع البحث)

برمجة8 تطبيقات8 شرح12 html8
📁 آخر الأخبار
0

مثال عملي باستخدام HTML وCSS لإنشاء نموذج ادخال #6

kroom87 kroom87

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


لتطبيق المثال العملي باستخدام HTML وCSS على نظام التشغيل Windows، اتبع الخطوات التالية:

1. إعداد الملفات

ستحتاج إلى ملف HTML وملف CSS. يمكنك استخدام أي محرر نصوص تفضله، مثل Notepad أو Visual Studio Code.

 إنشاء ملف HTML

  1. افتح محرر النصوص المفضل لديك.
  2. قم بإنشاء ملف جديد واحفظه باسم index.html.
  3. احذف الامتداد txt  من نهاية اسم الملف ليكون اسم الملف فقط index.html.

: كتابة كود HTML

انسخ والصق الكود التالي في ملف index.html:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج إدخال بيانات</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>نموذج إدخال بيانات</h1>
        <form action="#">
            <label for="name">الاسم:</label>
            <input type="text" id="name" name="name" required>
            
            <label for="email">البريد الإلكتروني:</label>
            <input type="email" id="email" name="email" required>
            
            <label for="age">العمر:</label>
            <input type="number" id="age" name="age" min="1" max="100" required>
            
            <label for="dob">تاريخ الميلاد:</label>
            <input type="date" id="dob" name="dob" required>
            
            <input type="submit" value="إرسال">
        </form>
    </div>
</body>
</html>

 إنشاء ملف CSS

  1. افتح محرر النصوص مرة أخرى.
  2. قم بإنشاء ملف جديد واحفظه باسم styles.css في نفس المجلد الذي يحتوي على index.html.
  3. احذف الامتداد txt  من نهاية اسم الملف ليكون اسم الملف فقط styles.css

انسخ والصق الكود التالي في ملف styles.css:

ملف CSS (styles.css):

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}
h1 {
    text-align: center;
    color: #333;
}
form {
    display: flex;
    flex-direction: column;
}
label {
    margin: 10px 0 5px;
    color: #555;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="submit"] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}
input[type="submit"]:hover {
    background-color: #0056b3;
}

شرح الكود

ملف HTML

  • <html lang="ar">: يحدد لغة الصفحة كالعربية.
  • <meta charset="UTF-8">: يحدد مجموعة الأحرف المستخدمة كـ UTF-8 لضمان عرض النصوص بشكل صحيح.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: يضمن أن عرض الصفحة يتناسب مع عرض الجهاز المستخدم لعرضها.
  • <link rel="stylesheet" href="styles.css">: يربط ملف CSS خارجي بالصفحة.
  • <div class="container">: عنصر div يعمل كحاوية لتنسيق النموذج.
  • <h1>نموذج إدخال بيانات</h1>: عنوان رئيسي للنموذج.
  • <form action="#">: يحدد نموذج لجمع بيانات المستخدم. السمة action تحدد وجهة إرسال البيانات (في هذا المثال، لا يتم إرسال البيانات إلى أي مكان محدد).
  • <label for="name">الاسم:</label>: تسمية لحقل إدخال الاسم.
  • <input type="text" id="name" name="name" required>: حقل إدخال النص للاسم، مع تحديد السمة required لجعل الإدخال إلزاميًا.
  • <input type="email" id="email" name="email" required>: حقل إدخال البريد الإلكتروني، مع التحقق من صحة البريد الإلكتروني.
  • <input type="number" id="age" name="age" min="1" max="100" required>: حقل إدخال العمر، يقبل الأرقام فقط ويتحقق من أن العمر بين 1 و100.
  • <input type="date" id="dob" name="dob" required>: حقل إدخال تاريخ الميلاد.
  • <input type="submit" value="إرسال">: زر لإرسال النموذج.

ملف CSS

  • body: يحدد تنسيق النصوص، ولون الخلفية، ومحاذاة العناصر في الصفحة.
  • .container: يحدد تنسيق الحاوية التي تحتوي على النموذج، بما في ذلك لون الخلفية، الحواف، وظلال الصندوق.
  • h1: يحدد تنسيق العنوان الرئيسي للنموذج، بما في ذلك محاذاة النص ولون النص.
  • form: يحدد تنسيق النموذج ككل، ويجعل العناصر داخله تظهر بترتيب عمودي.
  • label: يحدد تنسيق تسميات الحقول، بما في ذلك الهوامش ولون النص.
  • input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="submit"]: يحدد تنسيق حقول الإدخال، بما في ذلك الحشو، الهوامش، الحدود، وتدوير الزوايا.
  • input[type="submit"]: يحدد تنسيق زر الإرسال، بما في ذلك لون الخلفية، لون النص، وإزالة الحدود.
  • input[type="submit"]:hover: يحدد تنسيق زر الإرسال عند التمرير فوقه، لتغيير لون الخلفية عند التمرير.

عرض الملفات في المتصفح

الخطوة 1: فتح الملف في المتصفح

  1. افتح المجلد الذي يحتوي على الملفات index.html وstyles.css.
  2. انقر بزر الفأرة الأيمن على ملف index.html.
  3. اختر "فتح باستخدام" (Open With) ثم اختر المتصفح الذي تفضله (مثل Google Chrome أو Firefox).

الخطوة 2: التحقق من النتيجة

يجب أن ترى صفحة ويب تعرض نموذج إدخال بيانات يحتوي على الحقول التالية:

  • الاسم
  • البريد الإلكتروني
  • العمر
  • تاريخ الميلاد
  • زر الإرسال

3. التعديل والاختبار

يمكنك الآن تعديل ملفات HTML وCSS كما تريد. كلما قمت بحفظ التغييرات، يمكنك إعادة تحميل الصفحة في المتصفح لرؤية التحديثات.

ملاحظات إضافية

  • تأكد من أن ملفي index.html وstyles.css موجودان في نفس المجلد حتى يتمكن ملف HTML من تحميل الأنماط بشكل صحيح.
  • يمكنك استخدام أي محرر نصوص تفضله. إذا كنت ترغب في محرر أكثر تقدماً، يمكنك استخدام Visual Studio Code أو Sublime Text.

بهذا المثال والشرح التفصيلي، يمكنك الآن فهم كيفية استخدام CSS مع HTML لإنشاء نماذج إدخال بيانات وتنسيقها بشكل فعال وجذاب. إذا كان لديك أي استفسارات إضافية، فلا تتردد في طرحها!

kroom87
kroom87

مقالات قد تهمك

تعليقات