HTML / الأزرار العادية
أنواع الأزرار
بشكل عام هناك 4 أنواع مهمة من الأزرار التي يمكن إضافتها في النماذج و جميعها يمكن إضافتها بواسطة الوسم <input>.
لتحديد نوع الزر الذي سيتم إظهاره يجب إضافة الخاصية type للوسم و تمرير إحدى القيم المجهزة مسبقاً كالتالي:
<input type="button">للحصول على زر عادي.<input type="submit">للحصول على زر مخصص لإرسال بيانات النموذج.<input type="reset">للحصول على زر مخصص لإعادة تعيين البيانات الأولية في النموذج.<input type="file">للحصول على زر مخصص لجعل المستخدم يختار ملف موجود في جهازه.
إضافة زر عادي
للحصول على زر عادي يمكنك استخدام الوسم <button type="button">text</button> أو استخدام الوسم <input type="button" value="text">.
طبعاً، في الحالتين مكان الكلمة text يجب أن تمرر النص الذي تريده أن يظهر على الزر.
الفرق الأساسي بينهما هو أن الوسم <button> يمكن وضع وسم آخر بداخله في حين أن الوسم <input> يمكن وضع نص فقط بداخله.
في المثال التالي قمنا بعرض زرين، الأول بواسطة الوسم <button> و الثاني بواسطة الوسم <input>:
المثال الأول <!DOCTYPE html> <html> <body> <button type="button">Button 1</button> <input type="button" value="Button 2"> </body> </html> المثال الثاني <!DOCTYPE html> <html> <body> <p>Click on the following button to display a message.</p> <button type="button" onclick="alert('Hello User');">Display Message</button> <input type="button" value="Display Message" onclick="alert('Hello User');"> </body> </html> المثال الثالث <!DOCTYPE html> <html> <body> <!-- هنا قمنا بتعريف زر و بداخله وضعنا نص و صورة --> <button type="button">Play <img src="https://raw.githubusercontent.com/alnajm1/CodaFox/main/play.png"></button> </body> </html>
إضافة زر لإرسال بيانات النموذج
لإضافة زر يقوم بإرسال بيانات النموذج بشكل تلقائي للموقع عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه submit.
في المثال التالي قمنا بإضافة زر خاص لإرسال بيانات النموذج:
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<label for="username">Username</label><br>
<input type="username" id="username" name="username"><br><br>
<label for="password">Password</label><br>
<input type="password" id="password" name="password"><br><br>
<!-- حتى يقوم بإرسال البيانات عندما يتم النقر عليه submit هنا قمنا بتعريف زر نوعه
"Login" بالإضافة لذلك, قمنا بتغيير النص الكلمة الإفتراضية التي تظهر على الزر إلى -->
<input type="submit" value="Login">
</form>
</body>
</html>
إضافة زر لإعادة تعيين قيم النموذج
لإضافة زر يقوم بحذف القيم المدخلة لعناصر النموذج و إعادتها لقيمها الأولية بشكل تلقائي عندما يتم النقر عليه نستخدم الوسم <input> مع تحديد أن نوعه reset.
في المثال التالي قمنا بإضافة زر خاص لإعادة قيم النموذج الأولية:
<!DOCTYPE html>
<html>
<body>
<h1>Sample Form</h1>
<form action="/tryit/submitted" method="post">
<!-- هنا قمنا بتعريف مربع نص مع إعطائه قيمة أولية و وضع عنوان خاص له -->
<label for="username">Username</label><br>
<input type="username" id="username" name="username" value="mhamad"><br><br>
<!-- هنا قمنا بتعريف مربع نص مخصص لإدخال كلمة مرور مع إعطائه قيمة أولية و وضع عنوان خاص له -->
<label for="password">Password</label><br>
<input type="password" id="password" name="password" value="1234"><br><br>
<!-- هنا قمنا بإضافة زر إرسال البيانات -->
<input type="submit" value="Update">
<!-- هنا قمنا بإضافة زر إعادة تعيين عند النقر عليه يتم إعادة القيم الأولية المجهزة في النموذج -->
<input type="reset" value="Reset Values">
</form>
</body>
</html>
إضافة زر يتيح للمستخدم اختيار ملف من حاسوبه
لإضافة زر يتيح للمستخدم اختيار ملف موجود في جهازه عندما يقوم بالنقر عليه نستخدم الوسم <input> مع تحديد أن نوعه file.
في المثال التالي قمنا بإضافة زر يسمح للمستخدم باختيار ملف في حاسوبه:
<!DOCTYPE html>
<html>
<body>
<p>Click on the follwing button to choose a file.</p>
<input type="file">
</body>
</html>