وثائق HTML قابلة للتشغيل: النماذج في HTML

Q: كيف أنشئ نموذجًا في HTML؟

ضع الحقول داخل ، وأعطِ كل حقل name و ، واختم بـ . عند إرسال النموذج يرسل المتصفح كل زوج name=value إلى عنوان action.

Q: ما الفرق بين GET وPOST في النموذج؟

method="get" (الافتراضية) تضع الحقول في العنوان، كما في /search?q=shoes، وهذا يناسب عمليات البحث والتصفية التي يجب أن تُحفظ في المفضلة. أما method="post" فترسلها في جسم الطلب، وهي ما تريده لتسجيل الدخول والتسجيل وأي شيء يغيّر البيانات.

Q: لماذا لا يُرسَل حقل في النموذج؟

ليس له سمة name، أو أنه disabled. تُرسل فقط الحقول المسماة والمفعّلة. ومربع الاختيار أو زر الاختيار غير المحدد يُستبعد كليًا أيضًا.

Q: ما فائدة fieldset وlegend؟

يجمع الحقول المترابطة و هو عنوان المجموعة. تعلن قارئات الشاشة عن legend حين ينتقل التركيز إلى المجموعة، وهذا ما يجعل مجموعة أزرار الاختيار مفهومة، وdisabled على fieldset تعطّل كل الحقول بداخله.

Q: كيف أتحقق من النموذج في HTML من دون JavaScript؟

استخدم السمات: required وtype="email" وminlength وmaxlength وmin وmax وpattern. يمنع المتصفح الإرسال ويعرض رسالة لأول حقل غير صالح. تحقق دائمًا على الخادم أيضًا، لأن هذه الفحوص تعمل في متصفح القارئ ويمكن تجاوزها.

Q: كيف أمنع النموذج من إعادة تحميل الصفحة؟

استمع إلى حدث submit في النموذج واستدعِ event.preventDefault()، ثم أرسل البيانات بنفسك بـ fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

كيف تنشئ نموذجًا في HTML

النموذج عنصر <form> يحتوي على حقول وزر إرسال. كل حقل يحتاج إلى name: فهو المفتاح الذي تُرسل القيمة تحته. املأ النموذج واضغط Send. المعاينة لا ترسل شيئًا إلى أي مكان، بل تعرض بالضبط ما كان المتصفح سيرسله.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

الأجزاء:

action هي العنوان الذي تذهب إليه البيانات، وmethod هي الطريقة (post هنا).
name على كل حقل. وقيمته هي ما كتبه القارئ.
<label> تسمّي كل حقل على الشاشة ولقارئات الشاشة (راجع label في HTML).
required وtype="email" تجعلان المتصفح يفحص الحقول قبل الإرسال. جرّب الإرسال باسم فارغ، أو بـ abc كبريد إلكتروني.
زر الإرسال يرسل النموذج. والضغط على Enter في حقل نصي يفعل ذلك أيضًا.

action وmethod: إلى أين تذهب البيانات وكيف

السمة	القيم	الافتراضية
`action`	أي عنوان URL	عنوان الصفحة الحالية
`method`	`get` أو `post` أو `dialog`	`get`
`enctype`	`application/x-www-form-urlencoded` أو `multipart/form-data` أو `text/plain`	`application/x-www-form-urlencoded`

مع method="get" تصبح الحقول سلسلة الاستعلام في العنوان: نموذج بحث يحمل name="q" يذهب إلى /search?q=blue+shoes. هذا صحيح لعمليات البحث والتصفية، لأن النتيجة يمكن حفظها في المفضلة ومشاركتها. ومع method="post" تذهب الحقول في جسم الطلب ولا تظهر في شريط العنوان ولا في السجل. استخدم POST لأي شيء يسجّل الدخول أو ينشئ شيئًا أو يغيّره أو يحذفه، ولكلمات المرور.

النموذج الذي فيه رفع ملف (<input type="file">) يحتاج إلى method="post" وenctype="multipart/form-data"، وإلا فلن يُرسل إلا اسم الملف. أما method="dialog" فهي لنموذج داخل <dialog>: الإرسال يغلق مربع الحوار بدلًا من إرسال طلب.

ما الذي يُرسَل

تُرسل فقط الحقول التي تحمل name، وفقط حين لا تكون disabled. اضغط Submit وقارن الحقول بما يرسله النموذج:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

يرسل النموذج city وzip وsource وaction. الحقل الذي بلا اسم، والحقل المعطّل، ومربع الاختيار غير المحدد، كلها تُستبعد. الحقول المخفية تُرسل لكنها لا تظهر أبدًا، وزر الإرسال يرسل name وvalue الخاصين به لأنه الزر الذي استُخدم.

تجميع الحقول بـ fieldset وlegend

<fieldset> يرسم صندوقًا حول الحقول المترابطة، و<legend> عنوانه. تعلن قارئات الشاشة عن legend حين ينتقل التركيز إلى المجموعة، وهذا ما يجعل مجموعة أزرار اختيار مثل التي أدناه مفهومة: «Delivery، Standard، زر اختيار».

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

disabled على fieldset تعطّل كل الحقول بداخله دفعة واحدة، ولا يُرسل أي منها. احذفها وستصبح حقول الهدية قابلة للاستخدام.

التحقق المدمج: required وpattern وأخواتهما

تفحص المتصفحات هذه السمات قبل الإرسال وتعرض رسالة على أول حقل يفشل:

السمة	تفحص
`required`	أن الحقل غير فارغ (وأن مربع الاختيار محدد)
`type="email"`, `type="url"`	أن القيمة تبدو كعنوان بريد إلكتروني أو URL
`minlength`, `maxlength`	طول النص
`min`, `max`, `step`	نطاق الأرقام والتواريخ
`pattern`	أن القيمة كاملة تطابق تعبيرًا نمطيًا

:invalid و:valid تنسّقان الحقول بحسب حالتها. و:user-invalid أفضل عادةً: لا تنطبق إلا بعد أن يغيّر القارئ الحقل وينتقل عنه، أو يحاول الإرسال، فلا يُفتح نموذج فارغ مغطى بالأحمر.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

ثلاثة أمور في pattern توقع الناس في الخطأ. يجب أن يطابق القيمة كاملة (لا حاجة إلى ^ أو $). ولا يعمل إلا حين لا يكون الحقل فارغًا، فاقرنه بـ required. ورسالة الخطأ في المتصفح عامة، فصِف الصيغة بنص ظاهر بجانب الحقل. يضيف Chrome وFirefox نص title إلى رسالتهما، لكن من السهل ألا يُلاحظ.

لإيقاف الفحوص، مثلًا أثناء اختبار التحقق على خادمك، أضف novalidate إلى <form>. ويمكن لزر إرسال واحد أن يتخطاها بـ formnovalidate.

التحقق في المتصفح لراحة القارئ. يستطيع أي شخص تعديل الصفحة أو إرسال طلب من دونه، لذلك يجب أن يفحص الخادم كل قيمة مجددًا.

رسائل مخصصة بـ setCustomValidity

حين لا يمكن كتابة قاعدة كسمة، مثل «يجب أن تتطابق كلمتا المرور»، اضبط الرسالة من JavaScript. الحقل الذي يحمل رسالة مخصصة غير فارغة غير صالح، والنص الفارغ يجعله صالحًا مجددًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

حقل التكرار ليس له name، لذلك تُرسل نسخة واحدة فقط من كلمة المرور.

معالجة الإرسال في JavaScript

لإرسال النموذج من دون مغادرة الصفحة، استمع إلى submit، واستدعِ preventDefault()، واقرأ الحقول بـ FormData. الاستماع إلى submit بدلًا من click على الزر يلتقط كل طرق الإرسال، بما فيها Enter، ولا يعمل إلا بعد نجاح التحقق المدمج:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) تحوّل الحقول إلى كائن عادي. أما الحقول التي قد تحمل عدة قيم (مربعات اختيار تشترك في اسم، قائمة select متعددة) فاستخدم لها formData.getAll('name') بدلًا من ذلك، لأن الكائن يحتفظ بآخر قيمة فقط.

أخطاء شائعة

حقول بلا name. تُستبعد بصمت من البيانات المرسلة.
نص placeholder بدلًا من التسميات. يختفي التلميح بمجرد أن يكتب القارئ. استخدم <label>.
<button> بلا type يُستخدم لشيء غير الإرسال. داخل النموذج يكون زر إرسال.
نموذج داخل نموذج. تداخل النماذج غير صالح، ويتجاهل المتصفح الوسم <form> الداخلي.
الاستماع إلى click على زر الإرسال بدلًا من submit على النموذج. تفوتك عمليات الإرسال بمفتاح Enter.
الوثوق بتحقق المتصفح على جانب الخادم. تحقق مجددًا هناك.
GET لكلمات المرور. ينتهي بها الأمر في العنوان والسجل وسجلات الخادم.

الأسئلة الشائعة

كيف أنشئ نموذجًا في HTML؟

ضع الحقول داخل <form action="/signup" method="post">، وأعطِ كل حقل name و<label>، واختم بـ <button type="submit">. عند إرسال النموذج يرسل المتصفح كل زوج name=value إلى عنوان action.

ما الفرق بين GET وPOST في النموذج؟

method="get" (الافتراضية) تضع الحقول في العنوان، كما في /search?q=shoes، وهذا يناسب عمليات البحث والتصفية التي يجب أن تُحفظ في المفضلة. أما method="post" فترسلها في جسم الطلب، وهي ما تريده لتسجيل الدخول والتسجيل وأي شيء يغيّر البيانات.

لماذا لا يُرسَل حقل في النموذج؟

ليس له سمة name، أو أنه disabled. تُرسل فقط الحقول المسماة والمفعّلة. ومربع الاختيار أو زر الاختيار غير المحدد يُستبعد كليًا أيضًا.

ما فائدة fieldset وlegend؟

<fieldset> يجمع الحقول المترابطة و<legend> هو عنوان المجموعة. تعلن قارئات الشاشة عن legend حين ينتقل التركيز إلى المجموعة، وهذا ما يجعل مجموعة أزرار الاختيار مفهومة، وdisabled على fieldset تعطّل كل الحقول بداخله.

كيف أتحقق من النموذج في HTML من دون JavaScript؟

استخدم السمات: required وtype="email" وminlength وmaxlength وmin وmax وpattern. يمنع المتصفح الإرسال ويعرض رسالة لأول حقل غير صالح. تحقق دائمًا على الخادم أيضًا، لأن هذه الفحوص تعمل في متصفح القارئ ويمكن تجاوزها.

كيف أمنع النموذج من إعادة تحميل الصفحة؟

استمع إلى حدث submit في النموذج واستدعِ event.preventDefault()، ثم أرسل البيانات بنفسك بـ fetch: form.addEventListener('submit', (e) => { e.preventDefault(); fetch(form.action, { method: 'POST', body: new FormData(form) }); }).

مفاهيم ذات صلة