The difference between the button and the input button in HTML

The difference between the button and the input button

A word summarizing the subject:<button> has <input type= "button" ... > the same effect but more powerful in terms of maneuverability.

The forms section of the HTML 4.01 specification has the following types of controls: Buttons, checkboxes, radio buttons, menus, text input, file Select, hidden controls, obj ECT controls. In addition to Buttons/menus/object controls, it is done by <input>.

What I'm talking about here is <button> and <input>.

<button> and <input>
The specification is named: You can use <button> and <input> to do form Press-button. Please refer to the detailed definition of these elements for different button types. It is important to note that <button> more than <input> supports richer performance features.

Some differences
We all know that <input> can be used this way (in fact it must be used): <input type= "Submit" value= "OK"/&GT; Instead of: <input type= "Submit" value= "OK" ></input>. Because the start tag is mandatory, closing the label is forbidden.

<button> is more powerful than <input> in that it can contain content. Its value is not written in the value attribute, but is included in the label. such as:<button>ok</button>. <button> 's start tag and close tag are required. This way you get the style of the dominant power.

You can write: <button><strong>ok</strong>, I do.</button>, or even insert Picture: <button>. Somewhat similar to <input type= "image", but obviously much stronger.

Finally, it should be noted that the <button> included pictures, can not use the hotspot map, that is, can not

<button>And <input type= "button" >The specific difference

1. Turn off the label settings. <input> Disable Close label </input>. Closed notation: <input type= "Submit" value= "OK"/>.

<button> start and close tags are required, such as <button>OK</button>.

2, the value of <button> is not written in the value attribute, but between the start, close the label, such as the above OK. At the same time the value of <button> is very wide,

There are text, images, moves, horizontal lines, frames, group boxes, audio and video, and so on. See "button pushbutton design Preliminary"

3. You can add CSS styles to the button element.

For example, <button style= "width:150px;height:50px;border:0;" ></button>

Among them: width:150px;height:50px; For the button's width, height, the background color of the button,

border:0; is to remove the default border. See "button pushbutton design Preliminary"

4, the mouse click event, pop-up information code can be directly written in the <button> tag, the method is simple.

For example, <button onclick= "alert (' content of popup message '); window.open (' Address of Open Web page ') ' > button name </button>

Where: Alert (' content of popup information '); For the information that pops up when clicked, window.open (' open page's address ') is an open Web page.

The difference between the button and the input button in HTML