<button> එදිරිව. <ආදාන වර්ගය = “බොත්තම” />. භාවිතා කළ යුත්තේ කුමක්ද?


1645

බොහෝ වෙබ් අඩවි දෙස බලන විට (SO ද ඇතුළුව), බොහෝ ඒවා භාවිතා කරන්නේ:

<input type="button" />

වෙනුවට:

<button></button>
  • මේ දෙක අතර ඇති ප්‍රධාන වෙනස්කම් මොනවාද?
  • එකක් වෙනුවට අනෙකක් භාවිතා කිරීමට වලංගු හේතු තිබේද?
  • ඒවා ඒකාබද්ධ කිරීම සඳහා වලංගු හේතු තිබේද?
  • භාවිතා <button>කිරීම අනුකූලතා ගැටළු සමඟ පැමිණේ, එය එතරම් පුළුල් ලෙස භාවිතා නොවන බව දැකීම?

Answers:


668

භාවිතා කරන විට තවත් IE ගැටලුවක් <button />:

අපි IE ගැන කතා කරන අතරේ, බොත්තම් පළල හා සම්බන්ධ දෝෂ කිහිපයක් තිබේ. ඔබ මෝස්තර එකතු කිරීමට උත්සාහ කරන විට එය අභිරහස් ලෙස අතිරේක පෑඩින් එකතු කරනු ඇත, එයින් අදහස් වන්නේ දේවල් පාලනය කර ගැනීමට ඔබට කුඩා හැක් එකක් එකතු කළ යුතු බවයි.


191
IE6 දැන් මම භාවිතා නොකරන හේතුවක් නැත උපකල්පනය මිය ගිය පසු මේ පිළිතුර, 2009 දී වූ <button>දැන්?
රොස්ඩි කාසිම්

76
ඔවුන්ට මුහුදු කොල්ලකරුවන් වීමට අවශ්‍ය නම්, ඔබේ වෙබ් අඩවියේ සූක්ෂම අනුවාදයක් ලබා ගැනීමට ඔවුන්ට ඉඩ දෙන්න. IE6 අතහරින්න, IE7 අතහරින්න, අවාසනාවකට IE8 ට තවමත් සහාය අවශ්‍යයි.
ජැරඩ්

15
මයික්‍රොසොෆ්ට් හි IE6 කවුන්ට් ඩවුන් පිටුවට අනුව , චීනයේ IE6 භාවිතය තවමත් (2014 ජනවාරි වන විට) 22% ක් පමණ වේ. IE6 සහය 2014 අප්‍රියෙල් 8 වන දිනෙන් අවසන් වන බව ie6death.com සටහන් කරයි.
බ්‍රයන් එච්

56
බොහෝ අය පවසා ඇති පරිදි, තවමත් IE හි පැරණි සංස්කරණවල භාවිතා කරන්නන් අන්තර්ජාලය වෙත බිහිසුණු ලෙස පෙනෙන්නට තිබේ.
jinglesthula

9
<button />එය ද formගුණාංගයක් (සහ අදාළ ගුණාංග) ඇති බැවින් එය ලේඛන ශරීරයේ වෙනත් කොටස්වල ආකෘති සමඟ සම්බන්ධ කළ හැකිය.
Gup3rSuR4c

333

පැති සටහනක් ලෙස, <button>ව්‍යංගයෙන් ඉදිරිපත් කරනු ඇත, එය ඉදිරිපත් නොකර පෝරමයක බොත්තමක් භාවිතා කිරීමට ඔබට අවශ්‍ය නම් ගැටළු ඇති කළ හැකිය. මේ අනුව, භාවිතා කිරීමට තවත් හේතුවක් <input type="button">(හෝ <button type="button">)

සංස්කරණය කරන්න - වැඩි විස්තර

වර්ගයක් නොමැතිව, buttonව්‍යංගයෙන් වර්ගය ලබා ගනීsubmit . පෝරමයේ කොපමණ ඉදිරිපත් කිරීමේ බොත්තම් හෝ යෙදවුම් තිබේද යන්න ගැටළුවක් නොවේ, ඒවායින් එකක් පැහැදිලිව හෝ ව්‍යංගයෙන් ඉදිරිපත් කිරීම ලෙස ටයිප් කර ඇති විට, ක්ලික් කළ විට පෝරමය ඉදිරිපත් කරනු ඇත.

බොත්තමක් සඳහා සහය දක්වන වර්ග 3 ක් ඇත

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

4
ඔබට තවත් විස්තර එකතු කළ හැකිද? බහු බොත්තම් තිබේ නම් කුමක් සිදුවේද? මෙය කරන්නේ = ඉදිරිපත් කරන්නද?
සයිමන්_වීවර්

48
ඔහ් ආදරණීය ඩබ්ලිව් 3 සී, submitආකෘති 99.9% ක් buttonසමඟ බොහෝ දේ ඇති විට පෙරනිමියෙන් ඇයි එක් submit ?!
2grit

13
බොහෝ පෝරමවල ඇත්තේ එක් බොත්තමක් පමණි, එය ඉදිරිපත් කිරීම වේ. එක් ආකාරයකින් හෝ වෙනත් ආකාරයකින් ඇමතුමක් ගැනීමට සිදු විය, මම සිතමි.
jinglesthula

5
මෙය විශාල ගොචා විය හැකිය! මගේ පරීක්ෂණ කේතය 80% ක් පමණ ඉදිරිපත් කරයි, එසේ නොමැතිනම් එය සාමාන්‍ය බොත්තමක් ලෙස සලකනු ලැබේ. <ආකෘතියක් තුළ <button> භාවිතා කරන විට BECAREFUL
සිඩ්වෙල්

4
@ mik01aj "පෝරමයේ ඉදිරිපත් කළ බොත්තම් හෝ යෙදවුම් කීයක් තිබුණත් කමක් නැත, ඒවායින් එකක් පැහැදිලිව හෝ ව්‍යංගයෙන් ඉදිරිපත් කරන්නැයි ටයිප් කර ඇති විට, ක්ලික් කළ විට පෝරමය ඉදිරිපත් කරනු ඇත." මෙය පැහැදිලිව පෙනෙන්නට නැද්ද? ඕනෑම ඉදිරිපත් කිරීමේ බොත්තමක් පෝරමය ඉදිරිපත් කළ යුතුය. ඇයි මෙය කියන්නේ? මට නැති වී ඇත්තේ කුමක්ද?
කොන්ක්‍රීට් ගැනට්

174

මෙම ලිපිය වෙනස පිළිබඳ හොඳ දළ විශ්ලේෂණයක් ඉදිරිපත් කරන බව පෙනේ.

පිටුවෙන්:

බොත්තම් මූලද්‍රව්‍යය සමඟ සාදන ලද බොත්තම් INPUT මූලද්‍රව්‍යය සමඟ සාදන ලද බොත්තම් මෙන් ක්‍රියා කරයි, නමුත් ඒවා පොහොසත් විදැහුම්කරණ හැකියාවන් ලබා දෙයි: BUTTON මූලද්‍රව්‍යයට අන්තර්ගතයක් තිබිය හැකිය. නිදසුනක් ලෙස, රූපයක් අඩංගු BUTTON මූලද්‍රව්‍යයක් “ප්‍රතිරූපය” ලෙස සකසා ඇති INPUT මූලද්‍රව්‍යයකට සමාන විය හැකි නමුත් BUTTON මූලද්‍රව්‍ය වර්ගය අන්තර්ගතයට ඉඩ දෙයි.

බොත්තම් මූලද්රව්යය - W3C


45

ඇතුළේ <button>අංගයක් පෙළ හෝ රූප මෙන් අන්තර්ගත කළ හැක.

<button type="button">Click Me!</button> 

මෙම මූලද්රව්යය සහ මූලද්රව්යය සමඟ සාදන ලද බොත්තම් අතර වෙනස මෙයයි <input>.


5
+1, <input />ඇත්ත වශයෙන්ම අවලංගු අංගයක් බැවින්, <button>එසේ නොවේ
සෙබස්තියන්

40

උපුටා ගැනීම

වැදගත්: ඔබ බොත්තම් අංගය HTML ආකාරයෙන් භාවිතා කරන්නේ නම්, විවිධ බ්‍රව්සර් විවිධ අගයන් ඉදිරිපත් කරයි. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් <button>සහ </button>ටැග් අතර පෙළ ඉදිරිපත් කරන අතර අනෙක් බ්‍රව්සර් විසින් අගය ගුණාංගයේ අන්තර්ගතය ඉදිරිපත් කරනු ඇත. HTML ආකෘතියකින් බොත්තම් සෑදීමට ආදාන අංගය භාවිතා කරන්න.

සිට: http://www.w3schools.com/tags/tag_button.asp

මා නිවැරදිව තේරුම් ගන්නේ නම්, පිළිතුර නම් බ්‍රව්සරයේ සිට බ්‍රව්සරයට අනුකූලතාව සහ ආදාන අනුකූලතාවයි


43
W හෝකන් එම පිටුව ලියා ඇත්තේ W3 පාසැල් W3C ලෙස මවා පෑ මෝඩයන් විසිනි. යථාර්ථය නම්, W3 පාසැල් මේ ආකාරයේ ද්‍රව්‍ය හැසිරවිය හැකි වෙනත් අඩවි දහස් ගණනකට වඩා හොඳ හෝ නරක නැත.
ලිස්ටර් මහතා

ඇත්ත වශයෙන්ම, එය IE හි අනුවාදය සහ IE මාදිලිය මත රඳා පවතී - w3 පාසල් විසින් උපුටා දැක්වීමෙන් පසුව තොරතුරු යාවත්කාලීන කරන ලදි
ඩේමියන්

12
RMrLister මම W3 පාසැල් W3C සමඟ සම්බන්ධ යැයි සිතන පුද්ගලයින් සමඟ කතා කළෙමි. ඩබ්ලිව්. (මම W3S වෙතින් බොහෝ දේ ඉගෙන ගත්තා, එය හොඳ වූ විට; එය ප්‍රමිතීන්ට අනුකූල නොවීය.)
Marnen Laibow-Koser

17
WebMrLister W3Schools යනු වෙබ් තාක්ෂණික තොරතුරු සඳහා වඩාත්ම භාවිතා කරන නිල නොවන ප්‍රභවයයි. ගුණාත්මකභාවය සැබවින්ම උරා ගනී. ඇයි ඔවුන්ව තනිකඩ නොකරන්නේ? W3Fools වැරදුණු විස්තර මොනවාද? එහි ඇති සෑම දෙයක්ම මට නිවැරදි යැයි පෙනේ.
මාර්නන් ලයිබෝ-කොසර්

19

නැංගුරම්, යෙදවුම් සහ බොත්තම් අතර වෙනස මම ලිපිය උපුටා දක්වන්නෙමි :

නැංගුරම් (ද<a> මූලද්‍රව්‍යය) මගින් අධි සබැඳි, පුද්ගලයෙකුට බ්‍රව්සරයකට සැරිසැරීමට හෝ බාගත කිරීමට හැකි සම්පත් නියෝජනය කරයි. ඔබේ පරිශීලකයාට නව පිටුවකට යාමට හෝ ගොනුවක් බාගත කිරීමට ඉඩ දීමට අවශ්‍ය නම්, නැංගුරමක් භාවිතා කරන්න.

ආදාන ( <input>) නියෝජනය දත්ත ක්ෂේත්ර: ඔබ සේවාදායකය වෙත යැවීමට අදහස් නිසා සමහර පරිශීලක දත්ත. බොත්තම් හා සම්බන්ධ ආදාන වර්ග කිහිපයක් තිබේ:

  • <input type="submit">
  • <input type="image">
  • <input type="file">
  • <input type="reset">
  • <input type="button">

ඒ සෑම එකක්ම අර්ථයක් ඇත, උදාහරණයක් ලෙස " ගොනුව " ගොනුවක් උඩුගත කිරීමට භාවිතා කරයි, " යළි පිහිටුවීම " පෝරමයක් හිස් කරයි, සහ " ඉදිරිපත් කිරීම " මඟින් දත්ත සේවාදායකයට යවයි. W3 යොමු පරීක්ෂා MDN මත හෝ W3Schools මත .

මෙම බොත්තම ( <button>)අංගයක් ඉතා හුරුබුහුටි වේ:

  • පින්තූර, ඡේද හෝ ශීර්ෂ වැනි බොත්තමක් තුළ ඔබට කූඩු මූලද්‍රව්‍ය දැමිය හැකිය;
  • බොත්තම් ද අඩංගු විය හැක ::beforeහා::after ව්යාජ-මූලදව්ය;
  • බොත්තම් ගුණාංගයට සහය disabledදක්වයි. මෙය ඒවා සක්‍රිය සහ අක්‍රිය කිරීම පහසු කරයි.

නැවතත්, MDN හෝ W3 පාසැල් වල<button> ටැගය සඳහා W3 යොමුව පරීක්ෂා කරන්න .


17

HTML අත්පොතේ පෝරම පිටුව උපුටා දැක්වීම :

බොත්තම් මූලද්‍රව්‍යය සමඟ සාදන ලද බොත්තම් INPUT මූලද්‍රව්‍යය සමඟ සාදන ලද බොත්තම් මෙන් ක්‍රියා කරයි, නමුත් ඒවා පොහොසත් විදැහුම්කරණ හැකියාවන් ලබා දෙයි: BUTTON මූලද්‍රව්‍යයට අන්තර්ගතයක් තිබිය හැකිය. නිදසුනක් ලෙස, රූපයක් අඩංගු BUTTON මූලද්‍රව්‍යයක් “ප්‍රතිරූපය” ලෙස සකසා ඇති INPUT මූලද්‍රව්‍යයකට සමාන විය හැකි නමුත් BUTTON මූලද්‍රව්‍ය වර්ගය අන්තර්ගතයට ඉඩ දෙයි.


17

ඔබට පෝරමයක බොත්තමක් සෑදීමට අවශ්‍ය නම් ආදාන මූලද්‍රව්‍යයෙන් බොත්තම භාවිතා කරන්න. ඔබට ක්‍රියාවක් සඳහා බොත්තමක් සෑදීමට අවශ්‍ය නම් බොත්තම් ටැගය භාවිතා කරන්න.


9
ග්‍රාහක පැති ස්ක්‍රිප්ටින් සඳහා. <ආදාන වර්ගය = "බොත්තම"> HTML හි ක්‍රියාකාරීත්වයක් නොමැත.
iGEL

12
<button>
  • පෙරනිමියෙන් හැසිරෙන්නේ එයට "type =" submit "ලක්ෂණයක් තිබේ නම් ය
  • පෝරමයක් නොමැතිව මෙන්ම ආකෘති වලද භාවිතා කළ හැකිය.
  • පෙළ හෝ html අන්තර්ගතයට අවසර ඇත
  • css ව්‍යාජ මූලද්‍රව්‍යයන්ට අවසර ඇත (වැනි: පෙර)
  • ටැග් නම සාමාන්‍යයෙන් තනි ආකෘතියකට අද්විතීය වේ

එදිරිව.

<input type='button'>
  • ඉදිරිපත් කිරීමේ අංගයක් ලෙස හැසිරීමට වර්ගය 'ඉදිරිපත් කරන්න' ලෙස සැකසිය යුතුය
  • භාවිතා කළ හැක්කේ ආකෘති වලින් පමණි.
  • අවසර ඇත්තේ පෙළ අන්තර්ගතයට පමණි
  • css ව්‍යාජ මූලද්‍රව්‍ය නොමැත
  • බොහෝ ආකෘති මූලද්‍රව්‍ය (යෙදවුම්) මෙන් එකම ටැග් නම

-
නවීන බ්‍රව්සර් වලදී, මූලද්‍රව්‍ය දෙකම සීඑස්එස් සමඟ පහසුවෙන් හැඩගස්වා ගත හැකි නමුත් බොහෝ අවස්ථාවන්හීදී, buttonඅභ්‍යන්තර html සහ ව්‍යාජ මූලද්‍රව්‍ය සමඟ ඔබට වඩාත් මෝස්තර කළ හැකි බැවින් මූලද්‍රව්‍යය වඩාත් කැමති වේ.


9

CSS මෝස්තරය සම්බන්ධයෙන් ගත් කල, <button type="submit" class="Btn">Example</button>වඩා හොඳ වන්නේ එය ඔබට CSS :beforeසහ :after ව්‍යාජ පන්ති භාවිතා කිරීමේ හැකියාව ලබා දෙන බැවිනි.

ෙහේතුෙවන් <input type="button">දෘශ්ය ලෙස විවිධ ඉටු <a>හෝ <span>විට මම ඔවුන් වළක්වා සමහර අවස්ථාවල දී පන්ති වලින් නිමවූ.

වර්තමාන ඉහළම පිළිතුර 2009 දී ලියා ඇති බව සඳහන් කිරීම වටී . IE6 දැන් සැලකිලිමත් නොවේ <button type="submit">Wins</button>.


9

ඔබ jQuery භාවිතා කරන්නේ නම් විශාල වෙනසක් ඇත. බොත්තම් වලට වඩා යෙදවුම් වල සිදුවීම් ගැන jQuery දනී. බොත්තම් මත, jQuery දන්නේ 'ක්ලික්' සිදුවීම් ගැන පමණි. යෙදවුම් මත, jQuery 'ක්ලික්', 'නාභිගත' සහ 'බොඳ' සිදුවීම් පිළිබඳව දැනුවත් ය.

ඔබට අවශ්‍ය පරිදි සෑම විටම සිදුවීම් ඔබගේ බොත්තම් සමඟ බැඳිය හැකිය, නමුත් jQuery ස්වයංක්‍රීයව දන්නා සිදුවීම් වෙනස් බව මතක තබා ගන්න. නිදසුනක් ලෙස, ඔබ ඔබේ පිටුවේ 'නාභිගත කිරීමේ' සිදුවීමක් ඇති සෑම අවස්ථාවකම ක්‍රියාත්මක කරන ලද ශ්‍රිතයක් නිර්මාණය කළේ නම්, ආදානය මඟින් ශ්‍රිතය අවුලුවන නමුත් බොත්තමක් එසේ නොවේ.


re: KjetilNordin - පිටුවක කිසියම් නාභිගත සිදුවීම් පිළිබඳව දැනුවත්ව සිටි යෙදුමක් අප සතුව තිබූ අතර, එකක් සිදුවිය, ක්‍රියාවක් සිදුවිය. එබැවින් ආදානයක් භාවිතා කරන්නේ නම්, ඔබට තනි සිදුවීමක් සඳහා සියලුම අංග නැරඹිය හැකිය. ඔබ එසේ කළ යුතු යැයි නොකියයි, නමුත් ඔබට හැකි විය. අවදානම නම් යමෙකු බොත්තමකට ආදානය වෙනස් කිරීම, පසුව නාභිගත වීම සිදු නොවේ, පසුව ඔබේ ක්‍රියාව සිදු නොවේ, එවිට ඔබගේ යෙදුම උත්පාත වේ. අපට සිදු වූයේ එයයි. :)
MattC

1
මූලද්‍රව්‍යයක් දැනට මූසිකය / යතුරුපුවරුව හරහා ඉලක්ක කර ඇති විට නාභිගත සිදුවීම් භාවිතා කරන්න. ඔවුන් ලේඛනයේ සිටින තැන පරිශීලකයාට පෙන්වයි.
ඇල්බට්

7

<button>එය HTML අඩංගු විය හැකි නම්යශීලී වේ. තව ද, CSS භාවිතයෙන් විලාසිතාවට වඩා පහසු වන අතර, මෝස්තරය සැබවින්ම සියලු බ්‍රව්සර් හරහා ක්‍රියාත්මක වේ. කෙසේ වෙතත්, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (Eww! IE!) සම්බන්ධයෙන් යම් අඩුපාඩු තිබේ. ටැග් හි අන්තර්ගතය අගය ලෙස භාවිතා කරමින් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් විසින් අගය ගුණාංගය නිසියාකාරව හඳුනා නොගනී. බොත්තම ක්ලික් කළත් නැතත්, පෝරමයක ඇති සියලුම අගයන් සේවාදායක පැත්තට යවනු ලැබේ. මෙය a ලෙස භාවිතා කරයි<button type="submit"> උපක්‍රමයක් හා වේදනාවක් .

<input type="submit">අනෙක් අතට කිසිදු වටිනාකමක් හෝ හඳුනාගැනීමේ ගැටළු නොමැත, නමුත් ඔබට කෙසේ වෙතත් HTML එකතු කළ නොහැක <button>. එය ශෛලියට වඩා දුෂ්කර වන අතර, මෝස්තරය සෑම බ්‍රව්සරයක් පුරාම හොඳින් ප්‍රතිචාර නොදක්වයි. මෙය උපකාරී වේ යැයි සිතමි.


7

මට මෙහි ඉතිරි පිළිතුරු වලට යමක් එකතු කිරීමට අවශ්‍යයි. ආදාන මූලද්‍රව්‍ය හිස් හෝ අවලංගු මූලද්‍රව්‍ය ලෙස සැලකේ (අනෙක් හිස් මූලද්‍රව්‍යයන් වන්නේ ප්‍රදේශය, පාදම, br, col, hr, img, ආදානය, සබැඳිය, මෙටා සහ පරාමිතියයි. ඔබට මෙහි පරීක්ෂා කළ හැකිය ), එයින් අදහස් කරන්නේ ඒවාට කිසිදු අන්තර්ගතයක් තිබිය නොහැකි බවයි. කිසිදු අන්තර්ගතයක් නොතිබීමට අමතරව, හිස් මූලද්‍රව්‍යයන්ට :: පසු සහ :: පෙර වැනි ව්‍යාජ මූලද්‍රව්‍ය තිබිය නොහැක , එය ප්‍රධාන අඩුපාඩුවක් ලෙස මම සලකමි.


5

මෙය ඉතා පැරණි ප්‍රශ්නයක් වන අතර එය තවදුරටත් අදාළ නොවිය හැකි වුවත්, කරුණාකර මතක තබා ගන්න <button>ටැගය භාවිතා කර ඇති බොහෝ ගැටලු තවදුරටත් නොපවතින බැවින් එය භාවිතා කිරීම ඉතා සුදුසුය.

විවිධ හේතූන් මත ඔබට එය කළ නොහැකි නම්, ප්‍රවේශ විය හැකි පරිදි ඔබේ ටැගයේ ගුණාංග = = බොත්තම ”එකතු කිරීමට මතක තබා ගන්න. මෙම ලිපිය තරමක් තොරතුරු සහිත ය: https://www.deque.com/blog/accessible-aria-buttons/


4

ඊට අමතරව, පුස්තකාල සැපයුම්කරුගෙන් සහ ඒවා කේත කරන දේවලින් එක් වෙනසක් පැමිණිය හැකිය. උදාහරණයක් ලෙස මෙහි මම ජංගම කෝණික ui සමඟ සංයුක්තව කෝඩෝවා වේදිකාව භාවිතා කරන අතර ආදාන / div / etc ටැග් එන්ජී-ක්ලික් සමඟ හොඳින් ක්‍රියා කරන අතර, බොත්තම මඟින් දෘශ්‍ය ස්ටුඩියෝ නිදොස්කරණය බිඳ වැටීමට හේතු විය හැක. MatC පිළිතුර එකම ප්‍රශ්නයට යොමු වන බව සලකන්න, jQuery යනු නිකම්ම නිකම් ලිබ් එකක් වන අතර සැපයුම්කරු එක් මූලද්‍රව්‍යයක යම් ක්‍රියාකාරිත්වයක් ගැන සිතුවේ නැත, ඔහු / ඔහු තවත් මූලද්‍රව්‍යයක් සපයයි. එබැවින් ඔබ පුස්තකාලයක් භාවිතා කරන විට, ඔබට එක් අංගයක් සමඟ ගැටලුවකට මුහුණ දීමට සිදුවිය හැකිය, එය ඔබට තවත් අංගයකට මුහුණ නොදේ. හුදෙක් ජනප්‍රිය එකක් වැනි inputඑය බොහෝ දුරට ස්ථාවර එකක් වනු ඇත, එය වඩා ජනප්‍රිය නිසා.

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.