شرح buttons and inputs

buttons

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

HTML

<button>Click Me</button>

هنا بعض الخصائص الشائعة لوسم button:
disabled: يتم استخدام هذه الخاصية لتعطيل الزر ومنع المستخدمين من النقر عليه. يمكن تعيين القيمة disabled على true لتعطيل الزر وعلى false لتفعيله.

HTML

<button disabled>Disabled</button>

name و value: يتم استخدام هذين الخاصيتين لتمرير قيم إضافية من خلال نموذج HTML.

HTML

<button name="submit" value="1">Submit</button>

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

HTML

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

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

inputs

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

text: لإدخال النصوص والعبارات القصيرة.

HTML

<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" required>

password: لإدخال كلمة المرور والإخفاء الحروف المكتوبة.

HTML

<label for="password">Enter your passoword:</label>
<input type="password" id="password" name="password" required>

email: لإدخال عنوان البريد الإلكتروني، ويتحقق من صحته تلقائيًا.

HTML

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required>

number: لإدخال الأرقام والأعداد، ويمكن تحديد الحد الأدنى والأقصى.

HTML

<label for="age">Enter your age:</label>
<input type="number" id="age" name="age" min="18" max="100" required>

date: لإدخال التواريخ والتوقيت، ويمكن تحديد التنسيق.

HTML

<label for="date">Enter your date:</label>
<input type="date" id="date" name="date" required>

time: لإدخال الوقت والتوقيت، ويمكن تحديد التنسيق.

HTML

<label for="time">Enter your time:</label>
<input type="time" id="time" name="time" required>

file: للسماح للمستخدمين بتحميل الملفات.

HTML

<label for="interests">Select your interests:</label>
<input type="checkbox" id="sports" name="interests" value="Sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="Music">
<label for="music">Music</label>
<input type="checkbox" id="travel" name="interests" value="Travel">
<label for="travel">Travel</label>

`radio`: للسماح للمستخدمين بتحديد خيار واحد من بين الخيارات المتاحة.

HTML

<label for="gender">Select your gender:</label>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>

submit: لإرسال البيانات المدخلة إلى الخادم.

HTML

<input type="submit" value="go">

reset: لإعادة تعيين البيانات المدخلة.

HTML

<input type="reset" value="Reset">

hidden: لإخفاء حقل الإدخال عن المستخدمين.

HTML

<input type="hidden" id="user" name="user" value="ayoub">

color: لإدخال الألوان.

HTML

<label for="color">Select Color</label>
<input type="color" id="color" name="color" value="#000000">

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

placholder attribute

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

يمكن استخدام السمة placeholder على أي عنصر input ، مثل input type="text" و input type="email" و input type="password" وما إلى ذلك. لا يعرض النص الموجود في السمة placeholder كقيمة مدخلة حقيقية، بل يتم إزالته تلقائيًا عندما يبدأ المستخدم بإدخال قيمة في الحقل.

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

HTML

<input type="email" name="email" placeholder="Enter your email address">

تظهر قيمة السمة placeholder في مكان الحقل الفارغ حتى يقوم المستخدم بالنقر فوق الحقل للبدء في الإدخال. يتم حذف قيمة السمة placeholder تلقائيًا عندما يبدأ المستخدم بالكتابة في الحقل.

يمكن تخصيص نمط ولون النص في السمة placeholder باستخدام CSS. على سبيل المثال، يمكن استخدام الكود التالي لتخصيص لون النص:

CSS

::placeholder {
    color: #999;
}

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

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