select ටැගය
select ටැගය HTML පෝරමවල භාවිතා කිරීම සඳහා
ඩ්‍රොප්ඩවුන් ලැයිස්තුවක් නිර්මාණය කරයි.
ලැයිස්තුවේ වෙනම අංගය
option ටැගය තුළ ගබඩා කළ යුතුය.
ගුණාංග
| ගුණාංගය | විස්තරය |
|---|---|
multiple |
මෙම ගුණාංගය පවතින විට මල්ටිසෙලෙක්ට් - ඩ්‍රොප්ඩවුන් ලැයිස්තුවක් නිර්මාණය වේ,
එහිදී Ctrl යතුර තද කර ගනිමින් හෝ මවුසය භාවිතා කරමින් බහු අංග තෝරා ගත හැක.
විකල්ප ගුණාංගයකි. |
name |
ඩ්‍රොප්ඩවුන් ලැයිස්තුවේ නම. PHP හි ආදාන ක්ෂේත්‍රයේ දත්ත ලබා ගැනීම සඳහා අවශ්‍ය වේ. පෝරමය නිසි ලෙස ක්‍රියා කිරීම සඳහා, ආදාන ක්ෂේත්‍රවල නම් එකිනෙකට වෙනස් විය යුතුය (එක් පෝරමයක් තුළ). ඒවා සමාන වන්නේ නම් - HTML කේතයේ පහළින් පිහිටා ඇති ආදාන ක්ෂේත්‍රයේ දත්ත PHP වෙත ලැබේ. |
උදාහරණය
ඩ්‍රොප්ඩවුන් ලැයිස්තුව ක්‍රියා කරන ආකාරය බලමු:
html<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
උදාහරණය
width CSS ගුණාංගය භාවිතයෙන්
පැහැදිලිව නිශ්චිතව නොදක්වා ඇත්නම්, ඩ්‍රොප්ඩවුන් ලැයිස්තුවේ පළල
විශාලතම අංගයේ පළලට සමාන කරමු:
html<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
උදාහරණය . පෙරනිමි තේරීම
දැන් අපි පෙරනිමි ලෙස නගරයක් තෝරා ගැනීමට උත්සාහ කරමු.
selected ගුණාංගය භාවිතයෙන් මෙය කරමු:
html<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
උදාහරණය . මල්ටිසෙලෙක්ට්
දැන් අපි සාමාන්‍ය සෙලෙක්ට් එක
multiple ගුණාංගය භාවිතයෙන් මල්ටිසෙලෙක්ට් එකකට හරවමු:
html<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
Результат:
name ගුණාංගයේ සකසා ඇති සෙලෙක්ට් එකේ නම, අවසානයේ හතරැස් වරහන් සහිත විය යුතු බව සලකන්න.
PHP වෙත තෝරාගත් සියලුම අගයන් ලැබෙන බවට වග බලා ගැනීම සඳහා මෙය අවශ්‍ය වේ (එසේ නොමැතිනම් එක් අගයක් පමණක් - අවසාන අගය ලැබේ).
උදාහරණය . මල්ටිසෙලෙක්ට් එකක පෙරනිමි අගයන් කිහිපයක්
දැන්, පෙරනිමි මල්ටිසෙලෙක්ට් එකක, එකකට වැඩි අගයන් තෝරා ගැනීමට උත්සාහ කරමු:
html<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
Результат: