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