இந்த கட்டுரை ஒரு நடைமுறை உதாரணத்தின் உதவியுடன் HTML ரேடியோ பொத்தானை உருவாக்க உங்களுக்கு வழிகாட்டும்.
HTML இல் ரேடியோ பட்டனை எவ்வாறு சேர்ப்பது?
HTML இல் ரேடியோ பொத்தானைச் சேர்க்க, கீழே கொடுக்கப்பட்டுள்ள தொடரியல் பின்பற்றவும்:
< உள்ளீடு வகை = 'வானொலி' பெயர் = '' மதிப்பு = '' >
கூறப்பட்ட தொடரியல் விளக்கம் இங்கே:
- ' வகை ”: உரை, வானொலி, தேர்வுப்பெட்டி மற்றும் பல போன்ற எந்த வகையான உள்ளீட்டை நீங்கள் உருவாக்க விரும்புகிறீர்கள் என்பதை இந்தப் பண்புக்கூறு குறிப்பிடுகிறது. ரேடியோ பொத்தானை உருவாக்க, பண்புக்கூறு மதிப்பை 'ரேடியோ' என அமைக்க வேண்டும்.
- ' பெயர் ”: இது உள்ளீட்டு உறுப்பின் பெயரை வரையறுக்கிறது. இந்த பண்பு ரேடியோ பொத்தான்களின் பட்டியலுக்கு ஒரே மாதிரியாக இருக்க வேண்டும்.
- ' மதிப்பு ”: இது ரேடியோ பட்டன் சரிபார்க்கப்பட்டதாகக் குறிக்கப்படும்போது சேவையகத்திற்கு அனுப்பப்படும் மதிப்பைக் குறிப்பிடுகிறது.
எடுத்துக்காட்டு: HTML இல் ரேடியோ பட்டனைச் சேர்த்தல்
உள்ளீட்டு ரேடியோ பொத்தானைப் பயன்படுத்தி HTML இல் ரேடியோ பொத்தானைச் சேர்க்கும் செயல்முறையை இந்த எடுத்துக்காட்டு விவாதிக்கும். இல்
படி 1: HTML கோப்பை உருவாக்குதல்
முதலில், HTML கோப்பில்
உருவாக்கப்பட்ட
- முதலில், '' பக்கத்திற்கு ஒரு தலைப்பைக் கொடுக்க 'குறிச்சொல்.
- பின்னர், ஒரு ' 'ஒரு பத்தி அல்லது உரை வரிக்கான குறிச்சொல்.
- அதன் பிறகு, உள்ளீட்டு குறிச்சொல் ஒரு பண்புடன் சேர்க்கப்படும் ' வகை 'மதிப்பு உள்ளது' வானொலி ”, பெயர் தேர்ந்தெடுக்கப்பட்டதாக அமைக்கப்பட்டுள்ளது, மேலும் “ மதிப்பு 'என' சிவப்பு ”. ஒரே பெயரைக் கொண்ட ஒவ்வொரு ரேடியோ பொத்தானுக்கும் வெவ்வேறு மதிப்புகள் கொடுக்கப்பட்டுள்ளன. ஒரே பெயர் ஒரே குழு அல்லது பட்டியலைக் குறிக்கிறது.
- சரிபார்க்கப்பட்டதாக இயல்பாகக் குறிக்கப்பட்ட ஒரு பொத்தானைச் சேர்க்க விரும்பினால், பண்புக்கூறை ஒதுக்கவும் ' சரிபார்க்கப்பட்டது ” என்று பட்டனுக்கு.
- இறுதியாக, ' <லேபிள்> 'ஒவ்வொரு ரேடியோ பொத்தானிலும் உள்ள உறுப்பு தலைப்புகளைச் சேர்க்கப் பயன்படுகிறது. இது சிறந்த அணுகலையும் வழங்குகிறது.
கீழே உள்ள குறியீடு மேலே உள்ள காட்சியின் விளக்கமாகும்:
< h1 > HTML ரேடியோ பட்டன் h1 >< ப > உங்களுக்கு பிடித்த நிறம் எது? ப >
< உள்ளீடு வகை = 'வானொலி' பெயர் = 'தேர்ந்தெடுக்கப்பட்ட வண்ணம்' மதிப்பு = 'சிவப்பு' சரிபார்க்கப்பட்டது >
< முத்திரை க்கான = 'ரேடியோ1' > சிவப்பு முத்திரை >
< br >
< உள்ளீடு வகை = 'வானொலி' பெயர் = 'தேர்ந்தெடுக்கப்பட்ட வண்ணம்' மதிப்பு = 'நீலம்' >
< முத்திரை க்கான = 'ரேடியோ1' > நீலம் முத்திரை >
< br >
< உள்ளீடு வகை = 'வானொலி' பெயர் = 'தேர்ந்தெடுக்கப்பட்ட வண்ணம்' மதிப்பு = 'பச்சை' >
< முத்திரை க்கான = 'ரேடியோ1' > பச்சை முத்திரை >
< br >
< உள்ளீடு வகை = 'வானொலி' பெயர் = 'தேர்ந்தெடுக்கப்பட்ட வண்ணம்' மதிப்பு = 'ஊதா' >
< முத்திரை க்கான = 'ரேடியோ1' > ஊதா முத்திரை >
< br >
< உள்ளீடு வகை = 'வானொலி' பெயர் = 'தேர்ந்தெடுக்கப்பட்ட வண்ணம்' மதிப்பு = 'மற்றவைகள்' >
< முத்திரை க்கான = 'ரேடியோ1' > மற்றவைகள் முத்திரை >
ரேடியோ பொத்தான்கள் வெற்றிகரமாக உருவாக்கப்பட்டதைக் காணலாம்:
கீழே குறிப்பிடப்பட்டுள்ள CSS குறியீட்டைப் பின்பற்றுவதன் மூலம் மேலே உருவாக்கப்பட்ட ரேடியோ பொத்தானுக்கு ஸ்டைல்களைப் பயன்படுத்தலாம்.
படி 2: HTML க்கு ஸ்டைலைப் பயன்படுத்துதல்
' div ” என்பது HTML கோப்பில் நாம் உருவாக்கிய div குறிச்சொல்லைக் குறிக்கிறது:
- முதலில், ' பின்னணி நிறம் 'சொத்து' என அமைக்கப்பட்டுள்ளது #8197f0 ”.
- ' எல்லை 'சொத்து' என அமைக்கப்பட்டுள்ளது 5px புள்ளியிடப்பட்ட #13023a ”, 5px என்பது எல்லையின் அகலத்தைக் குறிக்கும், புள்ளியிடப்பட்டது கோட்டின் வகையைக் குறிக்கிறது, அடுத்து எல்லையின் நிறத்தைக் குறிக்கிறது.
- ' திணிப்பு ” என அமைக்கப்பட்டுள்ளது 20px 100px ” இதில் 20px என்பது மேல் மற்றும் கீழ் இருந்து திணிப்பைக் குறிப்பிடுகிறது மற்றும் 100px என்பது இடது மற்றும் வலதுபுறத்தில் உள்ள திணிப்பைக் குறிக்கிறது.
- எழுத்துரு ஸ்டைலிங்கிற்கு, ' எழுத்துரு குடும்பம் 'சொத்து மதிப்பு' கர்சீவ் ”.
CSS
div {பின்னணி நிறம்: #8197f0;
எல்லை: 5px புள்ளிகள் #13023a;
திணிப்பு: 20px 100px;
எழுத்துரு அளவு: 20px;
font-family: cursive;
}
div உறுப்பு வெற்றிகரமாக வடிவமைக்கப்பட்டிருப்பதைக் காணலாம்:
அவ்வளவுதான்! HTML ரேடியோ பொத்தான் பற்றி விரிவாக விளக்கியுள்ளோம்.
முடிவுரை
ரேடியோ பொத்தான் என்பது இரண்டு அல்லது அதற்கு மேற்பட்ட விருப்பங்களின் குழுக்களில் எப்போதும் தோன்றும் உள்ளீடு ஆகும். இந்த குழுவிலிருந்து, பயனர் ஒரு விருப்பத்தை மட்டுமே தேர்ந்தெடுக்க முடியும். HTML இல், '' ஐப் பயன்படுத்தி ரேடியோ பொத்தானை உருவாக்கலாம் <உள்ளீடு> 'மதிப்புடன் பண்புக்கூறு வகையைக் கொண்ட குறிச்சொல்' வானொலி ”. இந்த வலைப்பதிவு HTML இல் ரேடியோ பொத்தான்களைச் சேர்ப்பதற்கான முறையை விளக்குகிறது.