The forgotten button tag_HTML/Xhtml_Web page production

Note: This article has been translated by someone to re-understand the button tag, but I feel that there are many places worthy of scrutiny and it is not easy to understand. Therefore, I re-translated this article based on my personal learning experience.
English original text: http://particletree.com/features/rediscovering-the-button-element/
For every program designer, provide users with a unified style interface is an unchanging requirement. However, it is extremely difficult to achieve this unified style on web pages, because there are differences in the way different operating systems and different browsers express web content, and these differences are almost irregular. This problem is particularly prominent in the process of processing form elements. Among them, what leaves many people at a loss is the problem of unifying the performance standards of the "Submit" button.
For example, the input tag with the attribute type="submit" either looks very ugly in different browsers (in Firefox), or has defects of one kind or another (in Internet Explorer), or even behaves very rigidly. (in Safari). The solution to this problem is usually to set the input attribute to image and then design a button image yourself. But this adds a lot of extra annoying work every time we need to use the button. Therefore, we need a better solution, one that is more flexible and meaningful to designers. Fortunately, this method already exists in practice, it just requires a little more work on our part. Friends, please allow me to introduce to you our lovely little friend !
Input VS Button
Here is the submit button tag you are using:

Their presentation styles in different browsers are as follows:

And when we use to create the above button code:
Submit
They behave as follows:

There is no difference in operation and behavior between these buttons and the buttons we created above. In addition to using them to submit forms, you can also set them to be disabled, add shortcut keys or set a tabindex, etc. Fortunately, except for the different presentation styles, Safari supports these functions (compared with the input button, the button button in Safari lacks the liquid effect on the surface). The coolest feature of the tag is that we can place some useful HTML elements inside it, such as adding images using the following code:
Submit
They look like this in the browser:

Not bad. In fact, according to the W3C definition, the element came into being to solve these differences in performance.
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.
The Button Element - W3C
So we have to find a design solution for this. Fortunately, the Internet with its massive data can provide us with some useful help to solve this problem. This is indeed very convenient, but unfortunately many designers and website developers are not even aware that this element exists. Before I decided to replace Wufoo (a network product of the author of this article, dudo note) with the button element, I had to make sure that this label and CSS could meet the following requirements:
Requirements:
1. They must have the appearance of buttons
2. Have the same presentation style in different browsers
3. The styles applied in buttons can also be used on hyperlinks (because Wufoo The interaction in is always implemented using one of the form submission method or the link triggering Ajax method. They may often be close together, so I need them to have the same presentation style)
4. In different Under certain circumstances, labels can be flexible and easy to modify
5. Events that occur during the information transmission process can be effectively distinguished using icons and colors
Faced with the above problems, I first wrote some CSS, and then solved the cross-browser problem. Next we will see:
The final result

It’s nothing surprising, it’s simple, yet very effective. The reason I like working with buttons this way is that I don't have to fire up Photoshop to create 10,000 icons one by one. If we take a closer look at the code, you will find that the next two buttons are actually two links.

Save



Change Password



Cancel

The purpose of this is because many actions in web applications are event (REST) ​​driven, so sending user requests through a specific URL can initialize these actions. Using styles that can be applied to both elements gives us greater flexibility in maintaining style uniformity for interactions caused by Ajax and standard submit buttons.
Now you may ask, why should I leave the alt attribute of the image element blank? alt is a necessary attribute of the img element. It is used to explain the content of the image, but there is no description of the image here, which is indeed a bit puzzling. However, unlike the "missing" attribute, the attribute value "null" is fully compliant with the standard. It tells the browser that these images represent some information that can be completely ignored, which also prevents the viewer from being unable to find it because of the obstruction of the prompt information. Go to next button. Since the icon here is completely redundant, we would rather not waste the user’s time looking at this icon that is used entirely to achieve a unified interface style.
CSS style sheet
Most of the CSS used to control the styles of these buttons is very intuitive. Slight differences in different browsers will cause us to separate them in the code below. Applying different padding values, fortunately, all this is completely achievable.
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:# 565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height: 17px; /* Safari */
}
*:first-child html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
Another problem is that Internet Explorer has some bugs when rendering long buttons. You can find information about this on Jehiah.cz, but in the above CSS code we can avoid the problem to a certain extent by declaring the values ​​of width and overflow.
Add a little color to the button
In Wufoo, we use neutral actions (here, the author calls actions such as change password neutral actions, and "OK" and "Submit" "Actions of the type "are called positive actions, and actions such as "Give up" and "Cancel" are called negative actions). The hover value is set to blue, and the positive and negative actions are set to green and red. In the style code below, we use different colors to distinguish positive actions such as "add" and "save" and negative actions such as "cancel" and "delete". It feels pretty good, and of course you can also choose the color you like.
/* STANDARD */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2 ;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
. buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}
Summary
The last thing I want to say is that this is just a solution we designed to meet the needs in Wufoo, but it performed well with our efforts. But that’s not the only way, you can find more interesting ways to make your buttons rounded or even more colorful. Since almost any other element can be placed between the tags, you can also create a really nice-looking three-dimensional button with rounded corners by inserting the tag and following Alex Griffioen’s latest method. To be honest, I hope this is just the beginning for all designers striving for interface reuse in their programs. In any case, I hope you can think more before opening Photoshop to create an input button, and take another look at this almost forgotten tag, maybe it will surprise you.
Appendix:
element in HTML4.0/xhmtl1.0
Definition and Usage
Define a button. Inside the button element, you can place content, such as text or images. This is the difference between this element and buttons created using input elements.
control provides more powerful functions and richer content than . Everything between the and tags is the content of the button, including any acceptable body content, such as text or multimedia content. For example, we can include an image and associated text in a button and use them to create an attractive markup image in the button.
The only prohibited element is image mapping, as its mouse and keyboard-sensitive actions interfere with the behavior of form buttons.
Selectable attributes
Attribute value description DTD
disabled disabled Disable this button. STF
namebutton_name specifies a unique name for this button. STF
type* button
* reset defines the type of button. STF
* submit
value some_value specifies the initial value of the button. This value can be modified by scripts. STF
Standard attributes:
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
Event attributes:
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup