ஒரு வலைத்தளம் அல்லது வலைப்பதிவை உருவாக்கி அதை உள்ளடக்கத்துடன் நிரப்பும் செயல்பாட்டில், பல்வேறு காரணங்களுக்காக, சில நேரங்களில் உரையின் சில பகுதியை மறைக்க வேண்டியிருக்கும், தற்போதைக்கு மறைக்கப்பட்ட ஒரு தொகுதியில் அதிக அளவு தகவல்களை வைக்க வேண்டும், ஆனால் இன்னும் குறிப்பிடவும் வேறு ஏதாவது கிடைக்கக்கூடியவற்றைப் பயன்படுத்தவும், அடுத்த வரி அல்லது பக்கத்திற்குச் செல்லாமல் மறைக்கப்பட்ட உள்ளடக்கத்தைப் பார்க்க அவருக்கு வாய்ப்பளிக்கவும்.
முன்னதாக, அத்தகைய தீர்வை செயல்படுத்த ஜாவாஸ்கிரிப்ட் ஒரு கொத்து பயன்படுத்தப்பட்டது, ஆனால் இப்போது இவை அனைத்தும் அற்புதமான பண்புகளைப் பயன்படுத்தி மிக எளிதாக செய்ய முடியும்.

பிரத்தியேகமாக CSS3 பண்புகளைப் பயன்படுத்தி, ஒரு குறிப்பிட்ட உரை உறுப்பைக் கிளிக் செய்யும் போது திறக்கும் தளப் பக்கங்களிலும் தனிப்பட்ட செய்திகளிலும் உள்ளடக்கத்தின் மறைக்கப்பட்ட தொகுதிகளை உருவாக்குவதற்கான எளிய வழியை இன்று பார்ப்போம். ஒரு ஸ்விட்ச் என்பது ஒற்றை வார்த்தையாகவோ, தனிப்படுத்தப்பட்ட வாக்கியமாகவோ, முழு வாக்கியமாகவோ அல்லது தகவல் தரும் ஐகானாகவோ இருக்கலாம்.
இத்தகைய தொகுதிகள் பெரும்பாலும் அதிக அளவு உள்ளடக்கம் கொண்ட பக்கங்களில் பயன்படுத்தப்படுகின்றன, அதை மேலும் கட்டமைக்கப்பட்ட மற்றும் சுருக்கமாக மாற்ற, அனைத்து உள்ளடக்கங்களும் குழுக்களாக பிரிக்கப்படுகின்றன, இதில் தலைப்புகள் மட்டுமே பயனருக்கு வழங்கப்படுகின்றன, எல்லா உரைகளும் முன்னிருப்பாக மறைக்கப்படும். ஒரு குறிப்பிட்ட உறுப்பைக் கிளிக் செய்வதன் மூலம் பார்க்கலாம் (மேலே பார்க்கவும்).

தேவையற்ற நீர் இல்லாமல் செய்ய முயற்சிப்போம், தெளிவான உதாரணத்துடன் இந்த முழு எளிய பொறிமுறையையும் செயலில் பாருங்கள், மேலும் நீங்கள் விரும்பினால் எதையாவது திருத்தலாம்:

எடுத்துக்காட்டு எண். 1

தேர்ந்தெடுக்கப்படாத மற்றும் குறிக்கப்படாத உரை, கூடுதல் தகவலுடன் கீழ்தோன்றும் தொகுதிகளுக்கான சுவிட்சுகளாகப் பயன்படுத்தப்படுகிறது, அதைக் கிளிக் செய்வதற்கான தெளிவான அழைப்புடன், நீங்கள் அதை அச்சமோ சந்தேகமோ இல்லாமல் செய்ய வேண்டும்)))

நீங்கள் பார்க்க முடியும் என, எல்லாம் சரியாக வேலை செய்கிறது, மறைக்கப்பட்ட உள்ளடக்கம் சிக்கல்கள் இல்லாமல் தோன்றும் மற்றும் சுட்டியின் ஒரு சிறிய கிளிக் மூலம் மறைந்துவிடும், அதே நேரத்தில் நாங்கள் html கட்டமைப்பிலும் உருவாக்கத்திலும் குறைந்தபட்ச இயங்கக்கூடிய குறியீட்டைப் பயன்படுத்தினோம். css பாணிகள். கூடுதல் ஜாவாஸ்கிரிப்ட் லைப்ரரிகளை இணைக்காமல், பயனரின் பக்கத்தில் அவை முடக்கப்பட்டுள்ளதா என்ற நித்திய கவலையுடன்.
CSS3 போலி-வகுப்புக்கு இந்தச் செயலை செயல்படுத்துவது சாத்தியமானது : சரிபார்க்கப்பட்டது, ரேடியோ பொத்தான்கள் () போன்ற இடைமுக உறுப்புகளுக்குப் பயன்படுத்தப்படும். குறிச்சொல்லில் நாம் உண்மையில் என்ன செய்தோம் வகை பண்புக்கூறு மதிப்பு தேர்வுப்பெட்டியை ஒதுக்கியுள்ளோம், அத்துடன் தனித்துவமான அடையாளங்காட்டியுடன் தொடர்புடைய அடையாளங்காட்டி id="hd-1" for="hd-1"தற்போதைய தொகுதி சுவிட்ச். காட்சியை அமைப்பதன் மூலம் தேர்வுப்பெட்டிகளை முழுமையாகவும் நிரந்தரமாகவும் மறைப்போம்: class.hide இல் எந்த சொத்தும் இல்லை.
உண்மையில், இங்கே விளக்குவதற்கு சிறப்பு எதுவும் இல்லை; மறைக்கப்பட்ட தொகுதிகளை ஆன் மற்றும் ஆஃப் செய்வதற்கான முழு பொறிமுறையும் மூன்று கூறுகளைக் கொண்டுள்ளது:

• தேர்வுப்பெட்டி - குறிச்சொல் அர்த்தத்துடன் தேர்வுப்பெட்டிபண்பு வகைமற்றும் ஒரு குறிப்பிட்ட இணைக்கும் அடையாளங்காட்டியுடன்
• தலைப்பு (உரை சுவிட்ச்) - குறிச்சொல் பண்புக்கூறுக்கான தனித்துவமான அடையாளங்காட்டி மதிப்புடன் க்கான, (அடையாளங்காட்டி குறிச்சொல் அடையாளங்காட்டியைப் போலவே இருக்க வேண்டும் உள்ளீடுஅர்த்தத்துடன் தேர்வுப்பெட்டிபண்பு வகை).
• உள்ளடக்கத் தொகுதி என்பது ஒரு div குறிச்சொல் ஆகும், இது பயனர் கிளிக் செய்யும் வரை, பல்வேறு மறைக்கப்பட்ட உள்ளடக்கம் (உரை, படங்கள், முதலியன) சிறந்த நேரம் வரை கொண்டிருக்கும்.

எனது குழப்பமான விளக்கத்திலிருந்து, முழுப் புள்ளி என்ன என்பது தெளிவாகிவிட்டது என்று நம்புகிறேன். CSS புதிய பாணிகளைப் பயன்படுத்துகிறது (போலி-வகுப்பைப் பயன்படுத்தி சரிபார்க்கப்பட்டது) ஒரு தனிப்பட்ட அடையாளங்காட்டி மூலம் தேர்வுப்பெட்டியுடன் தொடர்புடைய ஒரு உறுப்பைப் பயனர் கிளிக் செய்யும் போது மட்டுமே முன்பு மறைக்கப்பட்ட உள்ளடக்கத்தின் தொகுதியைக் காட்ட.

இவை அனைத்திலிருந்தும் பின்வருமாறு முக்கியமான குறிப்பு:

நீங்கள் ஒரே பக்கத்தில் பல மறைக்கப்பட்ட தொகுதிகளைப் பயன்படுத்தும்போது, ​​ஒவ்வொரு ரேடியோ பொத்தானுக்கும் ஒரு தனிப்பட்ட ஐடி இருக்க வேண்டும், அது மற்ற தொகுதிகளில் உள்ள ஐடிகளிலிருந்து வேறுபட்டதாக இருக்கும்.

எனவே, வார்த்தைகளில், எங்கு, ஏன் செல்கிறது என்பதை நாங்கள் வரிசைப்படுத்தியுள்ளோம், இப்போது, ​​முழு கட்டமைப்பின் html கட்டமைப்பைப் பார்ப்போம்:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >திறக்க இங்கே கிளிக் செய்யவும்! < div>மறைக்கப்பட்ட உள்ளடக்கம்...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >மேலும் படிக்க இங்கே கிளிக் செய்யவும்! < div>மறைக்கப்பட்ட உள்ளடக்கம்...

திறக்க இங்கே கிளிக் செய்யவும்!

மேலும் படிக்க இங்கே கிளிக் செய்யவும்!

அடுத்து, நாங்கள் நேரடியாக CSS பாணிகளை உருவாக்குவதற்கு செல்கிறோம், இது இல்லாமல் இந்த முழு வடிவமைப்பும் இயங்காது. குறைந்தபட்ச குறியீடு, எந்த அலங்காரமும் இல்லாமல், உங்களுக்காக வரையறுக்க மற்றும் மறைக்கப்பட்ட உரையின் சட்டத்தைக் காட்ட கீழ்தோன்றும் தொகுதிக்கான பின்னணியை சற்று முன்னிலைப்படுத்தியது. நீங்கள் விரும்பியபடி தொகுதிகளை வடிவமைக்கலாம், பார்டர்கள், சுற்று மூலைகளைச் சேர்க்கலாம், உரையை முன்னிலைப்படுத்தலாம் அல்லது .

1.CSS

. மறை,. மறை + லேபிள் ~ div ( காட்சி: எதுவுமில்லை; ) /* லேபிள் உரை வகை */. மறை + லேபிள், . மறை: சரிபார்க்கப்பட்டது + லேபிள் (திணிப்பு: 0; நிறம்: பச்சை; கர்சர்: சுட்டிக்காட்டி; பார்டர்- கீழே: 1px புள்ளியிடப்பட்ட பச்சை; ) . மறைக்கவும் 3px 3px 10px #7d8e8f; திணிப்பு: 10px; )

/* தேர்வுப்பெட்டிகள் மற்றும் உள்ளடக்கத் தொகுதிகளை மறை */ .மறை, .மறை + லேபிள் ~ div (காட்சி: எதுவுமில்லை; ) /* லேபிள் உரை தோற்றம் */ .மறை + லேபிள், .மறை: சரிபார்க்கப்பட்டது + லேபிள் ( திணிப்பு: 0; நிறம்: பச்சை ; கர்சர்: சுட்டிக்காட்டி; பார்டர்-கீழே: 1px புள்ளியிடப்பட்ட பச்சை; ) /* சுவிட்ச் செயலில் இருக்கும்போது லேபிள் உரையின் தோற்றம் */ .மறை: சரிபார்க்கப்பட்ட + லேபிள் ( நிறம்: சிவப்பு; பார்டர்-கீழ்: 0; ) /* போது தேர்வுப்பெட்டி செயலில் உள்ளது, உள்ளடக்கத்துடன் கூடிய தொகுதிகளைக் காட்டு 3px 3px 10px #7d8e8f; பெட்டி-நிழல்: இன்செட் 3px 3px 10px #7d8e8f; திணிப்பு: 10px; )

இது அனைத்தும், ஒரு துறவி உதாரணத்திற்கு, முற்றிலும் போதுமான குறைந்தபட்சம். ஆனால் குறைந்தபட்சம் சில இன்னபிற பொருட்களைச் சேர்க்காவிட்டால் நாங்கள் நாமாக இருக்க மாட்டோம், மேலும் எங்கு கிளிக் செய்ய வேண்டும் என்பதை பயனரிடம் தெரிவிப்பது நல்லது.
இரண்டாவது எடுத்துக்காட்டில், நான் ஒரு பிளஸ் வடிவத்தில் ஒரு எளிய குறியீட்டைச் சேர்த்தேன், இது வேறு ஏதாவது இங்கே மறைக்கப்பட்டுள்ளது என்பதைத் தெளிவாகக் குறிக்கிறது; அழுத்தினால், அது உடனடியாக மைனஸாக மாறும், மேலும் உள்ளடக்கத்துடன் மறைக்கப்பட்ட தொகுதிகளில் ஒரு சிறிய அனிமேஷனைச் சேர்த்தேன். அவை தோன்றும், இவை அனைத்தும் பிரத்தியேகமாக CSS3 இன் மந்திரத்தின் உதவியுடன்.

2.CSS

/* தேர்வுப்பெட்டிகள் மற்றும் உள்ளடக்கத் தொகுதிகளை மறை */. மறை,. மறை + லேபிள் ~ div ( காட்சி: எதுவுமில்லை; ) /* லேபிள் உரை வகை */. மறை + லேபிள் (விளிம்பு: 0; திணிப்பு: 0; நிறம்: பச்சை; கர்சர்: சுட்டிக்காட்டி; காட்சி: இன்லைன்- பிளாக்; ) /* சுவிட்ச் செயலில் இருக்கும்போது லேபிள் உரையின் தோற்றம் */. மறை: சரிபார்க்கப்பட்டது + லேபிள் (நிறம்: சிவப்பு; பார்டர்- கீழே: 0 ; ) /* தேர்வுப்பெட்டி செயலில் இருக்கும்போது, ​​உள்ளடக்கத்துடன் தொகுதிகளைக் காட்டு */. மறைக்கவும் 3px 3px 10px #7d8e8f;விளிம்பு-இடது: 20px;பேடிங்: 10px; /* தோன்றும் போது ஒரு சிறிய அனிமேஷன் */- வெப்கிட்- அனிமேஷன்: ஃபேட் ஈஸ்- 0. 5 வினாடிகளில்; - moz- அனிமேஷன்: ஃபேட் ஈஸ்- 0. 5 வினாடிகளில்; அனிமேஷன்: மங்கல் எளிதாக - 0. 5 வினாடிகளில்; ) /* மறைக்கப்பட்ட தொகுதிகள் தோன்றும் போது அனிமேஷன் */@- moz- கீஃப்ரேம்கள் மங்காது ( ( ஒளிபுகாநிலை: 0 ; ) இலிருந்து ( ஒளிபுகாநிலை: 1 ) ) 0;) முதல் (ஒளிபுகாநிலை: 1) ) . மறை + லேபிள்: முன் (பின்னணி- நிறம்: #1e90ff; நிறம்: #fff; உள்ளடக்கம்: " \002 B"; காட்சி: தொகுதி; மிதவை: இடது; எழுத்துரு அளவு: 14px; எழுத்துரு எடை: தடித்த; உயரம்: 16px; வரி உயரம்: 16px; விளிம்பு: 3px 5px; உரை- சீரமை: மையம்; அகலம்: 16px; - வெப்கிட்- எல்லை- ஆரம்: 50%; - moz- எல்லை- ஆரம்: 50%; எல்லை-ஆரம்: 50%; ) . மறை: சரிபார்க்கப்பட்டது + லேபிள்: முன் ( உள்ளடக்கம்: " \221 2" ; }

/* தேர்வுப்பெட்டிகள் மற்றும் உள்ளடக்கத் தொகுதிகளை மறை */ .மறை, .மறை + லேபிள் ~ div (காட்சி: எதுவுமில்லை; ) /* லேபிள் உரை தோற்றம் */ .மறை + லேபிள் (விளிம்பு: 0; திணிப்பு: 0; நிறம்: பச்சை; கர்சர் : சுட்டிக்காட்டி; காட்சி: இன்லைன்-பிளாக்; ) /* சுவிட்ச் செயலில் இருக்கும்போது லேபிள் உரையின் தோற்றம் */ .மறை: சரிபார்க்கப்பட்டது + லேபிள் ( நிறம்: சிவப்பு; பார்டர்-கீழ்: 0; ) /* தேர்வுப்பெட்டி செயலில் இருக்கும்போது, ​​காட்டவும் உள்ளடக்கம் */ ; box-shadow: inset 3px 3px 10px #7d8e8f; விளிம்பு-இடது: 20px; திணிப்பு: 10px; /* தோன்றும் போது ஒரு சிறிய அனிமேஷன் */ -webkit-animation:Fade Ease-in 0.5s; -moz-animation:fade: -0.5 வினாடிகளில்; அனிமேஷன்: 0.5 வினாடிகளில் மங்காது; ) /* மறைக்கப்பட்ட தொகுதிகள் தோன்றும் போது அனிமேஷன் */ @-moz-கீஃப்ரேம்கள் மங்காது ( (ஒளிபுகாநிலை: 0; ) முதல் (ஒளிபுகாநிலை: 1 ) ) @-webkit-keyframes மங்கல் (ஒளிபுகாநிலை: 0; ) இலிருந்து ( ஒளிபுகாநிலை: 1 ) ) @keyframes மங்காது ( ( ஒளிபுகாநிலை: 0; ) இலிருந்து ( ஒளிபுகாநிலை: 1 ) . மறை + லேபிள்:முன் (பின்னணி-நிறம்: #1e90ff; நிறம்: #fff; உள்ளடக்கம்: "\002B"; காட்சி: தொகுதி; மிதவை: இடது; எழுத்துரு அளவு: 14px; எழுத்துரு எடை: தடித்த; உயரம்: 16px; வரி உயரம்: 16px; விளிம்பு: 3px 5px; text-align: மையம்; அகலம்: 16px; -வெப்கிட்-பார்டர்-ஆரம்: 50%; -moz-எல்லை-ஆரம்: 50%; எல்லை-ஆரம்: 50%; ) .மறை: சரிபார்க்கப்பட்டது + லேபிள்: முன் ( உள்ளடக்கம்: "\2212"; )

எல்லா கணக்குகளிலும், முறை சந்தேகத்திற்கு இடமின்றி நல்லது, ஆனால் எப்போதும் போல், ஆச்சரியப்படுவதற்கில்லை, முன்னேற்றத்தில் நித்திய பிரேக், IE உலாவி, போலி வகுப்பு ஆகியவற்றில் சிக்கல்கள் எழுகின்றன. சரிபார்க்கப்பட்டதுஇந்த உலாவியின் 9 மற்றும் அதற்குப் பிந்தைய பதிப்புகளை மட்டுமே ஆதரிக்கிறது. IE இன் பழைய பதிப்புகளுக்கு, அனைத்தும் அப்படியே இருக்கும், நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்த வேண்டும்.

மறைக்கப்பட்ட தேர்வுப்பெட்டிகளைப் பயன்படுத்தி, நீங்கள் பாணியிலான தொகுதிகள், ஸ்லைடர்கள், கேலரிகள் மற்றும் பலவற்றை எளிதாக செயல்படுத்தலாம்.

அனைத்து மரியாதையுடன், ஆண்ட்ரூ

விளக்கம்

HTML குறிச்சொல் ஒரு படிவ உறுப்பைக் கிளிக் செய்யும் போது தோன்றும் கீழ்தோன்றும் (கீழ்-கீழ்) பட்டியலை உருவாக்கப் பயன்படுகிறது மற்றும் தளத்தின் பார்வையாளரை முன் வரையறுக்கப்பட்ட விருப்பங்களில் ஒன்றைத் தேர்ந்தெடுக்க அனுமதிக்கிறது.

உறுப்பு

இரண்டு அல்லது அதற்கு மேற்பட்ட குறிச்சொற்களைக் கொண்டிருக்கலாம் , கீழ்தோன்றும் பட்டியலில் கிடைக்கும் தேர்வுகளை வரையறுத்தல். முதல் குழந்தை உறுப்பு உரை தொடக்கத்தில் கீழ்தோன்றும் பட்டியலில் காட்டப்படும், அதாவது, இது பட்டியலுக்கான இயல்புநிலை மதிப்பாக இருக்கும். இயல்புநிலை மதிப்பை மாற்றவும் அல்லது அமைக்கவும் நீங்கள் தேர்ந்தெடுத்த பண்புக்கூறை விரும்பிய விருப்பத்தில் சேர்க்கலாம்:

வால்வோ சாப் VW ஆடி

கீழ்தோன்றும் அகலம் குறிச்சொல்லில் குறிப்பிடப்பட்ட மிக நீளமான உரையால் தீர்மானிக்கப்படும் .

பண்புக்கூறுகள்

autofocus: இணையப் பக்கம் ஏற்றப்படும் போது உறுப்பு தானாகவே கவனம் பெற வேண்டும் என்பதைக் குறிப்பிடுகிறது. ஆட்டோஃபோகஸ் பூலியன் பண்புக்கூறுக்கான சாத்தியமான மதிப்புகள்: உதாரணமாக "

குறிப்பு: ஆட்டோஃபோகஸ் பண்பு IE9 மற்றும் அதற்கு முந்தைய மற்றும் Firefox இல் ஆதரிக்கப்படவில்லை.

முடக்கப்பட்டது: உறுப்பு செயலற்றதாக இருப்பதைக் குறிக்கிறது, அதாவது பயனர் உறுப்புடன் தொடர்பு கொள்ள முடியாது. முடக்கப்பட்ட பூலியன் பண்புக்கூறுக்கான சாத்தியமான மதிப்புகள்:

எடுத்துக்காட்டு » படிவம்: உறுப்பு தொடர்புடைய வடிவத்தை வரையறுக்கிறது. பண்புக்கூறு மதிப்பு என்பது உறுப்பு அடையாளங்காட்டியாகும்

. இந்த பண்பு ஒரு உறுப்பை வைக்க உங்களை அனுமதிக்கிறது ஆவணத்தில் எந்த இடத்திலும், உறுப்புகளின் வழித்தோன்றல் மட்டுமல்ல .

குறிப்பு: ஃபயர்பாக்ஸில் படிவப் பண்பு ஆதரிக்கப்படவில்லை.

பல: ஒரே நேரத்தில் பல விருப்பங்களைத் தேர்ந்தெடுக்கலாம் என்பதைக் குறிக்கிறது. இயக்க முறைமையைப் பொறுத்து பல விருப்பங்கள் வேறுபடுகின்றன:

• விண்டோஸ்: பல விருப்பங்களைத் தேர்ந்தெடுக்க CTRL விசையை அழுத்திப் பிடிக்கவும்.
• மேக்: பல விருப்பங்களைத் தேர்ந்தெடுக்க CMD விசையை அழுத்திப் பிடிக்கவும்.

பல தருக்க பண்புக்கான சாத்தியமான மதிப்புகள்: உதாரணமாக "

குறிப்பு: பல உருப்படிகளைத் தேர்ந்தெடுக்கும் வெவ்வேறு வழிகள் மற்றும் பல தேர்வுகள் உள்ளன என்று பயனர்களுக்கு கூடுதல் அறிவிப்பின் காரணமாக, கீழ்தோன்றும் பட்டியலுக்குப் பதிலாக தேர்வுப்பெட்டிகளைப் பயன்படுத்த பரிந்துரைக்கப்படுகிறது.

பெயர்: கீழ்தோன்றும் பட்டியலின் பெயரை வரையறுக்கிறது. படிவத் தரவைச் சமர்ப்பித்த பிறகு அணுக அல்லது ஜாவாஸ்கிரிப்டில் ஒரு உறுப்பைக் குறிப்பிட இது பயன்படுத்தப்படலாம். அளவு: கீழ்தோன்றும் பட்டியலில் தெரியும் விருப்பங்களின் எண்ணிக்கையைக் குறிப்பிடுகிறது. அளவு பண்புக்கூறின் மதிப்பு 1 ஐ விட அதிகமாக இருந்தால், பட்டியலில் உள்ள மொத்த விருப்பங்களின் எண்ணிக்கையை விட குறைவாக இருந்தால், பார்க்க கூடுதல் விருப்பங்கள் உள்ளன என்பதைக் குறிக்க உலாவி தானாகவே உருள் பட்டியைச் சேர்க்கும்.

தளத்தில் HTML படிவங்களை வரையறுக்கும் HTML குறிச்சொற்கள்

இணையத்தில் இணையதளங்களையும் தனிப்பட்ட பக்கங்களையும் உருவாக்குகிறோம்பார்வையாளர்களுடன் தொடர்பு கொள்ள.

HTML படிவங்கள்தளத்தில் பார்வையாளர்களைப் பதிவுசெய்யவும், ஊடாடும் ஆய்வுகள் மற்றும் வாக்களிக்கவும், செய்திகளை அனுப்பவும், கொள்முதல் செய்யவும் மற்றும் பலவற்றைச் செய்யவும் பயன்படுத்தப்படுகிறது. HTMLபடிவம் ஒரு நோக்கத்திற்காக உருவாக்கப்பட்டது: ஒரு மென்பொருள் ஸ்கிரிப்ட் அல்லது மின்னஞ்சல் மூலம் செயலாக்க தகவல்களை சேகரித்து பின்னர் அனுப்புதல்.

எடுத்துக்காட்டு HTML படிவம் | தளத்தில் உள்ளிடவும்

குறிச்சொற்கள், பண்புக்கூறுகள் மற்றும் மதிப்புகள்

- வடிவத்தை தீர்மானிக்கவும்.
• name="" - படிவத்தின் பெயரை வரையறுக்கிறது.
• method="" - படிவத்திலிருந்து தரவை அனுப்பும் முறையை வரையறுக்கிறது. மதிப்புகள்: "பெறு" (இயல்புநிலை) மற்றும் "போஸ்ட்" . "போஸ்ட்" முறை பெரும்பாலும் பயன்படுத்தப்படுகிறது, ஏனெனில் இது பெரிய அளவிலான தரவை மாற்ற அனுமதிக்கிறது.
• action="" - தரவு செயலாக்கத்திற்கு அனுப்பப்படும் url ஐ வரையறுக்கிறது. எங்கள் விஷயத்தில் - enter_data.php ..
• - தரவு உள்ளீட்டிற்கான பொத்தான்கள், சுவிட்சுகள், உரை புலங்கள் போன்ற படிவ கூறுகளை வரையறுக்கவும்.
• type="text" - தரவு உள்ளீட்டிற்கான உரை புலத்தை வரையறுக்கிறது.
• type="password" - கடவுச்சொற்களை உள்ளிடுவதற்கான புலத்தை வரையறுக்கிறது, உரை நட்சத்திரங்கள் அல்லது வட்டங்களின் வடிவத்தில் காட்டப்படும்.
• type="checkbox" - ரேடியோ பட்டனை வரையறுக்கிறது.
• type="hidden" - ஒரு மறைக்கப்பட்ட படிவ உறுப்பை வரையறுக்கிறது - கூடுதல் தகவலை சேவையகத்திற்கு மாற்ற பயன்படுகிறது.
• size="25" - எழுத்துக்களில் உள்ள உரை புலத்தின் நீளம்.
• maxlength="30" - உள்ளிடப்பட்ட எழுத்துக்களின் அனுமதிக்கப்பட்ட அதிகபட்ச எண்ணிக்கை.
• மதிப்பு="" - ரேடியோ பொத்தான்கள் அல்லது சுவிட்சுகளுடன் தொடர்புடையதாக இருந்தால் செயலாக்கத்திற்கு அனுப்பப்படும் மதிப்பை வரையறுக்கிறது. உரைப் புலம் அல்லது பொத்தானின் ஒரு பகுதியாக இந்தப் பண்புக்கூறின் மதிப்பு காட்டப்படும், எடுத்துக்காட்டாக, மேலே உள்ள எடுத்துக்காட்டில் Vasya அல்லது உள்நுழைவு.

எடுத்துக்காட்டு HTML படிவம் | தளத்தில் கருத்துகள்

பெயர் அஞ்சல்

குறிச்சொற்கள், பண்புக்கூறுகள் மற்றும் மதிப்புகள்

• action="http://site/comments.php" - படிவத்திலிருந்து தரவு அனுப்பப்படும் url ஐ வரையறுக்கிறது.
• id="" - வடிவம் உறுப்பு பெயர் மற்றும் அடையாளங்காட்டியை வரையறுக்கிறது.
• name="" - வடிவம் உறுப்பு பெயரை வரையறுக்கிறது.
• - படிவத்தின் ஒரு பகுதியாக உரை புலத்தை வரையறுக்கவும்.
• cols="" - படிவ உரை புலத்தின் நெடுவரிசைகளின் எண்ணிக்கையை தீர்மானிக்கிறது.
• rows="" - படிவ உரை புலத்தின் வரிசைகளின் எண்ணிக்கையை வரையறுக்கிறது.

இடையில் இருந்தால் உரையை வைக்கவும், இது புலத்தின் உள்ளே காட்டப்படும், அதை எளிதாக அகற்ற முடியும்.

எடுத்துக்காட்டு HTML படிவம் | கீழ்தோன்றும் பட்டியல்

முதல் நிலை இரண்டாவது நிலை மூன்றாம் நிலை நான்காவது நிலை

குறிச்சொற்கள், பண்புக்கூறுகள் மற்றும் மதிப்புகள்

• - தேர்ந்தெடுக்க வேண்டிய நிலைகளுடன் பட்டியலை வரையறுக்கவும்.
• size="" - காணக்கூடிய பட்டியல் நிலைகளின் எண்ணிக்கையை தீர்மானிக்கிறது. மதிப்பு 1 எனில், கீழ்தோன்றும் பட்டியலைக் கையாளுகிறோம்.
• - பட்டியலின் நிலைகளை (பொருட்கள்) தீர்மானிக்கவும்.
• value="" - செயலாக்கத்திற்காக குறிப்பிட்ட url க்கு படிவத்தால் அனுப்பப்படும் மதிப்பைக் கொண்டுள்ளது.
• select="selected" - ஒரு பட்டியல் உருப்படியை எடுத்துக்காட்டு.

எடுத்துக்காட்டு HTML படிவம் | உருள் பட்டையுடன் பட்டியல்

அளவு="" பண்புக்கூறின் மதிப்பை அதிகரிப்பதன் மூலம், உருள் பட்டையுடன் பட்டியலைப் பெறுகிறோம்:

முதல் இடம் இரண்டாம் இடம் மூன்றாம் இடம் நான்காம் இடம்

முதல் நிலை இரண்டாவது நிலை மூன்றாம் நிலை நான்காவது நிலை

இந்த விருப்பத்திற்கு, மல்டிபிள் = "மல்டிபிள்" கொடியைப் பயன்படுத்தவும், இது பல நிலைகளைத் தேர்ந்தெடுப்பதை சாத்தியமாக்குகிறது. இது இல்லாதது ஒரு பொருளை மட்டுமே தேர்ந்தெடுக்க உங்களை அனுமதிக்கிறது.

type="submit" - ஒரு பொத்தானை வரையறுக்கிறது.

type="reset" - மீட்டமை பொத்தானை வரையறுக்கிறது.

மதிப்பு="" - பொத்தானில் உள்ள லேபிளை வரையறுக்கிறது.

கூடுதலாக பார்க்கவும்:

விளக்கம்

குறிச்சொல் கீழே காட்டப்பட்டுள்ளபடி, கீழ்தோன்றும் பட்டியலின் வடிவில் ஒரு இடைமுக உறுப்பை உருவாக்கவும், அதே போல் ஒற்றை அல்லது பல தேர்வுகளைக் கொண்ட பட்டியலை உருவாக்கவும் உங்களை அனுமதிக்கிறது. இறுதித் தோற்றம் குறிச்சொல்லின் அளவு பண்புக்கூறின் பயன்பாட்டைப் பொறுத்தது இது பட்டியலின் உயரத்தை அமைக்கிறது. பட்டியலின் அகலம் குறிச்சொல்லில் குறிப்பிடப்பட்ட பரந்த உரையால் தீர்மானிக்கப்படுகிறது , மற்றும் பாணிகளைப் பயன்படுத்தியும் மாற்றலாம். ஒவ்வொரு உருப்படியும் ஒரு குறிச்சொல்லைப் பயன்படுத்தி உருவாக்கப்படுகிறது , இது ஒரு கொள்கலனில் கூடு கட்டப்பட வேண்டும் . பட்டியல் தரவை சேவையகத்திற்கு அனுப்ப நீங்கள் திட்டமிட்டால், நீங்கள் உறுப்பை வைக்க வேண்டும் படிவத்தின் உள்ளே. ஸ்கிரிப்டுகள் மூலம் பட்டியல் தரவை அணுகும்போது இதுவும் அவசியம்.

தொடரியல்

பத்தி 1 புள்ளி 2

பண்புக்கூறுகள்

சில விசைப்பலகை குறுக்குவழியைப் பயன்படுத்தி பட்டியலுக்குச் செல்ல உங்களை அனுமதிக்கிறது. பக்கம் ஏற்றப்பட்ட பிறகு கவனம் பெற பட்டியலை அமைக்கிறது. ஒரு உறுப்புக்கான அணுகல் மற்றும் மாற்றத்தைத் தடுக்கிறது. ஒரு படிவத்துடன் பட்டியலை இணைக்கிறது. ஒரே நேரத்தில் பல பட்டியல் உருப்படிகளைத் தேர்ந்தெடுக்க உங்களை அனுமதிக்கிறது. சேவையகத்திற்கு அனுப்பப்படும் அல்லது ஸ்கிரிப்டுகள் மூலம் அணுக வேண்டிய உறுப்பின் பெயர். படிவத்தை சமர்ப்பிக்கும் முன் பட்டியல் தேர்ந்தெடுக்கப்பட வேண்டும். காண்பிக்க வேண்டிய பட்டியல் வரிகளின் எண்ணிக்கை. தாவல் விசையை அழுத்தும் போது உறுப்புகளுக்கு இடையேயான மாற்றத்தின் வரிசையை வரையறுக்கிறது

மூடும் குறிச்சொல்

தேவை.

HTML5 IE Cr Op Sa Fx

ஒரு ஹீரோவைத் தேர்ந்தெடுங்கள் செபுராஷ்கா முதலை ஜீனா ஷபோக்லியாக் எலி லாரிசா

முன்னரே வரையறுக்கப்பட்ட மதிப்புகளிலிருந்து ஒரு விருப்பத்தைத் தேர்ந்தெடுக்க பயனரை அனுமதிக்கும் கீழ்தோன்றும் பட்டியலை உருவாக்க HTML விருப்பக் குறிச்சொல் பயன்படுத்தப்படுகிறது.

பயனருக்குத் தெரியும் உரை மதிப்பு பண்புக்கூறில் குறிப்பிடப்பட்ட உரையிலிருந்து வேறுபடலாம். கீழ்தோன்றும் பட்டியலை எவ்வாறு உருவாக்குவது என்பது இங்கே:

பச்சை மஞ்சள் கருப்பு

• கீழ்தோன்றும் பட்டியல் குறிச்சொல்லைப் பயன்படுத்தி உருவாக்கப்பட்டது ;
  ஒரு குறிச்சொல்லின் உள்ளே
  தேர்வுக்கான விருப்பங்கள் குறிச்சொல்லைப் பயன்படுத்தி வரையறுக்கப்படுகின்றன ;
• குறிச்சொல்லில் PHP, JS, jquery போன்றவற்றைப் பயன்படுத்தி தேர்ந்தெடுக்கப்பட்ட விருப்பத்தை அணுக மதிப்பு பண்புக்கூறைப் பயன்படுத்தலாம்.

கீழ்தோன்றும் பட்டியலை வடிவமைக்க ஐடியைப் பயன்படுத்துவதற்குப் பதிலாக CSS வகுப்பைக் குறிப்பிடுவதும் சாத்தியமாகும்.

அடுத்த பகுதியில், JavaScript/JQuery இல் HTML கீழ்தோன்றும் பட்டியலைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டுகளைக் காண்பிப்பேன். பாணிகளை எவ்வாறு அமைப்பது என்பதையும் எடுத்துக்காட்டுகள் காண்பிக்கும் CSS/CSS3 ஐப் பயன்படுத்துதல் மற்றும் பூட்ஸ்ட்ராப் கட்டமைப்பு.

எளிய கீழ்தோன்றும் பட்டியலை உருவாக்குவதற்கான எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டு HTML தேர்வு விருப்பத்தைப் பயன்படுத்தி ஒரு கீழ்தோன்றும் பட்டியலை உருவாக்க மூன்று விருப்பங்களைத் தேர்வுசெய்யும்:

மேலே உள்ள எடுத்துக்காட்டு கீழ்தோன்றும் பட்டியலை உருவாக்க பின்வரும் மார்க்அப்பைப் பயன்படுத்துகிறது:

5 10 15 20 25

மதிப்பு பண்புக்கூறைப் பயன்படுத்துதல்

முன்னர் குறிப்பிட்டபடி, மதிப்பு பண்புக்கூறின் மதிப்பு பக்கத்தில் காட்டப்படும் உரையிலிருந்து வேறுபடலாம். எடுத்துக்காட்டாக, பயனர்களுக்கான நாடுகளின் பெயர்கள் அல்லது வண்ணங்களைக் காட்டலாம் மற்றும் மதிப்பு பண்புக்கூறில் ஷார்ட்கோட்களைப் பயன்படுத்தலாம்.

பின்வரும் எடுத்துக்காட்டில், மதிப்பு பண்புக்கூறுடன் கீழ்தோன்றும் பட்டியலை உருவாக்குவோம்:

ஆன்லைன் டெமோ மற்றும் குறியீட்டைப் பார்க்கவும்

குறிச்சொல்லுக்கு பின்வரும் குறியீடு பயன்படுத்தப்படுகிறது:

மெரூன் பச்சை மஞ்சள் நீலம் சிவப்பு

JavaScript இல் தேர்ந்தெடுக்கப்பட்ட விருப்பத்தை அணுகுவதற்கான எடுத்துக்காட்டு

இப்போது தேர்ந்தெடுக்கப்பட்ட விருப்பத்தின் மதிப்பை அணுகி சில செயல்களைச் செய்வதற்கான உதாரணத்தை உருவாக்குவோம். மேலே உள்ள எடுத்துக்காட்டில் உள்ள அதே பட்டியலை வண்ண விருப்பங்களுடன் உருவாக்குகிறோம். தேர்ந்தெடுக்கப்பட்டதும், ஆவணத்தில் அந்த நிறத்தைப் பயன்படுத்த பொத்தானைக் கிளிக் செய்யவும்:

ஆன்லைன் டெமோ மற்றும் குறியீட்டைப் பார்க்கவும்

விருப்ப மதிப்பு HTMLக்கு பின்வரும் குறியீடு பயன்படுத்தப்படுகிறது:

மெரூன் பச்சை மஞ்சள் நீலம் சிவப்பு மற்றவை

ஒரு விருப்பத்தின் மதிப்பு பண்புக்கூறின் மதிப்பை அணுக ஜாவாஸ்கிரிப்டில் பின்வரும் குறியீடு வரி பயன்படுத்தப்படுகிறது :

var seltheme = document.getElementById(“selcolor”).மதிப்பு;

பொத்தானைக் கிளிக் செய்யும் போது, ​​ஒரு JS செயல்பாடு அழைக்கப்படுகிறது, இது கீழ்தோன்றும் பட்டியலில் தேர்ந்தெடுக்கப்பட்ட மதிப்பை ஒரு மாறிக்கு ஒதுக்குகிறது. தற்போதைய ஆவணத்திற்கு வண்ணத்தைப் பயன்படுத்த இந்த மதிப்பு பயன்படுத்தப்படுகிறது.

JQuery இல் தெரியும் உரையை அணுகுகிறது

இந்த நேரத்தில், தேர்ந்தெடுக்கப்பட்ட விருப்பத்தின் மதிப்பை அணுக JQuery ஐப் பயன்படுத்துவேன்: உரை மற்றும் மதிப்பு . இந்த டெமோவில், HTML இல் விருப்பக் குறிச்சொல்லில் தெரியும் உரையை அணுகுவேன்:

ஆன்லைன் டெமோ மற்றும் குறியீட்டைப் பார்க்கவும்

குறிச்சொல்லில் உள்ள ஒவ்வொரு விருப்பத்திற்கும் குறியீட்டில்

பொருள் உரையிலிருந்து வேறுபட்டது. நீங்கள் ஒரு வண்ணத்தைத் தேர்ந்தெடுத்ததும், விழிப்பூட்டலில் தெரியும் உரையை jQuery காண்பிக்கும். குறி குறியீடு அடுத்தது:

மெரூன் பச்சை மஞ்சள் நீலம் சிவப்பு

இந்த மதிப்பை எவ்வாறு அணுகுவது என்பது இங்கே HTML தேர்வு விருப்பம் JavaScript தேர்ந்தெடுக்கப்பட்டது:

var selectcolor = $("#jqueryselect option:selected").text();

நீங்கள் JQuery $.val() முறையைப் பயன்படுத்தி மதிப்பையும் அணுகலாம்:

var தேர்ந்தெடுக்கப்பட்ட நிறம் = $("#jqueryselect").val();

மேலே உள்ள எடுத்துக்காட்டில் இந்த வரியை மாற்றவும், குறியீடு தெரியும் உரைக்கு பதிலாக மதிப்பு பண்புக்கூறில் சுருக்குக்குறியீடு/வண்ண மதிப்பைக் காண்பிக்கும்.

PHP ஸ்கிரிப்ட்டில் மதிப்பைப் பெறுவதற்கான எடுத்துக்காட்டு

கீழ்தோன்றும் பட்டியலில் இருந்து தேர்ந்தெடுக்கப்பட்ட விருப்பத்தின் மதிப்பைப் பெறுவதற்கான இந்த எடுத்துக்காட்டில், குறிச்சொல்லைப் பயன்படுத்தி படிவம் உருவாக்கப்படுகிறது மார்க்அப் பிரிவில். கீழ்தோன்றும் பட்டியலில் இருந்து வண்ணத்தைத் தேர்ந்தெடுத்த பிறகு, "சமர்ப்பி" பொத்தானைக் கிளிக் செய்யவும். படிவத் தரவு அதே PHP கோப்பிற்கு அனுப்பப்படும், அதன் பிறகு தேர்ந்தெடுக்கப்பட்ட வண்ணம் காட்டப்படும்:

ஆன்லைன் டெமோ மற்றும் குறியீட்டைப் பார்க்கவும்

எடுத்துக்காட்டில் பயன்படுத்தப்படும் படிவ முறை POST ஆகும், எனவே நீங்கள் PHP $_POST[“”] வரிசையைப் பயன்படுத்தி படிவ மதிப்புகளைப் பெறலாம். இது எடுத்துக்காட்டில் பயன்படுத்தப்படும் படிவக் குறியீடு:

ஒரு வண்ணத்தைத் தேர்ந்தெடுக்கவும்:

மெரூன் பச்சை மஞ்சள் நீலம் சிவப்பு