亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

<input type ='submit'/>和<button type ='submit'>

<input type ='submit'/>和<button type ='submit'>

PIPIONE 2019-11-25 14:45:28
關于它們有很多傳說。我想知道真相。以下兩個示例之間有什么區別?<input type='submit' value='text' /><button type='submit'>text</button>
查看完整描述

3 回答

?
慕姐8265434

TA貢獻1813條經驗 獲得超2個贊

不確定從何處獲得傳說,但:


提交按鈕 <button>

與:


<button type="submit">(html content)</button>

IE6將在標記之間提交此按鈕的所有文本,其他瀏覽器將僅提交值。使用<button>可使您在按鈕的設計上享有更大的布局自由度。乍一看,它的所有意圖和目的似乎都很出色,但是各種瀏覽器的怪癖使其有時很難使用。


在您的示例中,IE6將發送text到服務器,而其他大多數瀏覽器將不發送任何內容。要使其跨瀏覽器兼容,請使用<button type="submit" value="text">text</button>。更好的是:不要使用該值,因為如果添加HTML,則在服務器端收到的內容將變得非常棘手。相反,如果必須發送額外的值,請使用隱藏字段。


帶按鈕 <input>

與:


<input type="button" />

默認情況下,這幾乎不執行任何操作。它甚至不會提交您的表格。您只能在按鈕上放置文本,并通過CSS為其指定大小和邊框。其最初(當前)的意圖是執行腳本,而無需將表單提交給服務器。


正常提交按鈕,帶有 <input>

與:


<input type="submit" />

像前者一樣,但實際上提交了周圍的表格。


圖片提交按鈕 <input>

與:


<input type="image" />

與前一個(提交)一樣,它也將提交一個表單,但是您可以使用任何圖像。這曾經是需要提交表單時將圖像用作按鈕的首選方式。為了獲得更多控制,<button>現在使用。這也可以用于服務器端圖像映射,但是如今這很少見。當使用usemap-attribute和(帶有或不帶有該屬性)時,瀏覽器會將鼠標指針的X / Y坐標發送到服務器(更確切地說,是單擊鼠標時按鈕內的鼠標指針位置)。如果您只是忽略這些額外功能,那無非就是偽裝成圖像的提交按鈕。


瀏覽器之間有一些細微的差異,但是除了上述<button>標記外,所有瀏覽器都將提交值屬性。


查看完整回答
反對 回復 2019-11-25
?
Qyouu

TA貢獻1786條經驗 獲得超11個贊

使用<button>,您可以使用img標簽等,其中文本是


<button type='submit'> text -- can be img etc.  </button>

使用<input>類型,您只能使用文字


查看完整回答
反對 回復 2019-11-25
?
holdtom

TA貢獻1805條經驗 獲得超10個贊

綜上所述 :


<input type="submit">


<button type="submit"> Submit </button>

默認情況下,兩者都將在視覺上繪制一個執行相同操作的按鈕(提交表單)。


但是,建議使用<button type="submit">它,因為它具有更好的語義,更好的ARIA支持并且更易于樣式設置。


查看完整回答
反對 回復 2019-11-25
  • 3 回答
  • 0 關注
  • 547 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號