تعلم HTML الجزء 30: استخدام مربعات اختيار نوع الإدخال وأنواع الراديو والسمات المحددة في نماذج HTML

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

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

1. خانة اختيار نوع الإدخال

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

<!DOCTYPE html>
<html>
<head>
<title> Penggunaan Input Type Checkbox di HTML </title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Makanan Favorit Anda dibawah ini : <br>
<input type="checkbox" name="makanan" value="rendang">Rendang <br>
<input type="checkbox" name="makanan" value="bakso">Bakso <br>
<input type="checkbox" name="makanan" value="nasi goreng">Nasi Goreng <br>
<input type="checkbox" name="makanan" value="Mie Ayam Jamur">Mie Ayam Jamur<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه:

2. نوع إدخال الراديو

يتم استخدام إدخال نوع الراديو لإنشاء قائمة بالخيارات التي يمكن تحديدها مرة واحدة فقط. فيما يلي مثال على الكتابة واستخدام إدخال نوع الراديو بتنسيق HTML:

<!DOCTYPE html>
<html>
<head>
<title> Penggunaan Input Type Radio di HTML </title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Pendidikan Terakhir Anda: <br>
<input type="radio" name="pendidikan" value="SMP"> SMP <br>
<input type="radio" name="pendidikan" value="SMA"> SMA <br>
<input type="radio" name="pendidikan" value="D3/S1"> D3/S1 <br>
<input type="radio" name="pendidikan" value="S2"> S2 <br>
<input type="radio" name="pendidikan" value="S3"> S3<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه:

3. السمات المحددة

يتم استخدام السمة المحددة على نوع الإدخالمربعات الاختيار وأجهزة الراديو التي تشير إلى ما إذا تم تحديد عنصر أم لا (حدد الخيارات الافتراضية). في ما يلي مثال لرمز الكتابة واستخدام السمة المحددة في علامة <input> في HTML:

<!DOCTYPE html>
<html>
<head>
<title> Penggunaan Atribut Checked di HTML Forms </title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Pendidikan Terakhir Anda: <br>
<input type="radio" name="pendidikan" value="SMA"> SMA <br>
<input type="radio" name="pendidikan" value="D3/S1" checked> D3/S1 <br>
<input type="radio" name="pendidikan" value="S2"> S2 <br> <br>
Pilih Makanan Favorit Anda dibawah ini : <br>
<input type="checkbox" name="makanan" value="rendang" checked> Rendang <br>
<input type="checkbox" name="makanan" value="bakso"> Bakso <br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

بعد تنفيذ الرمز أعلاه في المتصفح ، سيظهر كما هو موضح أدناه: