المسافات البادئة والهوامش في HTML. حقول النص

الكتل في CSS هي كائنات مستقلة على شكل مستطيل. جميع عناصر مستند HTML عبارة عن كتل مستقلة تحتوي على أي نوع من المعلومات، سواء كانت نصًا أو صورة (محتوى). على سبيل المثال: بالنسبة لعنصر ما، يكون محتوى الكتلة نصًا، وبالنسبة للعنصر - نصًا.

حول المحتوى، في الكتلة، قد تكون هناك حقول فارغة وغير مشغولة (حشوة)، والذي بالمناسبة يعطي محتويات الكتلة مظهرًا أكثر جاذبية. مباشرة وراء الحقول تقع حدود الكتلة (حدود)، والتي يمكن أن يكون لها سمك ولون ونمط محدد. قد تحتوي الكتلة على مسافات بادئة (هامِش)أولئك. مساحة حرة حول الحدود. لا يتم تضمين الهوامش والحدود والحشو في عرض الكتلة؛ يتم تعيين العرض فقط لمحتواه.

مجالات. خصائص الهامش العلوي، الهامش الأيمن،
الهامش السفلي، الهامش الأيسر

تحدد هذه الخصائص حجم الهوامش حول الكتلة؛ ويتم تحديد القيم بأي وحدات طول أو نسب مئوية:

  • أعلى الهامش- يشير إلى عرض الهامش العلوي؛
  • الهامش الأيمن- يشير إلى عرض الهامش الأيمن؛
  • الهامش السفلي- يشير إلى عرض الهامش السفلي؛
  • الهامش الأيسر- يشير إلى عرض الهامش الأيسر.

قد تبدو القاعدة النموذجية لفقرة ذات هوامش 25 بكسل على اليمين واليسار كما يلي:

ع(
الهامش العلوي: 0px؛
الهامش الأيمن: 25 بكسل؛
الهامش السفلي: 0px؛
الهامش الأيسر : 25 بكسل ؛
}

خاصية الهامش

هذه الخاصية هي اختصار، والتي تستخدم لتقصير الخصائص المذكورة أعلاه. ملكية هامِشيمكن أن تحتوي على عدد من القيم من واحد إلى أربعة:

  • إذا تم تحديد واحد فقط، فإن الهوامش على جميع جوانب الكتلة هي نفسها؛
  • إذا تم إعطاء قيمتين، فإن الأول يشير إلى الحقول الموجودة أعلى وأسفل، والثاني - إلى اليمين واليسار (قيم كل زوج متساوية)؛
  • إذا تم إعطاء ثلاث قيم، فإن الأول يشير إلى الهامش العلوي، والثاني - اليسار واليمين، والثالث - الأسفل؛
  • إذا تم إعطاء القيم الأربع جميعها، فإن الأول هو الأعلى، ثم الهامش الأيمن، ثم الأسفل والأخير هو اليسار.
نكتب القاعدة:

ص (الهامش : 15 بكسل 5 بكسل 20 بكسل)

في هذا المثال، سيكون هامش الفقرة العلوي 15 بكسل، وسيكون الهامش الأيمن والأيسر 5 بكسل، وسيكون الهامش السفلي 20 بكسل.

حدود. خصائص BORDER-TOP-WIDTH، BORDER-RIGHT-WIDTH، BORDER-BOTTOM-WIDTH، BORDER-LEFT-WIDTH

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

  • رفيع- رفيع؛
  • واسطة- سمك متوسط ​​(يستخدم بشكل افتراضي)؛
  • سميك- سميك.

ويمكن أيضًا تحديد القيم بأي وحدات طول؛ ولم يتم تحديد القيم المئوية. يمكن كتابة القاعدة على النحو التالي:

ع(
عرض الحدود من الأعلى: 1 بكسل ؛
عرض الحدود اليمنى: 2 بكسل ؛
عرض الحدود السفلية: متوسط؛
عرض الحدود اليسرى: رفيع؛
}

خاصية عرض الحدود

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

ص (عرض الحدود: 1 بكسل 2 بكسل رفيع متوسط)

خاصية اللون الحدودي

هذه الخاصية أيضًا مختصرة، يتم استخدامها لتعيين حدود الكتلة، والقيم هي:

  • الكلمة الأساسية (أحمر، أصفر، أسود، أزرق، إلخ)؛
  • رمز اللون الست عشري (00FFFF، 000000، FFFFFF، وما إلى ذلك)؛
  • الرمز العشري إلى RGB (اللون: rgb (120، 25، 182))؛
  • شفاف- حدود شفافة.

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

  • لون الحدود العلوي- لون الحد العلوي؛
  • الحدود اليمنى اللون- لون الحدود الصحيح؛
  • الحدود أسفل اللون- لون الحد السفلي؛
  • لون الحدود اليسرى- لون الحدود اليسرى.

ستبدو القاعدة لمثل هذا المثال كما يلي:

ع(
لون الحدود العلوي: أزرق؛
لون الحدود الأيمن : 000000 ;
لون الحدود السفلية: FF0000؛
لون الحدود اليسرى: rgb (25، 125، 205)؛
}

ملكية على طراز الحدود

الخاصية مختصرة، فهي تحدد نوع الخطوط التي تكون حدود الكتلة. لتحديد أنواع مختلفة من الخطوط لحدود الكتلة، يتم استخدام الخصائص الفردية:

  • نمط الحدود الأعلى- نوع خط الحد العلوي؛
  • الحدود اليمنى على غرار- نوع خط الحدود الأيمن؛
  • نمط الحدود السفلية- نوع خط الحد السفلي؛
  • نمط الحدود اليسرى- نوع خط الحدود اليسرى.

قيم الخاصية هي الكلمات الرئيسية:

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

دعونا نلقي نظرة على الأمثلة:









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

p (نمط الحدود: متقطع)

الخصائص BORDER-TOP، BORDER-RIGHT، BORDER-BOTTOM، BORDER-LEFT

هذه خصائص مختصرة تسمح لك باختصار قيم الخصائص عرض الحدود, نمط الحدودو لون الحدود، انظر الى المثال:

ع(
الحد العلوي: 1 بكسل أحمر خالص؛
الحدود اليمنى: 3 بكسل أحمر خالص؛
الحد السفلي: 1 بكسل أحمر خالص؛
الحد الأيسر : 3 بكسل أحمر خالص
}

ستكون حدود الفقرة باللون الأحمر، ومكونة بخط متصل. سمك الحدود في الأعلى والأسفل هو 1 بكسل، وعلى اليمين واليسار - 3 بكسل.

خاصية الحدود

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

ص (الحدود: 1 بكسل أزرق خالص)

ستكون الحدود المحيطة بهذه الفقرة هي نفسها من جميع الجوانب، وستكون مصنوعة بخط أزرق متواصل يبلغ سمكه 1 بكسل.

المسافات البادئة. خصائص الحشو العلوي، الحشو الأيمن،
الحشو من الأسفل، الحشو من اليسار

تتيح لك هذه الخصائص ضبط أحجام المسافة البادئة لكل جانب على حدة؛ ويتم تحديد القيم بوحدات الطول أو كنسبة مئوية:

  • أعلى الحشو- عرض الهامش العلوي؛
  • الحشو الصحيح- عرض الهامش الأيمن؛
  • أسفل الحشو- عرض الهامش السفلي؛
  • الحشو لليسار- عرض الهامش الأيسر.

خاصية الحشو

هذه خاصية مختصرة تُستخدم لتقصير الخصائص الموضحة أعلاه. ملكية حشوةيمكن أن تحتوي على قيمة واحدة إلى أربع قيم، والتي يتم تعيينها بنفس الطريقة التي يتم بها تعيين (الهوامش) و (الحدود). لنكتب هذه القاعدة:

ع(
لون الخلفية: أبيض؛
الحدود: 2px منقط باللون الأزرق؛
الحشو: 10 بكسل 25 بكسل
}

باستخدام مثال الفقرة الناتجة، دعونا نرى كيف تعمل المسافات البادئة:

يعتمد الموضع الذي ستعرضه محركات البحث فيه في نتائج البحث على مدى تحسين الموقع. كلما ارتفع هذا الموضع، زاد عدد الزوار الذين ستستقبلهم من محركات البحث. إحدى المراحل المهمة للتحسين هي ملء الموقع بمحتوى فريد وعالي الجودة. ليست هناك حاجة لنسخ مقالات مثيرة للاهتمام حول موضوعك من موارد أخرى أو تكرار ما هو متاح بالفعل على شبكة الويب العالمية.

في هذه المرحلة، أعتقد أنه يمكنك إنهاء معرفتك الأولى بأوراق الأنماط المتتالية لـ CSS والبدء في العمل بنفسك. هذه المعرفة كافية تمامًا للبدء، لذا تابع للتغلب على اتساع الفضاء الفائق.


ما لا يمكنك إنشاء موقع ويب بدونه: ∼ ∼ يهتم الكثير من الأشخاص بـ:
∼

نماذج HTMLهي عناصر التحكم التي يتم استخدامها لجمع المعلومات من زوار الموقع.

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

لتلقي ومعالجة بيانات النموذج، يتم استخدام لغات برمجة الويب مثل بي أتش بي, بيرل.

قبل ظهور HTML5، كانت نماذج الويب عبارة عن مجموعة من عدة عناصر , تنتهي مع زر . لقد استغرق الأمر الكثير من الجهد لتصميم النماذج عبر متصفحات مختلفة. بالإضافة إلى ذلك، تطلبت النماذج JavaScript للتحقق من صحة الإدخال وتفتقر إلى أنواع حقول إدخال محددة لتحديد المعلومات اليومية مثل التواريخ وعناوين البريد الإلكتروني وعناوين URL.

نماذج HTML5حل معظم هذه المشاكل الشائعة مع وجود سمات جديدة، مما يوفر القدرة على تغيير مظهر عناصر النموذج من خلال CSS3.

أرز. 1. تحسين نماذج الويب باستخدام HTML5

إنشاء نموذج HTML5

1. العنصر

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

الجدول 1. سمات العلامة
يصف المعنى/الوصف
قبول مجموعة الأحرف قيمة السمة هي مسافة مفصولة قائمة ترميزات الأحرف، والتي سيتم استخدامها لإرسال النموذج، على سبيل المثال، .
فعل السمة المطلوبة، الذي يحدد عنوان URL لمعالج النموذج على الخادم الذي يتم إرسال البيانات إليه. وهو ملف (على سبيل المثال، action.php) يصف ما يجب فعله ببيانات النموذج. إذا لم يتم تحديد قيمة السمة، فبعد إعادة تحميل الصفحة، ستأخذ عناصر النموذج قيمها الافتراضية.
إذا كان سيتم تنفيذ كل العمل من جانب العميل من خلال نصوص JavaScript النصية، فيمكنك تحديد القيمة # لسمة الإجراء.
يمكنك أيضًا الترتيب لإرسال النموذج الذي ملأه الزائر إليك عبر البريد الإلكتروني. للقيام بذلك، تحتاج إلى إجراء الإدخال التالي:
الإكمال التلقائي

com.enctype تستخدم للإشارة MIME-نوع البيانات المرسلة مع النموذج، على سبيل المثال، enctype="multipart/form-data" . محدد فقط في حالة الطريقة = "post" .
application/x-www-form-urlencoded هو نوع المحتوى الافتراضي، مما يشير إلى أن البيانات التي تم تمريرها تمثل قائمة بمتغيرات النموذج المشفرة بعنوان URL. سيتم ترميز أحرف المسافة (ASCII 32) كـ + وحرف خاص مثل ! سيتم ترميزه بالنظام الست عشري كـ %21 .
بيانات متعددة الأجزاء/النموذج - تُستخدم لإرسال النماذج التي تحتوي على ملفات وبيانات غير ASCII وبيانات ثنائية، وتتكون من عدة أجزاء، يمثل كل منها محتوى عنصر نموذج منفصل.
نص/عادي - يشير إلى أنه يتم إرسال نص عادي (وليس HTML).
طريقة يحدد كيفية إرسال بيانات النموذج.
تقوم طريقة get بتمرير البيانات إلى الخادم من خلال شريط عنوان المتصفح. عند إنشاء طلب إلى الخادم، تشكل جميع المتغيرات وقيمها تسلسلًا مثل www.anysite.ru/form.php?var1=1&var2=2 . هل يتم إلحاق أسماء وقيم المتغيرات بعنوان الخادم بعد الإشارة؟ ويتم فصلهما بواسطة &. يتم ترميز كافة الأحرف الخاصة والأحرف غير اللاتينية بالتنسيق %nn، ويتم استبدال المسافة بـ +. يجب استخدام هذه الطريقة إذا كنت لا تقوم بنقل كميات كبيرة من المعلومات. إذا كان من المفترض أن ترسل ملفًا مع النموذج، فلن تنجح هذه الطريقة.
يتم استخدام طريقة البريد لإرسال كميات كبيرة من البيانات، بالإضافة إلى المعلومات السرية وكلمات المرور. البيانات المرسلة باستخدام هذه الطريقة غير مرئية في رأس URL لأنها موجودة في نص الرسالة.
اسم مجموعات اسم النموذج، والذي سيتم استخدامه للوصول إلى عناصر النموذج عبر البرامج النصية، مثل name="opros" .
novalidate تعطيل التحقق من الصحة في زر إرسال النموذج. يتم استخدام السمة دون تحديد قيمة
هدف تحديد النافذة التي سيتم إرسال المعلومات إليها:
_فارغ - نافذة جديدة
_self - نفس الإطار
_parent - الإطار الأصلي (إذا كان موجودًا، وإذا لم يكن موجودًا، فإلى الإطار الحالي)
_top هي نافذة المستوى الأعلى بالنسبة لهذا الإطار. إذا لم تأتي المكالمة من إطار فرعي، فإلى نفس الإطار.

2. تجميع عناصر النموذج

عنصر

...
مصممة لتجميع العناصر المرتبطة ببعضها البعض، وبالتالي تقسيم النموذج إلى أجزاء منطقية.

يمكن تسمية كل مجموعة من العناصر باستخدام العنصر ، والتي تأتي مباشرة بعد العلامة

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

معلومات الاتصال


أرز. 2. تجميع عناصر النموذج باستخدام

الجدول 2. سمات العلامة
يصف المعنى/الوصف
عاجز إذا كانت السمة موجودة، فستكون هناك مجموعة من عناصر النموذج ذات الصلة الموجودة داخل الحاوية
، معطل للتعبئة والتحرير. يستخدم لتقييد الوصول إلى حقول نماذج معينة تحتوي على بيانات تم إدخالها مسبقًا. يتم استخدام السمة دون تحديد قيمة -
.
استمارة
في نفس الوثيقة. يشير إلى شكل أو أكثر تنتمي إليه مجموعة العناصر هذه. السمة غير مدعومة حاليًا بواسطة أي متصفح.
اسم يعرف اسم، والتي سيتم استخدامها للإشارة إلى العناصر في JavaScript، أو للإشارة إلى بيانات النموذج بعد ملء النموذج وإرساله. إنه مشابه لسمة المعرف.

3. إنشاء حقول النموذج

عنصر ينشئ معظم حقول النموذج. تختلف سمات العنصر وفقًا لنوع الحقل الذي يُستخدم العنصر في إنشائه.

باستخدام أنماط CSS، يمكنك تغيير حجم الخط ونوع الخط واللون وخصائص النص الأخرى، بالإضافة إلى إضافة حدود ولون الخلفية وصورة الخلفية. يتم تحديد عرض الحقل بواسطة خاصية العرض.

الجدول 3. سمات العلامة
يصف المعنى/الوصف
يقبل تحديد نوع الملف المسموح بإرساله إلى الخادم. مبين فقط ل . القيم الممكنة:
file_extension - يسمح بتنزيل الملفات ذات الامتداد المحدد، على سبيل المثال، Accept = ".gif" ، قبول = ".pdf" ، قبول = ".doc"
audio/* - يسمح بتنزيل الملفات الصوتية
video/* - يسمح بتنزيل ملفات الفيديو
image/* - يسمح بتحميل الصور
media_type - يشير إلى نوع الوسائط للملفات التي تم تنزيلها.
بديل يعرف نص بديلللصور، المشار إليها فقط ل .
الإكمال التلقائي مسؤول عن تذكر القيم المدخلة في حقل النص واستبدالها تلقائيًا في المرة التالية التي تدخل فيها:
on - يعني أن الحقل غير محمي ويمكن تخزين قيمته واسترجاعها،
إيقاف - تعطيل الملء التلقائي لحقول النموذج.
ضبط تلقائي للصورة يسمح لك بالتأكد من أنه في نموذج التحميل، يتم التركيز بالفعل على حقل إدخال واحد أو آخر (تم تحديده)، ويكون جاهزًا لإدخال قيمة.
التحقق تتحقق السمة مما إذا كان مربع الاختيار الافتراضي قد تم تحديده عند تحميل الصفحة لحقول مثل type="checkbox" و type="radio" .
عاجز
استمارة يجب أن تكون قيمة السمة مساوية لسمة معرف العنصر في نفس الوثيقة. يحدد نموذجًا واحدًا أو أكثر ينتمي إليه حقل النموذج هذا.
com.formaction يحدد عنوان URL للملف الذي سيقوم بمعالجة البيانات المدخلة في الحقول عند إرسال النموذج. قم بالتعيين فقط للحقول type="submit" و type="image" . تتجاوز السمة قيمة سمة الإجراء للنموذج نفسه.
com.formenctype يحدد كيفية تشفير بيانات حقل النموذج عند إرسالها إلى الخادم. يتجاوز قيمة سمة enctype للنموذج. قم بالتعيين فقط للحقول type="submit" و type="image" . خيارات:
application/-x-www-form-urlencoded هي القيمة الافتراضية. يتم تشفير جميع الأحرف قبل الإرسال (يتم استبدال المسافات بالحرف +، ويتم تحويل الأحرف الخاصة إلى قيم ASCII HEX)
بيانات متعددة الأجزاء/النموذج - لم يتم ترميز الأحرف
نص/عادي - يتم استبدال المسافات بالرمز +، ولا يتم ترميز الأحرف الخاصة.
com.formmethod تحدد السمة الطريقة التي سيستخدمها المتصفح لإرسال بيانات النموذج إلى الخادم. قم بالتعيين فقط للحقول type="submit" و type="image" . يتجاوز قيمة سمة أسلوب النموذج. خيارات:
الحصول على هي القيمة الافتراضية. تتم إضافة البيانات من النموذج (زوج الاسم/القيمة) إلى عنوان url وإرسالها إلى الخادم: URL?name=value&name=value
يتم إرسال بيانات النموذج اللاحق كطلب http.
com.formnovalidate يحدد أنه لا ينبغي التحقق من صحة بيانات حقل النموذج عند إرسال النموذج. يتجاوز قيمة سمة novalidate للنموذج. يمكن استخدامها دون تحديد قيمة السمة.
com.formtarget يحدد مكان عرض الرد المستلم بعد إرسال النموذج. قم بالتعيين فقط للحقول type="submit" و type="image" . يتجاوز قيمة السمة الهدف للنموذج.


_parent – ​​يقوم بتحميل الاستجابة في الإطار الأصلي
_top - يقوم بتحميل الاستجابة في وضع ملء الشاشة
اسم الإطار - يقوم بتحميل الاستجابة في إطار بالاسم المحدد.
ارتفاع تحتوي قيمة السمة على عدد البكسلات دون تحديد وحدة قياس. يضبط ارتفاع حقل النموذج من النوع type="image"، على سبيل المثال، . يوصى بضبط ارتفاع وعرض الحقل في نفس الوقت.
قائمة هي إشارة إلى عنصر ، يحتوي على المعرف الخاص به، ويسمح لك بتزويد المستخدم بعدة خيارات للاختيار من بينها عندما يبدأ في إدخال قيمة في الحقل المقابل.
الأعلى يسمح لك بتقييد الإدخال المسموح به للبيانات الرقمية إلى الحد الأقصى للقيمة؛ يمكن أن تحتوي قيمة السمة على عدد صحيح أو رقم كسري. يوصى باستخدام هذه السمة مع السمة min. يعمل مع أنواع الحقول التالية: الرقم والنطاق والتاريخ والوقت والتاريخ المحلي والشهر والوقت والأسبوع.
الحد الاقصى للطول تحدد السمة الحد الأقصى لعدد الأحرف التي تم إدخالها في الحقل. القيمة الافتراضية هي 524288 حرفًا.
دقيقة يسمح لك بتقييد الإدخال الرقمي المسموح به إلى الحد الأدنى من القيمة.
عديد يسمح للمستخدم بإدخال قيم سمات متعددة، مفصولة بفاصلة. ينطبق على الملفات وعناوين البريد الإلكتروني. محدد بدون قيمة السمة.
اسم يحدد الاسم الذي سيتم استخدامه للوصول إلى العنصر على سبيل المثال، في أوراق أنماط CSS. إنه مشابه لسمة المعرف.
نمط يسمح لك بتحديد الاستخدام تعبير عاديبناء جملة البيانات التي يجب السماح بإدخالها في حقل معين. على سبيل المثال، النمط = "(3)-(3)" - تحدد الأقواس المربعة نطاق الأحرف المقبولة، في هذه الحالة - أي أحرف صغيرة، يشير الرقم الموجود بين الأقواس المتعرجة إلى أن هناك حاجة إلى ثلاثة أحرف صغيرة، متبوعة بشرطة، ثم ثلاثة أرقام في النطاق من 0 إلى 9.
العنصر النائب يحتوي على النص الذي يتم عرضه في حقل الإدخال قبل تعبئته (في أغلب الأحيان يكون هذا تلميح أداة).
يقرأ فقط لا يسمح للمستخدم بتغيير قيم عناصر النموذج؛ ولا يزال تحديد النص ونسخه متاحًا. محدد بدون قيمة السمة.
مطلوب تظهر رسالة تشير إلى أن هذا الحقل مطلوب. إذا حاول المستخدم إرسال النموذج دون إدخال القيمة المطلوبة في هذا الحقل، فسيتم عرض رسالة تحذيرية على الشاشة. محدد بدون قيمة السمة.
مقاس يضبط العرض المرئي للحقل بالأحرف. القيمة الافتراضية هي 20. تعمل مع أنواع الحقول التالية: النص والبحث والهاتف وعنوان url والبريد الإلكتروني وكلمة المرور.
src يحدد عنوان URL للصورة المستخدمة كزر إرسال النموذج. وأشار فقط لهذا المجال .
خطوة يستخدم للعناصر التي تتطلب إدخال قيم رقمية، ويشير إلى مقدار زيادة أو نقصان القيم أثناء عملية ضبط النطاق (الخطوة).
يكتب زر - لإنشاء زر.
خانة الاختيار - تحول حقل الإدخال إلى خانة اختيار يمكن تحديدها أو مسحها، على سبيل المثال.
لدي سيارة
اللون - يُنشئ لوحات ألوان في المتصفحات الداعمة، مما يسمح للمستخدمين بتحديد قيم الألوان بتنسيق سداسي عشري.
التاريخ - يسمح لك بإدخال تاريخ بالتنسيق dd.mm.yyyy.
عيد ميلاد:
datetime-local - يسمح لك بإدخال التاريخ والوقت مفصولين بحرف إنجليزي كبير T باستخدام النمط dd.mm.yyyy hh:mm.
عيد الميلاد - اليوم والوقت:
البريد الإلكتروني - تتوقع المتصفحات التي تدعم هذه السمة أن يقوم المستخدم بإدخال البيانات التي تطابق بناء جملة عناوين البريد الإلكتروني.
بريد إلكتروني:
file - يسمح لك بتنزيل الملفات من كمبيوتر المستخدم.
اختر ملف:
مخفي - يخفي عنصر التحكم الذي لا يعرضه المتصفح ويمنع المستخدم من تغيير القيم الافتراضية.
صورة - لإنشاء زر، مما يسمح لك بإدراج صورة بدلاً من النص على الزر.
شهر - يسمح للمستخدم بإدخال رقم السنة والشهر باستخدام نمط yyyy-mm.
الرقم - مخصص لإدخال قيم عددية. تحدد سماتها min وmax وstep الحدود العليا والدنيا والخطوة بين القيم، على التوالي. يتم افتراض هذه السمات لجميع العناصر التي لها مؤشرات رقمية. تعتمد قيمها الافتراضية على نوع العنصر.
يرجى الإشارة إلى الكمية (من 1 إلى 5):
كلمة المرور - تقوم بإنشاء حقول نصية في النموذج، بينما يتم استبدال الأحرف التي أدخلها المستخدم بعلامات نجمية أو نقطية أو أيقونات أخرى مثبتة بواسطة المتصفح.
أدخل كلمة المرور:
الراديو - ينشئ مفتاحًا - عنصر تحكم على شكل دائرة صغيرة يمكن تشغيله أو إيقاف تشغيله.
نباتي:
النطاق - سيسمح لك بإنشاء عنصر واجهة مثل شريط التمرير، الحد الأدنى / الحد الأقصى - سيسمح لك بتعيين نطاق التحديد
إعادة تعيين - ينشئ زرًا يمسح حقول النموذج للبيانات التي أدخلها المستخدم.
بحث - يشير إلى حقل بحث، ويكون حقل الإدخال بشكل افتراضي مستطيل الشكل.
يبحث:
إرسال - ينشئ زرًا قياسيًا يتم تنشيطه بنقرة ماوس. يقوم الزر بجمع المعلومات من النموذج وإرسالها للمعالجة.
النص - لإنشاء حقول نصية في نموذج، وإخراج حقل نص من سطر واحد لإدخال النص.
الوقت - يسمح لك بإدخال الوقت بتنسيق 24 ساعة باستخدام النمط hh:mm. في المتصفحات الداعمة، يظهر كعنصر تحكم في حقل الإدخال الرقمي بقيمة قابلة للتحرير بالماوس ويسمح فقط بإدخال قيم الوقت.
تحديد الوقت:
عنوان url - الحقل مخصص لتحديد عناوين URL.
الصفحة الرئيسية:
الأسبوع - تتيح أداة المؤشر المقابلة للمستخدم تحديد أسبوع واحد من السنة، وبعد ذلك ستوفر إدخال البيانات بتنسيق nn-yyyy. اعتمادًا على السنة، يمكن أن يكون عدد الأسابيع 52 أو 53.
تحديد الأسبوع:
قيمة يحدد النص الذي يظهر على زر، في حقل، أو في النص المرتبط. غير محدد لحقول نوع الملف.
عرض تحتوي قيمة السمة على عدد البكسل. يسمح لك بتعيين عرض حقول النموذج.

4. حقول إدخال النص

عنصر تستخدم بدلا من العنصر عندما تحتاج إلى إنشاء حقول نصية كبيرة. يتم وضع النص المعروض كقيمة أصلية داخل العلامة. يتم تعيين أبعاد الحقل باستخدام أعمدة السمات - الأبعاد الأفقية، والصفوف - الأبعاد الرأسية. يمكن ضبط ارتفاع الحقل باستخدام خاصية الارتفاع. يتم حساب جميع الأحجام بناءً على حجم حرف واحد في خط أحادي المسافة.

الجدول 4. سمات العلامة

7. الأزرار

عنصر يخلق أزرار قابلة للنقر. على عكس الأزرار التي تم إنشاؤها ( , , , )، داخل العنصر .

تتيح الأزرار للمستخدمين إرسال البيانات إلى نموذج أو مسح محتوى النموذج أو اتخاذ بعض الإجراءات الأخرى. يمكنك إنشاء حدود وتغيير الخلفية ومحاذاة النص على الزر.

الجدول 9. سمات العلامة
يصف المعنى/الوصف
ضبط تلقائي للصورة يضبط التركيز على الزر عند تحميل الصفحة.
عاجز تعطيل الزر، مما يجعله غير قابل للنقر.
استمارة يشير إلى نموذج واحد أو أكثر ينتمي إليه هذا الزر. قيمة السمة هي معرف النموذج المقابل.
com.formaction تحتوي قيمة السمة على عنوان URL لمعالج بيانات النموذج الذي تم إرساله عند النقر فوق الزر. فقط لنوع الزر = "إرسال" . يتجاوز قيمة سمة الإجراء المحددة للعنصر .
com.formenctype يضبط نوع ترميز بيانات النموذج قبل إرسالها إلى الخادم عند النقر فوق أزرار مثل type = "submit". يتجاوز قيمة سمة enctype المحددة للعنصر . القيم الممكنة:
application/x-www-form-urlencoded هي القيمة الافتراضية. سيتم ترميز كافة الأحرف قبل إرسالها.
بيانات متعددة الأجزاء/النموذج - لم يتم ترميز الأحرف. يُستخدم عند تحميل الملفات باستخدام نموذج.
نص/عادي - لا يتم ترميز الأحرف، ويتم استبدال المسافات بالرمز +.
com.formmethod تحدد السمة الطريقة التي سيستخدمها المتصفح لإرسال النموذج. يتجاوز قيمة سمة الطريقة المحددة للعنصر . محدد فقط للأزرار من النوع = "إرسال". القيم الممكنة:
الحصول على - تتم إضافة البيانات من النموذج (زوج الاسم/القيمة) إلى عنوان URL وإرسالها إلى الخادم. تحتوي هذه الطريقة على قيود على حجم البيانات المرسلة وهي غير مناسبة لإرسال كلمات المرور والمعلومات السرية.
النشر - تتم إضافة البيانات من النموذج كطلب http. هذه الطريقة أكثر موثوقية وأمانًا من طريقة get وليس لها أي قيود على الحجم.
com.formnovalidate تحدد السمة أنه لا ينبغي التحقق من صحة بيانات النموذج عند الإرسال. محدد فقط للأزرار من النوع = "إرسال".
com.formtarget تحدد السمة النافذة التي سيتم عرض النتيجة فيها بعد إرسال النموذج. محدد فقط للأزرار من النوع = "إرسال". يتجاوز قيمة السمة الهدف المحددة للعنصر .
_blank - يقوم بتحميل الاستجابة في نافذة/علامة تبويب جديدة
_self - تحميل الاستجابة في نفس النافذة (افتراضي)
_parent - يقوم بتحميل الاستجابة في الإطار الأصلي
_top - يقوم بتحميل الاستجابة في وضع ملء الشاشة
اسم الإطار - يقوم بتحميل الاستجابة في إطار بالاسم المحدد.
اسم يحدد اسم الزر، وقيمة السمة هي النص. يُستخدم للارتباط ببيانات النموذج بعد إرسال النموذج، أو للارتباط بزر (أزرار) معين في JavaScript.
يكتب يحدد نوع الزر. القيم الممكنة:
زر - زر قابل للنقر
إعادة تعيين - زر إعادة الضبط، يقوم بإرجاع القيمة الأصلية
إرسال - زر لإرسال بيانات النموذج.
قيمة يضبط القيمة الافتراضية التي يتم إرسالها عند النقر فوق الزر.

8. مربعات الاختيار وأزرار الاختيار في النماذج

يتم تعيين مربعات الاختيار في النماذج باستخدام البنية والتبديل - باستخدام .

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

عنصر

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

ترميز HTML

لإعداد مثل هذا الحقل، سيكون وضع العلامات ضئيلا.

يتم استخدام العنصر النائب HTML5 الخاص والسمات المطلوبة هنا:

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

يحتوي HTML5 أيضًا على معنى جديد لسمة النوع: type="search" . لكن دعمه ضعيف في المتصفحات، لذا لن نستخدمه في الوقت الحالي.

عناصر HTML مثل img و input لا تحتوي على محتوى. ولذلك، فإن العنصر الزائف مثل: before لن يعرض أي أسهم للزر.

الحل لهذه المشكلة في حالتنا هو استخدام الزر type="submit" بدلاً من input type="submit" . بهذه الطريقة نحتفظ بالنموذج باستخدام مفتاح ENTER.

CSS

وفيما يلي الأنماط اللازمة لمظاهرتنا:

إلغاء التفاف النص

Cf:before, .cf:after( content:""; عرض:table; ) .cf:after( واضح:كلاهما; ) .cf( Zoom:1; )

عناصر النموذج

لا تظهر بادئات المتصفح في الكود لتحسين الوضوح. يمكنك رؤية الكود الكامل في النص المصدر.

/* أنماط حاوية النموذج */ .form-wrapper ( العرض: 450 بكسل؛ الحشو: 15 بكسل؛ الهامش: 150 بكسل تلقائي 50 بكسل تلقائي؛ الخلفية: #444؛ الخلفية: rgba(0,0,0,.2); الحدود- نصف القطر: 10 بكسل؛ ظل الصندوق: 0 1 بكسل 1 بكسل rgba(0,0,0,.4) داخلي، 0 1px 0 rgba(255,255,255,.2) /* أنماط إدخال النص */ إدخال غلاف النموذج (العرض: 330 بكسل الحشو: 10 بكسل 5 بكسل؛ الخط: غامق 15 بكسل "trebuchet MS" الحدود: 0؛ حدود النطاق: 3 بكسل 0 3 بكسل) .مجمع النموذج: التركيز (المخطط التفصيلي: 0؛ الخلفية: #fff؛ 0 0 2px rgba(0,0,0,.8) inset; ) .إدخال غلاف النموذج::-webkit -input-placeholder ( اللون: #999; وزن الخط: عادي; نمط الخط: مائل; ) . إدخال غلاف النموذج: -moz-placeholder (اللون: #999؛ وزن الخط: عادي؛ نمط الخط: مائل؛) .إدخال غلاف النموذج: -ms-input-placeholder (اللون: #999؛ وزن الخط: عادي؛ نمط الخط: مائل) /* زر إرسال النموذج */ .زر غلاف النموذج (التجاوز: مرئي؛ الموضع: تعويم نسبي: يمين؛ الحدود: 0؛ الحشو: 0؛ المؤشر: المؤشر؛ الارتفاع: 40 بكسل؛ العرض: 110 بكسل؛ الخط: غامق 15px/40px "lucida sans"، "trebuchet MS"، "Tahoma"؛ اللون: #ففف؛ تحويل النص: أحرف كبيرة؛ الخلفية: #d83c3c؛ نصف قطر الحدود: 0 3px 3px 0؛ ظل النص: 0 -1px 0 rgba(0, 0,0, .3); ) . زر غلاف النموذج: التحويم (الخلفية: #e54040؛ ) . زر غلاف النموذج: نشط، . زر غلاف النموذج: التركيز (الخلفية: #c42f2f؛ المخطط التفصيلي: 0؛ ) . زر غلاف النموذج: قبل ( / * السهم الأيسر */ المحتوى: ""؛ الموضع: عرض الحدود مطلق: 8 بكسل 8 بكسل 0؛ نمط الحدود: لون الحدود: شفاف #d83c3c) .زر غلاف النموذج: التحويم: قبل( لون الحدود اليمنى: #e54040) .زر غلاف النموذج: التركيز: قبل، .زر غلاف النموذج: نشط: قبل (لون الحدود الأيمن: #c42f2f;) .زر غلاف النموذج::-moz- focus-inner ( /* إزالة المساحة الإضافية بجوار الزر في Mozilla Firefox */ border: 0; padding: 0; )

آخر تحديث: 04/08/2016

يتم إنشاء حقل نص من سطر واحد باستخدام عنصر الإدخال عندما يتم تعيين سمة النوع الخاصة به على نص:

يمكنك تخصيص حقل النص باستخدام عدد من السمات الإضافية:

    dirname: يحدد اتجاه النص

    maxlength : الحد الأقصى لعدد الأحرف المسموح بها في حقل النص

    النمط: يحدد النمط الذي يجب أن يطابقه النص المُدخل

    العنصر النائب: يضبط النص الذي يتم عرضه افتراضيًا في مربع النص

    للقراءة فقط: يجعل حقل النص للقراءة فقط

    مطلوب : يشير إلى أن حقل النص يجب أن يكون له قيمة

    الحجم : يضبط عرض حقل النص بالأحرف المرئية

    القيمة: لتعيين القيمة الافتراضية في حقل النص

دعونا نطبق بعض السمات:

الحقول النصية في HTML5

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

في هذه الحالة، من المهم أيضًا التمييز بين سمات القيمة والعنصر النائب، على الرغم من أن كلاهما يقوم بتعيين النص المرئي في الحقل. ومع ذلك، يقوم العنصر النائب بتعيين نوع من التلميح أو المطالبة بالإدخال، لذلك عادة ما يكون باللون الرمادي. بينما تمثل القيمة النص الافتراضي الذي تم إدخاله في الحقل:

تجعل السمات للقراءة فقط والمعطلة حقل النص غير متاح، ولكن لها تأثير مرئي مختلف. في حالة التعطيل، يظهر حقل النص باللون الرمادي:

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

الحقول النصية في HTML5

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

مجال البحث

لإنشاء حقول بحث، استخدم عنصر الإدخال مع السمة type = "search". رسميًا، إنه حقل نصي بسيط:

البحث في HTML5

حقل كلمة المرور

لإدخال كلمة مرور، استخدم عنصر الإدخال مع السمة type = "password". السمة المميزة لها هي أن الأحرف المدخلة مقنعة بالنقاط:

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

يمكن أن تكون العناصر متداخلة أو موجودة بجانب بعضها البعض. لننظر إلى المثال التالي:

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

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

هناك عدة طرق لتعيين هذه الأنماط. على سبيل المثال، حدد بشكل مباشر حجم جميع الهوامش أو المسافات البادئة باستخدام وسيطة واحدة في بعض وحدات القياس (px، ex، em، pt، cm، وما إلى ذلك):

الحشو: 3 بكسل؛ الهامش: 3 بكسل؛

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

الحشو: 3px 5px؛ الهامش: 3 بكسل 5 بكسل؛

الأول سيحدد مقدار الهوامش/المسافات البادئة في الأعلى والأسفل، والثاني - في اليسار واليمين. عندما تعطى ثلاث حجج:

الحشو: 3px 5px 2px؛ الهامش: 3px 5px 2px؛

الأول هو الهامش/المسافة البادئة في الأعلى، والثاني هو اليسار واليمين، والثالث في الأسفل. بأربع حجج:

الحشو: 3px 5px 2px 6px؛ الهامش: 3px 5px 2px 6px ؛

الأول هو الهامش/المسافة في الأعلى، والثاني على اليمين، والثالث في الأسفل، والرابع على اليسار. من السهل أن تتذكر: الأول من الأعلى، ثم في اتجاه عقارب الساعة. بالإضافة إلى ذلك، يمكنك تعيين الهوامش والحشو لحافة معينة بشكل منفصل، باستخدام الأنماط المناسبة: أعلى الحشو, الحشو الصحيح, أسفل الحشو, الحشو لليسار, أعلى الهامش, الهامش الأيمن, الهامش السفلي, الهامش الأيسر. يمكن أن تكون قيمة هذه الأنماط وسيطة واحدة فقط، والتي تحدد مقدار الهامش/المساحة المتروكة لجانب معين.

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

الحشو: 5 بكسل؛

ونتيجة لذلك ستتغير الصفحة إلى ما يلي:

دعونا الآن نلقي نظرة على المسافات البادئة. جدولان متجاوران، إذا أردنا إبعادهما قليلاً، يمكننا تطبيق مسافة بادئة. هناك خياران هنا: إما تعيين المسافة البادئة السفلية للجدول الأول، أو المسافة البادئة العلوية للجدول الثاني. دعنا نستخدم الثاني:

الهامش العلوي: 5 بكسل؛

يرجى ملاحظة أننا قمنا بتعيين المسافة البادئة خصيصًا للجدول، وليس لخلية الجدول، كما هو الحال مع الحقول. وهنا النتيجة:

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

كود HTML لصفحة الاختبار:

<أتش تي أم أل > <الرأس > <العنوان >امتحان</العنوان> <meta http-equiv = "نوع المحتوى" content = "text/html;charset=utf-8" > </الرأس> <الجسم > <النمط >الجدول (العرض: 200 بكسل؛ الارتفاع: 150 بكسل؛ الحد: 1 بكسل صلب #555؛ طي الحدود: طي) td (محاذاة رأسية: أعلى؛ الحشو: 0 بكسل) div (العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الخلفية: أحمر)</نمط> <نمط الجدول = "الخلفية: الجير"> <آر> <نمط td = "الحشوة: 5 بكسل"> <نمط div = "الهامش: 0 بكسل"></ شعبة> </ تد> </تر> </جدول> <نمط الجدول = "الخلفية: أزرق سماوي؛ الهامش العلوي: 5 بكسل"> <آر> <د></ تد> </تر> </جدول> </ الجسم> </أتش تي أم أل>