לימוד 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. מאפיינים מסומנים

התכונה המסומנת משמשת בסוג הקלטתיבות ומכשירי קשר המציינים אם נבחר פריט או לא (קבע אפשרויות ברירת מחדל). להלן דוגמה לקוד הכתיבה והשימוש בתכונה המסומנת בתג <קלט> ב- 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>

לאחר ביצוע הקוד לעיל בדפדפן הוא יופיע כמוצג להלן: