HTML中button和input button的區別
button和input button的區別
一句話概括主題:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加強大。
HTML 4.01規範的Forms部分指 名表單有以下幾種控制類型:buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object controls之外,都是由<input>完成。
我這裏說的是<button>和<input>。
<button>和<input>
規範中指名:可以用<button>和<input>來做表單按扭。不同的按鈕類型請參考這些元素的詳細定義。要註意的是<button>比<input>支持更豐富的表現功能。
一些區別
大家都知道<input>可以這樣用(實際上是一定要這樣用):<input type="submit" value="OK" />,一定要這樣閉合。而不是:<input type="submit" value="OK" ></input>。因為起始標簽為必須,而關閉標簽是禁止的。
<button>比<input>更厲害的地方就在於它可以包含內容。它的值並不是寫在value屬性裏,而是包含在標簽中。如:<button>OK</button>。<button>的起始標簽和關閉標簽都是必須的。這樣你便獲得了樣式化的主導權。
你可以這樣寫:<button><strong>OK</strong>, I do.</button>,甚至是插入圖片:<button><img src="http://jianzhong5137.blog.163.com/blog/button.gif" />, it‘s great.</button>。有點類似於<input type="image">,但是顯然強大多了。
最後要註意的是,被<button>包含的圖片,不能使用熱點地圖,即不能<img src="http://jianzhong5137.blog.163.com/blog/foo.gif" usemap="..." />,這是不合法的。當然也不能再包含諸如input, select, textarea, label, button, form, fieldset, iframe,和isindex(不推薦使用)元素了。
<button>和<input type="button"> 的具體區別
1、關閉標簽設置。<input>禁用關閉標簽</input>。閉合的寫法:<input type="submit" value="OK" />。
<button>的起始標簽和關閉標簽都是必須的,如 <button>OK</button>。
2、<button>的值並不是寫在value屬性裏,而是在起始、關閉標簽之間,如上面的OK。同時<button>的值很廣泛,
有文字、圖像、移動、水平線、框架、分組框、音頻視頻等。見《button按鈕設計初步》
3、可為button元素添加CSS樣式。
例如,<button style="width:150px;height:50px;border:0;"></button>
其中:width:150px;height:50px; 為按鈕的寬度、高度, 為按鈕的背景色,
border:0; 是去掉默認的邊框。見《button按鈕設計初步》
4、鼠標單擊事件、彈出信息的代碼可直接寫在<button>標簽中,方法簡單。
例如,<button onclick="alert(‘彈出信息的內容‘);window.open(‘打開網頁的地址‘)">按鈕名稱</button>
其中:alert(‘彈出信息的內容‘); 為單擊時彈出的信息,window.open(‘打開網頁的地址‘) 為打開的網頁。
HTML中button和input button的區別