מאמר זה ידריך אותך ביצירת לחצן בחירה HTML בעזרת דוגמה מעשית.
כיצד להוסיף לחצן רדיו ב-HTML?
כדי להוסיף לחצן בחירה ב-HTML, עקוב אחר התחביר הנתון להלן:
< קֶלֶט סוּג = 'רָדִיוֹ' שֵׁם = '' ערך = '' >
להלן התיאור של התחביר המוצהר:
- ' סוּג ”: תכונה זו מציינת איזה סוג קלט ברצונך ליצור כגון טקסט, רדיו, תיבת סימון ועוד. כדי ליצור לחצן בחירה, יש להגדיר את ערך התכונה כ'רדיו'.
- ' שֵׁם ”: הוא מגדיר את השם של רכיב הקלט. תכונה זו צריכה להיות זהה עבור רשימת לחצני הבחירה.
- ' ערך ”: זה מציין את הערך שיישלח לשרת כאשר כפתור הבחירה מסומן כמסומן.
דוגמה: הוספת לחצן בחירה ב-HTML
דוגמה זו תדון בהליך של הוספת לחצן בחירה ב-HTML באמצעות לחצן הבחירה הקלט. ב
שלב 1: יצירת קובץ HTML
ראשית, הוסף תג
בתוך ה-
- ראשית, הוסף את ' ' תג כדי לתת כותרת לדף.
- ואז, ' ' תג עבור פסקה או שורת טקסט.
- לאחר מכן, תגית הקלט מתווספת עם תכונה ' סוּג 'בעל ערך' רָדִיוֹ ', השם מוגדר כבחירה, ו' ערך ' כפי ש ' אָדוֹם '. ערכים שונים ניתנים לכל לחצן בחירה בעל אותו שם. אותו שם מייצג את אותה קבוצה או רשימה.
- אם ברצונך להוסיף כפתור שמסומן כברירת מחדל כמסומן, הקצה את התכונה ' בָּדוּק ' לכפתור הזה.
- לבסוף, ה' <תווית> רכיב בכל כפתור בחירה משמש להוספת כיתובים. זה גם מספק נגישות טובה יותר.
הקוד שלהלן הוא הפרשנות של התרחיש לעיל:
< h1 > לחצן רדיו HTML h1 >< ע > מהו הצבע האהוב עליך? ע >
< קֶלֶט סוּג = 'רָדִיוֹ' שֵׁם = 'בחר צבע' ערך = 'אָדוֹם' בָּדוּק >
< תווית ל = 'רדיו1' > אָדוֹם תווית >
< br >
< קֶלֶט סוּג = 'רָדִיוֹ' שֵׁם = 'בחר צבע' ערך = 'כָּחוֹל' >
< תווית ל = 'רדיו1' > כָּחוֹל תווית >
< br >
< קֶלֶט סוּג = 'רָדִיוֹ' שֵׁם = 'בחר צבע' ערך = 'ירוק' >
< תווית ל = 'רדיו1' > ירוק תווית >
< br >
< קֶלֶט סוּג = 'רָדִיוֹ' שֵׁם = 'בחר צבע' ערך = 'סָגוֹל' >
< תווית ל = 'רדיו1' > סָגוֹל תווית >
< br >
< קֶלֶט סוּג = 'רָדִיוֹ' שֵׁם = 'בחר צבע' ערך = 'אחרים' >
< תווית ל = 'רדיו1' > אחרים תווית >
ניתן לראות כי לחצני הבחירה נוצרו בהצלחה:
אתה יכול גם להחיל סגנונות על לחצן הבחירה שנוצר לעיל על ידי ביצוע קוד ה-CSS המוזכר להלן.
שלב 2: החלת סגנון על HTML
ה ' div ' מציין את תג ה-div שיצרנו בקובץ ה-HTML:
- קודם ה ' צבע רקע ' המאפיין מוגדר כ' #8197f0 '.
- ' גבול ' המאפיין מוגדר כ' 5 פיקסלים מנוקדים מס' 13023a ', כאשר 5px מייצג את רוחב הגבול, מנוקד מציין את סוג הקו, והבא מציין את צבע הגבול.
- ' ריפוד ' מוגדר כ' 20px 100px ' כאשר 20px מציין את הריפוד מלמעלה ומלמטה ו-100px מציין את הריפוד משמאל ומימין.
- לעיצוב גופנים, הקצה את ' משפחת גופן 'ערך נכס כ' רָהוּט '.
CSS
div {צבע רקע: #8197f0;
גבול: 5 פיקסלים מנוקד #13023a;
ריפוד: 20px 100px;
גודל גופן: 20px;
font-family: cursive;
}
ניתן לראות שאלמנט ה-div מעוצב בהצלחה:
זהו זה! הסברנו בפירוט על לחצן הבחירה HTML.
סיכום
לחצן בחירה הוא קלט המופיע תמיד בקבוצות של שתי אפשרויות או יותר. מקבוצה זו, המשתמש יכול לבחור רק אפשרות אחת. ב-HTML, ניתן ליצור כפתור בחירה באמצעות ' <קלט> ' תג בעל סוג התכונה עם הערך ' רָדִיוֹ '. בלוג זה הדגים את השיטה להוספת כפתורי בחירה ב-HTML.